HTML+CSS宝典 CSS基础更多的样式

Go to comments

HTML+CSS宝典 CSS基础更多的样式

一、透明度

透明度有两种设置方式

1. 第一种使用 opacity 属性，设置的是整个元素的透明度

2. 通常使用的是第二种方式，在颜色位置设置 alphaton（阿尔法）通道

opacity 就是这个元素盒子里面的内容、边框、背景所有的东西都通过 opacity 属性进行设置，整个元素内部所有的东西都会透明度，

opacity 不那么的常用，需要把整个区域都变成透明才会用到这个属性

opacity 属性的取值范围 0 ~ 1

0 表示透明，

1 表示完全不透明

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>透明度 opacity</title>
<style>
  div{
    position: absolute;
    width: 300px;
    height: 300px;
    top:0;
    left:0;
    bottom:0;
    right: 0;
    margin: auto;
    background-color: #ff8c8c;
    line-height: 36px;
    text-align: center;

    opacity:.5; /* 透明度 */
  }
</style>
</head>
<body>

  <img style="width:100%;" src="http://www.ruyic.com/blog/uploads/image/202201/164242168139798.jpg" alt="">
  <div>
    <h1>There's no such thing as a free lunch.</h1>
  </div>

</body>
</html>

div元素出现透明效果

There's no such thing as a free lunch.

alphaton（阿尔法）通道，就是设置颜色的时候可以使用 rgba，a 表示的是阿尔法通道，

阿尔法通道的意思是它的取值也是 0 ~ 1，0 表示这个颜色完全透明，1 表示完全不透明

可以独立的设置某一个地方，比如把文字颜色设置成透明

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿尔法通道</title>
<style>
  div{
    position: absolute;
    width: 300px;
    height: 300px;
    top:0;
    left:0;
    bottom:0;
    right: 0;
    margin: auto;
    background-color: #ff8c8c;
    line-height: 36px;
    text-align: center;		

    color: rgb(255,255,255,.2); /* 文字颜色设置成半透明 */
  }
</style>
</head>
<body>

  <img style="width:100%;" src="http://www.ruyic.com/blog/uploads/image/202201/164242168139798.jpg" alt="">
  <div>
    <h1>There's no such thing as a free lunch.</h1>
  </div>
  
</body>
</html>

文字呈透明效果，不影响div元素

There's no such thing as a free lunch.

边框也可以设置成透明，先改一下背景设置，

1. 背景默认覆盖是边框盒的，改成背景覆盖内容盒 background-clip: padding-box;

2. 然后修改透明边框 border: 10px solid rgb(0, 0, 0, .2);

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>rgba</title>
<style>
  div{
    position: absolute;
    width: 300px;
    height: 300px;
    top:0;
    left:0;
    bottom:0;
    right: 0;
    margin: auto;
    background-color: #ff8c8c;
    background-clip: padding-box; /* 设置背景覆盖内容盒子 */
    line-height: 36px;
    text-align: center;		
    color:#fff;
    
    border:15px solid rgb(0,0,0,.3);  /* 设置边框半透明 */
  }
</style>
</head>
<body>
	
  <img style="width:100%;" src="http://www.ruyic.com/blog/uploads/image/202201/164242168139798.jpg" alt="">
  <div>
    <h1>There's no such thing as a free lunch.</h1>
  </div>

</body>
</html>

边框变透明了

There's no such thing as a free lunch.

可以进行精细的设置某一个部分实现透明效果

1. 背景设置成透明 background-color: rgb(255, 140, 140, .6);

2. 字体不透明

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>rgba</title>
<style>
  div{
    position: absolute;
    width: 300px;
    height: 300px;
    top:0;
    left:0;
    bottom:0;
    right: 0;
    margin: auto;
    background-clip: padding-box;
    line-height: 36px;
    text-align: center;		
    color:#fff;
    
    border:15px solid rgb(0,0,0,.3);
    background-color: rgb(255,140,140,.6); /* 背景设置成半透明 */
  }
</style>
</head>
<body>
  
  <img style="width:100%;" src="http://www.ruyic.com/blog/uploads/image/202201/164242168139798.jpg" alt="">
  <div>
    <h1>There's no such thing as a free lunch.</h1>
  </div>

</body>
</html>

背景透明

There's no such thing as a free lunch.

二、鼠标

cursor 属性设置鼠标样式，属性值很多

poiner 小手

auto 默认，让浏览器来控制，比如遇到文字变成选择光标，在文本框变成输入状态

