front-end CSS(3)background/CSS继承权重层叠

CSS 背景

background-color

半透明效果，指的是盒子背景半透明，而里面的内容不受影响。
这是rgba()是新增属性，IE9+以上才支持。
现在的开发不太关注兼容性了，可以大胆使用。

background: rgba(0,0,0,0.5)

background-image

常用于logo，背景图片或者装饰图片，便于控制位置

background-image： none | url(地址);

background-repeat

决定图片是否重复显示。

background-repeat： repeat【默认】 | no-repeat【不重复】 | repeat-x【沿着X轴重复】 | repeat-y【沿着Y轴重复】;

background-position

x, y可以使用长度单位，或者方位词，或者混合单位。

background-position：x y;

方位词：
left | right | center --x
top | center | bottom | --y

• 如果是方位名词，则单词的顺序无关，right center和center right效果一样。
• 如果只指定了一个方位名词，另外一个默认为垂直居中。

长度单位：
有严格的顺序，先x后y。
10px 10px;

混合单位：
有严格的顺序，先x后y。
20px center;

background-attachment

把背景图片固定住，默认是图片随着滚轮一起动的。

 background-attachment: fixed | scroll【默认】;

background

没有特定顺序，但是习惯约定为：

background: 背景颜色 背景图片 重复 滚动 位置；

CSS背景的总结

图片来自B站Pink老师

CSS 三大特性

层叠性、继承性、优先级

层叠性

解决样式冲突的问题。就近原则，后来者居上，后面写的代码会覆盖之前的代码。用图层的原理来理解，后面的图层覆盖前面的图层。

div {
font-size: 16px;
}
div {
font-size: 26px; 
}这个会起作用

继承性

子元素继承父级元素的样式。
给父元素设置样式，子元素自动继承。但不是所有的样式都会继承。
恰当地使用继承特性，可以简化代码。
行高的继承性：

行高的特殊写法
font: 12px/24px "Arial";
12px----font-size;
24px----line-height;

继承：当前元素的样式 * 父元素定义的倍数
body {
	font: 12px/1.5 "Arial";
}
div {
	font: 14px;
}
div的最终文字大小为; 14*1.5=21px

如果父元素也没有指定样式，会自动溯源上去，直到body标签。

优先级

选择器的权重：

图片来自B站Pink老师

举个例子：

<style>
	div{ color: red;!important}
	.box{ color: orange; }
	#test{ color: yellow; }
</style>
<div class="box" id="test" style="color: pink"> 
这个元素最后会是red

优先级的注意事项：

• 权重由4位数字组成，但是不会进位。
• 比较的时候，从左到右进行比较，如果数值相同，则比较下一个数值。
• 继承的属性权重最低，如果子元素被指定了样式，则忽略父级的样式。
• a标签特殊，必须直接指定样式，继承无用。

权重的叠加：
计算后，执行权重大的。

ul li{} 
权重：0,0,0,1+0,0,0,1=0,0,0,2
li{}
权重：0,0,0,1

图片来自B站Pink老师