1 CSS的背景
CSS 背景属性可以给元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
1.1 背景颜色
background-color 定义了元素的背景颜色。
background-color: 颜色值;
一般而言，颜色默认值是 transparent（透明），我们也可以指定背景颜色为透明色或其他色。
1.2 背景图片
background-image 属性描述了元素的背景图像，实际开发用于 logo 或者一些装饰性开发的小图片或者是超大的背景图片，优点是便于控制位置。（也用于精灵图）
background-image: none | url(images/logo.png);
1.3 背景平铺
若需要在 HTML 页面上对背景图进行平铺，可以使用 background-repeat 属性。
background-repeat: repeat(默认) | no-repeat | repeat-x | repeat-y;
| 参数值 | 作用 |
|---|---|
| repeat | 背景图像在纵向和横向上平铺（默认） |
| no-repeat | 背景图像不平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repeat-y | 背景图像在纵向上平铺 |
页面元素·既可以添加背景图片，也可以添加背景颜色，图片会覆盖颜色。
1.4 背景位置
background-position 可以改变图片在背景中的位置。
background-position: x y;
参数 x 和 y 指 x 左边和 y 坐标，可以使用方位名词或者精确定位。
| 参数值 | 说明 |
|---|---|
| length | 百分数 / 由浮点数字和单位字符组成的长度值 |
| position | top / center / bottom / left / center / right 方位名词 |
(1)参数是方位名词
- 若两个值都是方位名词，则两个值前后顺序无关，比如
left top和top left效果一致。 - 若只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。
body { /*设置超大背景图*/
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
background-position: center top;
}
(2)参数是精确单位
- 第一个必定是 x 坐标。第二个是 y 坐标
- 若只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中
(3)参数是混合单位
- 若是混合单位，则第一个值是 x 坐标，第二个值是 y 坐标。
1.5 背景图像固定
background-attachment 属性设置背景图像是否随着页面其余部分滚动。
background-attachment 后期可以制作视差滚动效果。
background-attachment: scroll | fixed;
| 参数 | 作用 |
|---|---|
| scroll | 背景图像随着对象内容滚动 |
| fixed | 背景图像固定 |
1.6 背景属性复合写法
简化代码，将属性写在同一个属性 background 下。 一般按照约定顺序编写。
background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
background: transparent url(image.jpg) no-repeat fixed top;
1.7 背景色半透明
CSS3 提供 background: rgba(r,g,b,a) 属性设置图片透明度。
background: rgba(0, 0, 0, 0.3);
- 最后一个参数是alpha透明度，取值范围在0~1之间，0是百分百透明。
- 我们习惯把0.3的0省略掉，写为rgba(0, 0, 0, .3)
- 盒子背景色半透明，对内容无影响。
- CSS3 新增属性，IE9+版本浏览器支持
1.8 背景总结
| 属性 | 作用 | 值 |
|---|---|---|
| background-color | 背景颜色 | 预定义的颜色值/十六进制/RGB代码 |
| background-image | 背景图片 | url(图片路径) |
| background-repeat | 是否平铺 | repeat/no-repeat/repeat-x/repeat-y |
| background-position | 背景位置 | length/position 分别是x和y坐标 |
| background-attachment | 背景附着 | scroll(背景滚动)/fix（背景固定） |
| 背景简写 | 书写更简单 | 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 |
| 背景色半透明 | 背景色半透明 | background: rgba(0, 0, 0, 0.3),后面必须是4个值 |
案例：五彩导航
思路：
- 链接属于行内元素，需要转换为行内块元素。
- 里面文字需要居中，需要用到单行文字居中的代码。
- 链接里需要设置背景图片，用到背景的相关属性设置。
- 鼠标经过变化背景图片，因此需要链接伪类选择器。 代码：
<style>
.nav a {
display: inline-block; /*转换为行内块元素*/
width: 120px;
height: 58px;
background-color: pink;
text-align: center; /*文本居中*/
line-height: 58px; /*单行文字居中*/
color: #fff;
text-decoration: none;
}
.nav .bg1 {
background: url(images/bg1.png);
}
.nav .bg1:hover {
background-image: url(images/bg11.png);/*链接伪类选择器*/
}
...
</style>
<body>
<div class="nav">
<a href="#" class="bg1">五彩导航</a>
<a href="#" class="bg2">五彩导航</a>
<a href="#" class="bg3">五彩导航</a>
<a href="#" class="bg4">五彩导航</a>
<a href="#" class="bg5">五彩导航</a>
</div>
</body>
2 CSS的三大特性
CSS 有三个非常重要的特性：层叠性、继承性、优先级。
2.1 层叠性
相同选择器设置相同的样式，此时一个样式就会覆盖（层叠） 另一个冲突的样式。层叠性主要解决样式冲突的问题。
层叠性原则：
- 样式冲突：遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
- 样式不冲突，不会层叠。
2.2 继承性
CSS 中子标签会继承父标签的某些样式，如文本颜色和字号。
- 恰当使用继承可以简化代码，降低 CSS 的复杂性
- 子元素可以继承父元素的样式（text-, font-, line-这些元素开头的可以继承，以及 color 属性）
2.2.1 行高的继承性
body {
font: 12px/1.5 'Microsoft Yahei';
}
- 行高可以跟单位也可以不跟；
- 如果子元素没有设置行高，则会继承父元素的行高为 1.5；
- 此时子元素的行高是：当前子元素的文字大小*1.5；
- body 行高 1.5 这样写法最大优势就是里面的子元素可以根据文字大小自动调整行高。
2.3 优先级
当一个元素指定多个选择器时，就会有有优先级的产生。
- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行
选择器权重如下所示。
| 选择器 | 选择器权重 |
|---|---|
继承或者* | 0,0,0,0 |
| 元素选择器 | 0,0,0,1 |
| 类选择器，伪类选择器 | 0,0,1,0 |
| ID 选择器 | 0,1,0,0 |
行内样式 style="" | 1,0,0,0 |
!important | ∞ 无穷大 |
p {
color: pink !important;
}
注意
- 继承的权重为 0，即使加了 important 权重也还是 0。
- a 链接，浏览器默认指定了一个样式，蓝色，下划线，不会继承父级样式
<style>
.nav {color: red;}
li {color: pink;}
</style>
<body>
<ul class="nav">
<li>猜猜我是啥颜色</li> /*因为继承的权重是0，所以body里是粉色*/
</ul>
</body>
复合选择器权重的叠加
权重可以叠加，需要计算权重，但是没有进位。
- div ul li —— 0,0,0,3
- nav ul li —— 0,0,1,2
- a:hover —— 0,0,1,1
- .nav a —— 0,0,1,1