e-resize 表示重新调整尺寸

help 帮助，鼠标箭头多了一个问号

cursor 属性还可以设置图片

如果要设置鼠标为一张图片，图片不能用jpg、png...这些格式有的浏览器能支持，有的浏览器支持不了的，一般都会用ico格式作为后缀的图片

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标</title>
<style>
  div{
    background:orange;
    width:100px;
    height:100px;
    cursor: url(./target.ico), auto; /* 设置鼠标为一张图片 */
  }
</style>
</head>
<body>

  <div></div>	

</body>
</html>

一定要把图片变成.ico，或者是另外一种 .cur 格式（cur表示鼠标样式格式）

三、盒子显示和隐藏

用 css 来控制盒子的显示和隐藏有两种方式

display: none

表示不生成盒子，这种方式有可能会影响到其他元素的排版，因为一个元素消失了就不生成盒子了，剩下的元素可能就要改变了排列方式，

display 属性是能控制盒子类型的，把类型设置为 none，就表示没有盒子类型，他就不生成盒子了

visibility: hidden

表示依然生成盒子，生成的盒子是什么类型呢？

display 是什么类型就是什么类型，display 是 block 盒子就是块盒，display 是 inline 盒子就是行盒，

这种方式不影响盒子的类型，只是从视觉上移除盒子，盒子仍然占据空间

visibility 属性是可见度的意思

1. visible 默认值是显示的意思

2. hidden 隐藏

js 里可以控制这个属性来达到一个闪烁的效果（QQ图标闪烁）

四、背景图

背景图和 img 元素的区别

已经学了 img 元素了，直接用 img 元素来表达图片不完了吗，为什么要使用背景图呢？

img 是属于 html 的概念，背景图是属于 css 的概念。

什么时候用 img 元素，什么时候用背景图？

1. 当图片是网页内容时候，必须使用 img 元素，因为元素表示的是网页的内容结构，是网页的内容组成部分，必须使用 img 图片

2. 当图片仅用于网页的美化时，必须使用背景图，美化就是 css 的部分

所以背景图和图片怎么区分，关键取决于它的含义

比如广告很多使用的是图片，虽然广告不是网站的核心内容，但也是内容的一部分，

建议使用 img 元素，表示页面上有这么一个广告

比如游戏网站的按钮一定是一个图片，按钮使用 img 元素还是背景图呢？

按钮就应该使用的是一张背景图片，不应该使用 img

按钮就是一个 button 元素，所以从内容的角度来说，这个按钮图片不是必须要有的，

这张图片就是来修饰按钮的，表示这个按钮很好看，给按钮做了一个美化，因此这个时候应该使用背景图。

背景图涉及的 css 属性

background-image url()

background-repeat

background-size 表示背景图的尺寸

background-position

background-image url()

注意一点，如果 css 文件是一个是独立的文件，背景图路径要相对 css 文件的路径

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-image:url()</title>
<style>
  div{
    width: 700px;
    height: 600px;
    border 2px solid;
    background-image: url('http://www.ruyic.com/blog/uploads/image/202201/164242168139798.jpg');
  }
</style>
</head>
<body>

  <div></div>

</body>
</html>

给整个网站设置背景图，要给 body 元素设置

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>给整个网页设置背景图</title>
<style>
  body{
    background-image: url('http://www.ruyic.com/blog/uploads/image/202201/164242168139798.jpg');
  }
</style>
</head>
<body>

</body>
</html>

background-repeat

背景图默认情况下，背景图会在横坐标和纵坐标中进行重复，而重复是可以控制的，可以设置背景不让他重复

repeat 是重复的意思 background-repeat: no-repeat 表示不重复

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-repeat</title>
<style>
  body{
    background-image: url('http://www.ruyic.com/blog/uploads/image/201904/155591911913470.png');
    background-repeat: no-repeat;
  }
</style>
</head>
<body>
</body>
</html>

background-repeat 是一个速写属性

background-repeat: no-repeat 相当于写了下面两个

background-repeat-x: no-repeat 横坐标方向不重复

background-repeat-y: no-repeat 纵坐标方向不重复

background-repeat: repeat-x 设置背景图只在 x 轴横向重复

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-repeat:repeat-x</title>
<style>
  body{
    background-image: url('http://www.ruyic.com/blog/uploads/image/201904/155591911913470.png');
    background-repeat:repeat-y;
  }
</style>
</head>
<body>
</body>
</html>

只在 x 轴横坐标重复的效果，相当于设置了

