【web入门】CSS3（3）

一、CSS背景属性

1.1 背景颜色

background-color属性定义了元素的背景颜色。

background-color: transparent;

一般情况下元素背景颜色默认值是transparent（透明），我们也可以手动指定背景颜色为透明色。

1.2 背景图片

background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置。(精灵图也是一种运用场景)

background-image : none | url();

参数值	作用
none	无背景图(默认的)
url	使用绝对或相对地址指定背景图像

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坐标。可以使用方位名词或者精确单位

参数值	说明
length	百分数│由浮点数字和单位标识符组成的长度值
position	top │ center │ bottom │ left │center │ right方位名词

1.参数是方位名词
如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致。
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。
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) repeat-y fixed top;

这是实际开发中，我们更提倡的写法。

1.7 背景色半透明

CSS3为我们提供了背景颜色半透明的效果。

background: rgba(0,0,0,0.3) ;

● 最后一个参数是alpha透明度，取值范围在0~1之间
● 我们习惯把 0.3 的 0 省略掉，写为background: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(背景滚动) /fixed(背景固定）
背景简写	书写更简单	背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
背景色半透明	背景颜色半透明	background: rgba(0,0,0,0.3); 后面必须是4个值

二、CSS的三大特性

CSS有三个非常重要的三个特性∶层叠性、继承性、优先级。

2.1 层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题
层叠性原则︰
● 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
● 样式不冲突，不会层叠

2.2 继承性

CSS中的继承:子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是∶子承父业。
● 恰当地使用继承可以简化代码，降低CSS样式的复杂性
● 子元素可以继承父元素的样式( text-, font-, line-这些元素开头的可以继承，以及color属性）
行高的继承性

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 重要的	∞ 无穷大

优先级注意点：
1.权重是有4组数字组成，但是不会有进位。
2.可以理解为类选择器永远大于元素选择器， id选择器永远大于类选择器，以此类推。
3.等级判断从左向右，如果某一位数值相同，则判断下一位数值。
4.可以简单记忆法：通配符和继承权重为0，标签选择器为1，类(伪类)选择器为10，id选择器100，行内样式表为1000，!important无穷大。
5.继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。

/* 复合选择器会有权重叠加的问题 */
/* li的权重是0,0,0,1 */
li {color: red;}
/* ul li的权重是0,0,0,1 + 0,0,0,1 = 0,0,0,2 不会有进位*/
ul li {color: green;}
/* .nav li的权重是0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
.nav li {color: pink;}

<ul class="nav">
<li>最后显示的颜色是粉色</li>
</ul>

权重虽然会叠加,但是永远不会有进位
例：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

观看视频可移步↓
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程