1.3 CSS特性_CSS3网页设计从入门到精通（微课精编版）-QQ阅读男生玄幻网

1.3 CSS特性

CSS样式具有两个特性：继承性和层叠性，下面分别进行说明。

CSS继承性是指后代元素可以继承祖先元素的样式。继承样式主要包括字体、文本等基本属性，如字体、字号、颜色、行距等，对于下面类型属性是不允许继承的：边框、边界、补白、背景、定位、布局、尺寸等。

提示：灵活应用CSS继承性，可以优化CSS代码，但是继承的样式的优先级是最低的。

【示例】下面示例在body元素中定义整个页面的字体大小、字体颜色等基本页面属性，这样包含在body元素内的其他元素都将继承该基本属性，以实现页面显示效果的统一。

新建网页，保存为test.html，在<body>标签内输入如下代码，设计一个多级嵌套结构。

在<head>标签内添加<style type="text/css">标签，定义内部样式表，然后为body定义字体大小为12px，通过继承性，则包含在body元素中的所有其他元素都将继承该属性，并显示包含的字体大小为12px。在浏览器中预览，显示效果如图1.6所示。

    body {font-size:12px;}

图1.6 CSS继承性演示效果

CSS层叠性是指CSS能够对同一个对象应用多个样式的能力。

【示例1】新建一个网页，保存为test.html，在<body>标签内输入如下代码：

    <div id="wrap">看看我的样式效果</div>

在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，分别添加两个样式：

两个样式中都声明相同的属性，并应用于同一个元素上。在浏览器中测试，则会发现最后字体显示为14px，也就是说14px字体大小覆盖了12px字体大小，这就是样式层叠。

当多个样式作用于同一个对象时，则根据选择器的优先级，确定对象最终应用的样式。

标签选择器：权重值为1。

伪元素或伪对象选择器：权重值为1。

类选择器：权重值为10。

属性选择器：权重值为10。

ID选择器：权重值为100。

其他选择器：权重值为0，如通配选择器等。

然后，以上面权值数为起点来计算每个样式中选择器的总权值数。计算规则如下。

统计选择器中ID选择器的个数，然后乘以100。

统计选择器中类选择器的个数，然后乘以10。

统计选择器中标签选择器的个数，然后乘以1。

以此方法类推，把所有权重值数相加，即可得到当前选择器的总权重值，最后根据权重值来决定哪个样式的优先级大。

【示例2】新建一个网页，保存为test.html，在<body>标签内输入如下代码：

    <div id="box" class="red">CSS选择器的优先级</div>

在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，添加如下样式：

对于上面的样式表，可以这样计算它们的权重值：

body div#box = 1 + 1 + 100 = 102

#box = 100

di.red = 1 + 10 = 11

因此，最后的优先级为body div#box大于#box，#box大于di.red。所以可以看到显示效果为2px的红色实线。在浏览器中预览，显示效果如图1.7所示。

图1.7 CSS优先级的样式演示效果

提示：与样式表中样式相比，行内样式优先级最高；相同权重值时，样式最近的优先级最高；使用!important命令定义的样式优先级绝对高；!important命令必须位于属性值和分号之间，如#header{color:Red!important;}，否则无效。