background-repeat-x: repeat

background-repeat-y: no-repeat

也可设置只在纵向重复

background-repeat: repeat-y

也可设置默认值 repeat，两个方向都重复

background-repeat: repeat

background-size

表示背景图的尺寸

背景图比较大，div盒子比较小，所以盒子里面显示不完整，

默认情况下，背景图按照图片的尺寸来显示，不会对图片进行缩放，我们可以通过 background-size 来控制

有两个预设值（类似于object-fit）

1. contain

2. cover

contain 意思是保证图片能完整的显示到 div 盒子里面，no-repeat 有重复把重复去掉

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-size:contain</title>
<style>
  div{
    width: 700px;
    height: 420px;
    border: 1px solid;

    background-image: url('http://www.ruyic.com/blog/uploads/image/202201/164242168139798.jpg');
    background-repeat: no-repeat; /* 去掉重复  */
    background-size: contain;  /* 保证图片能完整的显示到div盒子里面*/
  }
</style>
</head>
<body>
  <div></div>	
</body>
</html>

横向撑满，纵向按照比例缩放

cover 意思背景图一定要把这个区域撑满，然后还要保证图片比例不变，所以图片有些地方就隐藏掉了

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-size:cover</title>
<style>
  div{
    width: 700px;
    height: 420px;
    border: 1px solid;

    background-image: url('http://www.ruyic.com/blog/uploads/image/202201/164242168139798.jpg');
    background-repeat: no-repeat;
    background-size: cover; /* 背景图一定要把这个区域撑满，然后还要保证图片比例不变，所以图片有些地方就隐藏掉了 */
  }
</style>
</head>
<body>
  <div></div>	
</body>
</html>

背景图比例上发生了变化（？？？？）

数值和百分百比

background-size: 300px 200px 可以自己设置一些数值，宽300像素，高200像素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数值和百分百比</title>
<style>
  div{
    width: 700px;
    height: 420px;
    border: 1px solid;

    background-image: url('http://www.ruyic.com/blog/uploads/image/202201/164242168139798.jpg');
    background-repeat: no-repeat;
    background-size:300px 200px;
  }
</style>
</head>
<body>
  <div></div>	
</body>
</html>

background-size: 100% 意思是横向上一定要撑满，纵向上按照比例缩放

background-size: 100% 100% 写两个100%，第一个表示横向撑满，第二个表示纵向撑满，于是背景图比例上发生了变化，就没有保持比例了

background-position

设置背景图的位置，这几个预设值可以分别设置横向和纵向的位置

left

bottom

right

top

center

right bottom 横向靠右，纵向靠下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置背景图的位置</title>
<style>
  div{
    width: 700px;
    height: 400px;
    border: 1px solid;

    background-image: url('http://www.ruyic.com/blog/uploads/image/201904/155591911913470.png');
    background-repeat: no-repeat;
    background-position:right bottom;
  }
</style>
</head>
<body>
  
  <div></div>	

</body>
</html>

conter 表示横向居中，同时纵向也居中

background-image: url('http://www.ruyic.com/blog/uploads/image/201904/155591911913470.png');
background-repeat: no-repeat;

background-position: center;

center top 横向居中，纵向靠上

background-image: url('http://www.ruyic.com/blog/uploads/image/201904/155591911913470.png');
background-repeat: no-repeat;

background-position: center top;

center buttom 横向居中，纵向靠下

background-image: url('http://www.ruyic.com/blog/uploads/image/201904/155591911913470.png');
background-repeat: no-repeat;

background-position: center bottom;

left center 横向靠左，纵向居中

background-image: url('http://www.ruyic.com/blog/uploads/image/201904/155591911913470.png');
background-repeat: no-repeat;

background-position: left center;

也可以写数值和百分比（百分比用的不多）

数值指的是相对位置

background-position: 0px 0px 两个数分别表示，背景图的左边离盒子左边的距离，背景图的上边离盒子上边的距离

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置背景图的位置</title>
<style>
  div{
    width: 700px;
    height: 400px;
    border: 1px solid;

    background-image: url('http://www.ruyic.com/blog/uploads/image/201904/155591911913470.png');
    background-repeat: no-repeat;
    background-position: 0px 0px;
  }
</style>
</head>
<body>

  <div></div>	

</body>
</html>

background-position: 0px 20px 第二个数字表示纵向的 Y 坐标，离上边的距离

