二、CSS特性
CSS具有两大特性：
- 继承性
- 层叠性
1.继承性
CSS的继承性，指的是子元素继承父元素的某些样式属性，例如：在父元素定义字体颜色（color属性），子元素会继承父元素的字体颜色。
不是所有属性都具有继承性
不过，并不是所有属性都具有继承性，如：
padding、margin、border等就不具备继承性，况且要是这些属性也可以继承，那对于网页来说是一场噩梦。
（1）具有继承性的属性
W3C规定，只有那些能让我们轻松书写的属性才可以继承。在
CSS中，具有继承性的属性有 3 大类：
- 文本相关属性
- 列表相关属性
- 颜色相关属性
① 文本相关属性
- font-family
- font-size
- font-style
- font-weight
- font
- line-height
- text-align
- text-indent
- word-spacing
② 列表相关属性
- list-style-image
- list-style-position
- list-style-type
- list-style
③ 颜色相关属性
- color
（2）示例
① 例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<style type="text/css">
html{
font-size: 62.5%; /*使得浏览器默认字体大小变为 10px */
}
#daddy{
color:mediumpurple;
font-weight: bold;
}
</style>
</head>
<body>
<div id="daddy">
一蓑烟雨任平生。
<div id="girl">一蓑烟雨任平生。</div>
</div>
</body>
</html>
CSS继承性示例1.png
② 例2
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<style type="text/css">
html{
font-size: 62.5%; /*使得浏览器默认字体大小变为 10px */
}
#daddy{
color:#66A9FE;
font-weight: bold;
}
</style>
</head>
<body>
<div id="daddy">
一蓑烟雨任平生。
<a href="http://www.baidu.com">一蓑烟雨任平生。</a>
</div>
</body>
</html>
CSS继承性示例2.png
Ⅰ.a标签的继承
按照例1 体现的
CSS继承性，例 2 的子元素也应该是蓝色，但是子元素（a元素）却显示深紫色。这是因为
a标签本身有默认的颜色样式，优先级比继承的要高，如果想要改变a标签的颜色，必须选中a标签进行操作才行。对于
a标签这个特点，在实际开发中会经常遇到。
（3）实际开发
利用
CSS继承性，有时我们可以少写很多代码，就像上面例子中，只需在父元素中定义属性，就不需要在子元素中重复定义。在实际开发中，应充分利用
CSS的继承性，从而减少重复代码的编写，这样也可使得CSS代码更精简优雅。
2.层叠性
在网页中，对于同一个元素，我们重复定义了多个相同的属性时，CSS将会怎样处理？
（1）“后来者居上”原则
CSS的层叠性，指的是样式的覆盖。对于同一个元素来说，若我们重复定义多个相同的属性，并且这些样式具有相同的权重，
CSS会以最后定义的属性的值为准，这就是“后来者居上”原则。
① 必须符合的3条件
“后来者居上”原则必须符合 3 个条件：
- 元素相同
- 属性相同
- 权重相同
权重：指的是选择器的权重。
（2）示例
① 例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<style type="text/css">
div{
color:#00FFFF;
}
div{
color:blue;
}
div{
color:greenyellow;
}
</style>
</head>
<body>
<div>見贤思齊</div>
<div>見贤思齊</div>
<div>見贤思齊</div>
</body>
</html>
<!--
我们首先定义所有 div 颜色为#00FFFF，然后定义所有 div 颜色为blue，最后定义所有 div 颜色为greenyellow。
因为CSS的层叠性，color:#00FFFF会被color:blue覆盖，color:blue会被color:greenyellow覆盖，所以最终颜色为greenyellow
-->
CSS层叠性示例1.png
② 例2
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<style type="text/css">
div{
color:greenyellow;
}
#a{
color:#00FFFF
}
</style>
</head>
<body>
<div>見贤思齊</div>
<div id="a">見贤思齊</div>
<div>見贤思齊</div>
</body>
</html>
<!--
这和例1不同，这就是因为“后来者居上”原则必须符合 3 个条件。
- 元素相同
- 属性相同
- 权重相同
-->
CSS层叠性示例2.png
网友评论