1.3 CSS特性
层叠和继承是CSS样式两个最基本的特性，下面分别进行说明。
1.3.1 CSS层叠性
视频讲解
所谓层叠性，就是CSS样式允许重复声明，可以相互覆盖。对于相同CSS样式来说，不同位置的样式其优先级是不同的，主要体现在以下几个方面。
☑ 一般来说，行内样式优先于内部样式或者外部样式。
☑ 附加了!important关键字的声明会拥有最高的优先级。注意，必须把!important命令放置在声明语句与分号之间，否则无效。
☑ 对于相同权重的内部样式或外部样式，越接近对象的样式，优先级越高。
☑ 基本选择器都拥有一个优先级加权值，说明如下。
● 标签选择器：优先级加权值为1。
● 伪元素或伪对象选择器：优先级加权值为1。
● 类选择器：优先级加权值为10。
● 属性选择器：优先级加权值为10。
● ID选择器：优先级加权值为100。
● 其他选择器：优先级加权值为0，如通配选择器等。
☑ 组合选择器的优先级加权值是组合的基本选择器的加权值之和。以此类推，最后根据加权值之和来决定哪个样式的优先级大。计算的规则如下。
● 统计选择器中ID选择器的个数，然后乘以100。
● 统计选择器中类选择器的个数，然后乘以10。
● 统计选择器中的标签选择器的个数，然后乘以1。
【示例1】本示例演示了如何计算不同样式的加权值。
【示例2】在本示例中，通过内部样式为同一个元素使用不同的复合选择器，从而为其设置样式属性，通过层叠规则进行比较得出最终样式属性值。页面效果如图1.9所示。
图1.9 层叠特性测试
在上面的示例中，查看浏览器效果并逐步分析代码，需要注意的是，下面每一步测试时，后面的代码需要删除，故浏览器有多次显示结果，每一步都需要进行浏览器显示，以查看结果。
第1步，首先实现浏览器居中，针对<div>标签设置火狐浏览器下居中属性margin:0 auto；IE浏览器下居中属性text-align:center。
div{margin:0 auto; text-align:center;}
第2步，Cent层设置宽度为400像素，如果没有宽度设置，则浏览器上的居中也将无效。接着设置4个方向的内间距，最后设置1像素颜色为粉红色虚线边框线。
.Cent{width:400px; border:1px dashed #CC0099; padding:10px 15px;}
第3步，通过ID值引用Cent层，定义1像素颜色为粉蓝色虚线边框线，根据前面介绍的层叠规则：类选择器10分、ID选择器100分，最终边框线颜色为蓝色。如果将类别选择器Cent层和ID选择器#imp定义的顺序颠倒过来，最终结果依然是蓝色，其原因在于ID选择器的优先级别高于类选择器。
.Cent{width:400px; border:1px dashed #CC0099; padding:10px 15px;}
#imp{border:1px dashed #3366FF;}
第4步，Cent{}定义字体大小为14像素，而.Cent p{}定义字体大小为16像素。根据前面介绍的层叠规则：类选择器10分、标签选择器1分，那么.Cent{}为10分、.Cent p{}=10分+1分=11分，故最终结果为段落字体大小为16像素且字体加粗显示。
.Cent{font-size:14px;}
.Cent p{font-size:16px; font-weight:bold;}
第5步，Cent层中段落添加class名duanluo，定义字体不再加粗显示，行高1.5em，文本左对齐。对于上一步的加粗设置，如果字体大小无效，则查看加粗结果。行高设置使用相对单位可避免字体大小的改变而影响原先段落文字之间的距离。在使用浏览器居中时，IE浏览器居中需要设置text-align:center;，这里更改Cent层内文本对齐方式为左对齐，而Cent层依然居中显示。
段落内的<span>标签设置字体颜色为#009966，而通过ID值设置字体颜色为#669933。根据前面介绍的层叠规则：类选择器10分、标签选择器1分、ID选择器100分，故.Cent .duanluo span得分为10分+10分+1分=21分，而#imp span得分为100分+1分=101分，最终字体颜色为#669933。
.Cent .duanluo{font-weight:normal; line-height:1.5em; text-align:left}
.Cent .duanluo span{color:#009966;}
#imp span{color:#669933; font-weight:bold; font-size:22px}
第6步，在设置段落字体大小时，最终.Cent p设置的字体大小为浏览器显示结果：16像素，而通过ID选择器定义字体大小后，字体大小变为22像素。这里通过!important命令将<span>字体大小设置为30像素，因!important命令权限无限大，即分数值较高，暂定值为1000分，故#imp span分数为101分，小于!important命令值1000分，最终结果为30像素。
若span{font-size:30px !important;}和#imp span{font-size:50px !important;}比较，根据前面介绍的层叠规则：ID选择器100分、标签选择器1分、!important命令值1000分，故span{}得分为1000分（内部属性中!important）+1分（标签选择器）=1001分，而#imp span{font-size:50px !important;}得分为1000分（内部属性中!important）+100分（ID选择器）+1分（标签选择器）=1101分。
1.3.2 CSS继承性
视频讲解
所谓继承性，就是指被包含的元素将拥有外层元素的样式效果。继承性最典型的应用就是定义网页标签的默认样式。
【示例】在本示例中，设计HTML结构而不书写CSS样式，查看页面效果如图1.10所示。
图1.10 HTML代码页面效果图
在上面的示例中，通过继承的角度考虑标记直接的树形关系，图1.11给出继承关系树形图，对比图1.10，<html>标签是根元素，它是所有HTML元素的源头。在每一个分支中，下层是上层的子元素、上层是下层的父元素，故定义CSS样式时，编写样式html, body{font-size:30px}，则页面所有元素都将继承根元素、父元素的字体大小设置，而编写的基本标记选择器、类别选择器、ID选择器以及复合选择器都是根据HTML结构进行编写，尤其是复合选择器中前后标记的位置就是实际HTML结构，即图1.11所示的树形图。
图1.11 继承关系树形图