background-position: 40px 20px 第一个数值增加到 40 像素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置背景图的位置</title>
<style>
  div{
    width: 700px;
    height: 400px;
    border: 1px solid;

    background-image: url('http://www.ruyic.com/blog/uploads/image/201904/155591911913470.png');
    background-repeat: no-repeat;
    background-position: 40px 20px;
  }
</style>
</head>
<body>

  <div></div>	

</body>
</html>

可以写具体的数字，也可以写负数

雪碧图

雪碧图也叫精灵图，是单词 spirit 精灵的意思，音译过来叫雪碧图

雪碧图的意思是，网页上有一些小图标，把这些小图标合并成一张图片

为什么要合并呢？

如果单独做成一张一张单独的图片，会导致产生很多很多的图片，

网站渲染的时候就要读很多文件，这样会降低网站的渲染效率，所以会把这些零散的文件，合并成一张大的文件

这样只需要读一张文件就行了，而且图片文件还会被浏览器缓存起来，之后的运行就会非常非常快了

在实际的开发中，会遇到把很多的图标，合并到一张的大图，

我们需要从雪碧图中取出一小块出来，怎么取呢？利用背景图的位置 background-position，取出雪碧图中的一小块

看栗子

1. div元素加上一张雪碧图背景

2. no-repeat 设置不重复

3. 尺寸不变，用原始尺寸

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>雪碧图</title>
<style>
  div{
    width: 28px;
    height: 28px;
    border: 1px solid;

    background-image: url('http://www.ruyic.com/blog/uploads/image/202201/164263479556296.png');
    background-repeat: no-repeat;
    background-position: -48px -38px;
  }
</style>
</head>
<body>
  
<div></div>

</body>
</html>

background-attachment 通常用于设置背景图是否固定

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>固定背景图</title>
<style>
  body{
    background-image: url('http://www.ruyic.com/blog/uploads/image/202201/164242168139798.jpg');
    background-repeat: no-repeat; /* 设置不重复 */
    background-size: 100%; /* 横向100%，纵向自适应 */
    
    background-attachment: fixed; /* 设置背景图是相对于视口的，有点类似于固定定位 */
  }
</style>
</head>
<body>
  
  <div style="height: 2000px;"></div>

</body>
</html>

背景图和背景颜色混用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景图和背景颜色混用</title>
<style>
  body{
    background-image: url('http://www.ruyic.com/blog/uploads/image/201904/155591911913470.png');
    background-repeat: repeat-x; /* 只在x轴重复 */
    background-color: #ffd200;
  }
</style>
</head>
<body>
</body>
</html>

速写属性（简写）

background: url('./pic.jpg') 不重复位置/尺寸固定背景颜色;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简写属性</title>
<style>
body{
  background: url('http://www.ruyic.com/blog/uploads/image/201904/155591911913470.png') no-repeat 50% 50%/200px 200px fixed #ffd200;
}
</style>
</head>
<body>
</body>
</html>

在速写属性里面有两地方有可能写成数字（数值），

1. 一个是尺寸 background-size，

2. 还有一个是位置 background-position，位置也可能是数字和百分比

比如位置居中 background-position: center

也可能设置 background-position:50% 50% 也表示居中，这里有点特殊两个50% 好像是距离左边、上边各有一半的距离，实际上表示居中

意思是说 background-size: 100% 属性有可能取百分比，有可能是具体的像素值

那么在书写的时候，浏览器怎么知道哪个是尺寸？哪个是位置呢？

所以浏览器要求这样写

1. 先写位置

background: url('pic.jpg') no-repeat 50% 50%/100% fixed #ffd200

2. 写一个斜杠分开，尺寸写在斜杠后面，再写尺寸

background: url('pic.jpg') no-repeat 50% 50%/100% fixed #ffd200

3. 然后再写固定 fixed

background: url('pic.jpg') no-repeat 50% 50%/100% fixed #ffd200;

4. 写背景颜色

background: url('pic.jpg') no-repeat 50% 50%/100% fixed #ffd200

位置这里，也不可以不写50% 50%，可以简单的写预设值center，总之顺序要先写位置，再写尺寸才行

background: url('pic.jpg') no-repeat center/100% fixed #ffd200

也不是每个属性都写，

比如no-repeat 可以不写，不写就按照默认值

background: url('pic.jpg') center/100% fixed #ffd200

fixed也可以不写，不写fixed背景就依附在body元素上， body元素滚动背景就跟着滚动

background: url('pic.jpg') no-repeat center/100% #ffd200

firstTime: 20220123