CSS教程:学习CSS的承袭性
日期：2014-04-02 浏览次数：21350 次
网页制造aiyiweb文章简介：CSS的承继性及其使用.
所谓CSS的承继是指被包在内部的标签将拥有外部标签的款式性质。承继特性最典型的使用通常发挥在整个网页的款式预设，需求指定为其它款式的部份设定在一般元素里即可。这项特性可以给网页设计者提供更理想的发挥空间。但同时承继也有很多规则，使用的时候容易让人迷惑，donger今天就专门和大家聊聊这方面的使用。
CSS是层叠款式表(Cascading Style Sheets)的简称，它的规范代表了互联网历史上一个独特的发展阶段。如今对于从事网页制造的朋友来说，很少没有听说过CSS了吧，由于在制造网页过程中我们经常需求用到。
CSS允许我们为文档设置更为丰富且便于修正的外观，可以减轻网页设计者的任务负担。这里我们次要想和朋友们一同对CSS的承继性和特殊性进行一点深入的探讨。
一、承继
CSS的一个次要特征就是承继，它是依赖于祖先-后代的关系的。承继是一种机制，它允许款式不只可以使用于某个特定的元素，还可以使用于它的后代。例如一个BODY定义了的颜色值也会使用到段落的文本中。下面举例说明：
款式定义：
CSS是层叠款式表(Cascading Style Sheets)的简称，它的规范代表了互联网历史上一个独特的发展阶段。如今对于从事网页制造的朋友来说，很少没有听说过CSS了吧，由于在制造网页过程中我们经常需求用到。
CSS允许我们为文档设置更为丰富且便于修正的外观，可以减轻网页设计者的任务负担。这里我们次要想和朋友们一同对CSS的承继性和特殊性进行一点深入的探讨。
一、承继
CSS的一个次要特征就是承继，它是依赖于祖先-后代的关系的。承继是一种机制，它允许款式不只可以使用于某个特定的元素，还可以使用于它的后代。例如一个BODY定义了的颜色值也会使用到段落的文本中。下面举例说明：
款式定义：
body{color:red;}
使用举例代码：
使用举例代码：
<p>CSS的<strong>层叠和承继</strong>深入探讨</p>
这段代码的使用结果是：“CSS的层叠和承继深入探讨”这段话是红颜色的，“层叠和承继”由于使用了strong元素，所以是粗体。这很符合制造者的意图，也是为什么承继是CSS的一部分的缘由。
二、CSS承继的局限性
在CSS中，承继是一种非常自然的行为，我们甚至不需求考虑能否能够这样去做，但是承继也有其局限性。
首先，有些属性是不能承继的。这没有任何缘由，只是由于它就是这么设置的。举个例子来说：border属性，大家都知道，border属性是用来设置元素的边框的，它就没有承继性。多数边框类属性，比如象Padding(补白)，Margin(边界)，背景和边框的属性都是不能承继的。
三、承继中容易惹起的错误
有时候承继也会带来些错误，比如说下面这条CSS定义：
这段代码的使用结果是：“CSS的层叠和承继深入探讨”这段话是红颜色的，“层叠和承继”由于使用了strong元素，所以是粗体。这很符合制造者的意图，也是为什么承继是CSS的一部分的缘由。
二、CSS承继的局限性
在CSS中，承继是一种非常自然的行为，我们甚至不需求考虑能否能够这样去做，但是承继也有其局限性。
首先，有些属性是不能承继的。这没有任何缘由，只是由于它就是这么设置的。举个例子来说：border属性，大家都知道，border属性是用来设置元素的边框的，它就没有承继性。多数边框类属性，比如象Padding(补白)，Margin(边界)，背景和边框的属性都是不能承继的。
三、承继中容易惹起的错误
有时候承继也会带来些错误，比如说下面这条CSS定义：
body{color:blue}
在有些浏览器中这句定义会使除表格之外的文本变成蓝色。从技术上来说，这是不正确的，但是它确实存在。所以我们经常需求借助于某些技巧，比如将CSS定义成这样：
在有些浏览器中这句定义会使除表格之外的文本变成蓝色。从技术上来说，这是不正确的，但是它确实存在。所以我们经常需求借助于某些技巧，比如将CSS定义成这样：
body,table,th,td{color:blue}
这样表格内的文字也会变成蓝色。
四、多种款式混合使用
既然有了承继性，那么在款式表中的使用上可能会有些读者搞不清，多个款式表同时使用到一个对象上会发生什么情形呢？先举个简单的例子：
款式定义：
这样表格内的文字也会变成蓝色。
四、多种款式混合使用
既然有了承继性，那么在款式表中的使用上可能会有些读者搞不清，多个款式表同时使用到一个对象上会发生什么情形呢？先举个简单的例子：
款式定义：
.apple{color:red;}h1{color:yellow;}
使用举例代码：
使用举例代码：
<h1 class="apple">这儿的苹果好红啊</h1>
使用举例效果：由于选择符h1和.apple都婚配上面的H1元素，那么到底浏览器会使用哪一个呢？通过在浏览器中观察，我们发现这段文字使用了.apple这个款式，所以它显示的是红色。这是由于两条规则的特殊性不一样，CSS规则必须这样进行处理。
款式表中的特殊性描述了不同规则的绝对权重，它的基本规则是：
统计选择符中的id属性个数。
统计选择符中的class属性个数。
统计选择符中的html标记名格式。
最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数。( 留意，你需求将数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。
以下是一个按特性分类的选择符的列表：
使用举例效果：由于选择符h1和.apple都婚配上面的H1元素，那么到底浏览器会使用哪一个呢？通过在浏览器中观察，我们发现这段文字使用了.apple这个款式，所以它显示的是红色。这是由于两条规则的特殊性不一样，CSS规则必须这样进行处理。
款式表中的特殊性描述了不同规则的绝对权重，它的基本规则是：
统计选择符中的id属性个数。
统计选择符中的class属性个数。
统计选择符中的html标记名格式。
最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数。( 留意，你需求将数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。
以下是一个按特性分类的选择符的列表：
h1 {color:blue;}特性值为：1
p em {color:purple;}特性值为：2
.apple {red;} 特性值为：10
p.bright {color:yellow;} 特性值为：11
p.bright em.dark {color:brown;} 特性值为：22
#id316 {color:yellow} 特性值为：100
从上表我们可以看出#id316具有更高的特殊性，因此它有更高的权重。当有多个规则都能使用于同一个元素时，权重越高的款式将被优先采用。
五、CSS承继的优先级问题
上面我们讨论了CSS的承继性和特殊性，在特殊性的框架下，被承继的特性值为0，这就意味着任何显示声明的规则将会覆盖其承继款式。因此，不管一条规则具有多高的权重，如果没有其他规则能使用于这个承继元素，那么它也只是个被承继的规则而已，举例说明。
款式定义：
p em {color:purple;}特性值为：2
.apple {red;} 特性值为：10
p.bright {color:yellow;} 特性值为：11
p.bright em.dark {color:brown;} 特性值为：22
#id316 {color:yellow} 特性值为：100
从上表我们可以看出#id316具有更高的特殊性，因此它有更高的权重。当有多个规则都能使用于同一个元素时，权重越高的款式将被优先采用。
五、CSS承继的优先级问题
上面我们讨论了CSS的承继性和特殊性，在特殊性的框架下，被承继的特性值为0，这就意味着任何显示声明的规则将会覆盖其承继款式。因此，不管一条规则具有多高的权重，如果没有其他规则能使用于这个承继元素，那么它也只是个被承继的规则而已，举例说明。
款式定义：
body { background:black;}
li { color:gray;}
ul.white { color:white}
使用举例代码：
li { color:gray;}
ul.white { color:white}
使用举例代码：
<ul>
<li>举例列表一</li>
<li>举例列表二</li>
<li>举例列表三</li>
<li>举例列表四</li>
</ul>
有些读者可能认为除包含.white类的列表项显示为白色外，其余所有的列表项都应该是灰色的。然而情况并非如此。
为什么会出现这样的情况呢？由于带选择符LI的显式声明的权值比从UL.white规则那里承继过来的权值要大，所以每个列表项都是灰色的。
可能有些地方不是很好理解，大家多思考一下就会明白，平时在使用款式表的时候多留意思考一下。
下面我们再来看一个例子，若给定如下所示的标记，则EM强调文字将会是灰色的，而非黑色，由于EM规则的权值要大于从H1元素承继来的权值：
款式定义：
<li>举例列表一</li>
<li>举例列表二</li>
<li>举例列表三</li>
<li>举例列表四</li>
</ul>
有些读者可能认为除包含.white类的列表项显示为白色外，其余所有的列表项都应该是灰色的。然而情况并非如此。
为什么会出现这样的情况呢？由于带选择符LI的显式声明的权值比从UL.white规则那里承继过来的权值要大，所以每个列表项都是灰色的。
可能有些地方不是很好理解，大家多思考一下就会明白，平时在使用款式表的时候多留意思考一下。
下面我们再来看一个例子，若给定如下所示的标记，则EM强调文字将会是灰色的，而非黑色，由于EM规则的权值要大于从H1元素承继来的权值：
款式定义：
h1#id316 { color:black;} 特性值为：101
em { color:gray;} 特性值为：1
使用举例代码：
em { color:gray;} 特性值为：1
使用举例代码：
<h1 id="id316">深入探讨<em>CSS的承继性</em></h1>
这是由于第二条EM规则的特性值(1)要比被承继的特性值(0)要大，理想上规定h1#id316的原始特性值(101)对其承继值没有影响，仍旧为0。
小技巧：
如果想让H1一直为黑色，而EM文字在其他情况下红色，那么下面的款式表设置就是一个很好的方法：
这是由于第二条EM规则的特性值(1)要比被承继的特性值(0)要大，理想上规定h1#id316的原始特性值(101)对其承继值没有影响，仍旧为0。
小技巧：
如果想让H1一直为黑色，而EM文字在其他情况下红色，那么下面的款式表设置就是一个很好的方法：
h1,h1 em { color:black;} 特性值为：1，2
em { color:red;} 特性值为：1
给定这个规则后，除在H1元素内的任何em文字就都是红色，而H1内的EM文字仍旧为黑色，由于其选择符分组，在第一条规则中就有两条无效的规则(一条是对h1的，另一条是对h1 em的)也就有两个特性值--每条规则一个。
上面我们讨论了多个款式规则同时使用于同一对象时，哪个规则会被最终使用的一些情况，可能有些细心的读者会说，那style元素呢？对啊，html代码中可以直接使用内联款式style的嘛。那么它的特性值如何呢？
回答是这样的：带有style的元素在
em { color:red;} 特性值为：1
给定这个规则后，除在H1元素内的任何em文字就都是红色，而H1内的EM文字仍旧为黑色，由于其选择符分组，在第一条规则中就有两条无效的规则(一条是对h1的，另一条是对h1 em的)也就有两个特性值--每条规则一个。
上面我们讨论了多个款式规则同时使用于同一对象时，哪个规则会被最终使用的一些情况，可能有些细心的读者会说，那style元素呢？对啊，html代码中可以直接使用内联款式style的嘛。那么它的特性值如何呢？
回答是这样的：带有style的元素在
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
