CSS的继承性

  所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式性质。继承特性最典型的

  应用通常发挥在整个网页的样式预设,需要指定为其它样式的部份设定在个别元素里即

  可。这项特性可以给网页设计者提供更理想的发挥空间。但同时继承也有很多规则,应

  用的时候容易让人迷惑。

  CSS是层叠样式表(Cascading Style Sheets)的简称,它的规范代表了互联网历史上一

  个独特的发展阶段。现在对于从事网页制作的朋友来说,很少没有听说过CSS了吧,因

  为在制作网页过程中我们经常需要用到。

  CSS允许我们为文档设置更为丰富且便于修改的外观,可以减轻网页设计者的工作负

  担。这里我们主要想和朋友们一起对CSS的继承性和特殊性进行一点深入的探讨。

  一、继承

  CSS的一个主要特征就是继承,它是依赖于祖先-后代的关系的。继承是一种机制,它允

  许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如一个BODY定义

  了的颜色值也会应用到段落的文本中。下面举例说明:

      样式定义:

1
body{color:red;}

  应用举例代码:

 
<p>CSS的<strong>层叠和继承</strong>深入探讨</p>

 

  这段代码的应用结果是:“CSS的层叠和继承深入探讨”这段话是红颜色的,“层叠和

  继承”由于应用了strong元素,所以是粗体。这很符合制作者的意图,也是为什么继承

  是CSS的一部分的原因。

  二、CSS继承的局限性

  在CSS中,继承是一种非常自然的行为,我们甚至不需要考虑是否能够这样去做,但是

  继承也有其局限性。

  首先,有些属性是不能继承的。这没有任何原因,只是因为它就是这么设置的。举个例

  子来说:border属性,大家都知道,border属性是用来设置元素的边框的,它就没有

  承性。多数边框类属性,比如象Padding(补白),Margin(边界),背景和边框的属性都

  是不能继承的。

  三、继承中容易引起的错误

  有时候继承也会带来些错误,比如说下面这条CSS定义:

 
body{color:blue}

 

  在有些浏览器中这句定义会使除表格之外的文本变成蓝色。从技术上来说,这是不正确

  的,但是它确实存在。所以我们经常需要借助于某些技巧,比如将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 {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,这就

  意味着任何显示声明的规则将会覆盖其继承样式。因此,不管一条规则具有多高的权

  重,如果没有其他规则能应用于这个继承元素,那么它也只是个被继承的规则而已,举

  例说明。

  样式定义:

 
body { background:black;}
li { color:gray;}
ul.white { color:white}

 

  应用举例代码:

 
<ul>
<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

 

  应用举例代码:

 
<h1 id="id316">深入探讨<em>CSS的继承性</em></h1>

 

  这是因为第二条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的元素在css1下其特性值为100,尽管类似于#id316这样的

  id选择符的特性值也为100,但在实际应用中,style这一权值会更高一些,因为style元

  素的值看起来要比多数普通规则的权值大。所以我们可以看出内联样式具有高的特性

  值,具体的例子我们就不举了,大家可以自己试试。

  六、人为定义CSS继承优先级

  在制作网页的过程中,我们可能想要设置某个规则比其他的规则更重要,CSS中允许这

  样设置,它们被称为重要规则(important rule)。这是根据其声明的方式和它们的自然

  属性来命名的。通过在一条规则的分号前插入!important这样一个短语来标记一条重要

  规则,比如说:

p.apple { color:red !important; background:white;}

 

  颜色值red被标记为!important,而背景色white未被标记,如果需要二条规则都是重要

  的话,那么每条规则都需要标上!important。

  正确地放置!important的位置是很重要的,否则整条规则将为无效。!important总是放

  在规则声明的最后,在分号之前。

  标记为!important的规则具有最高的权值,也就是说他没有具体的特性值,但是比其他

  的权值都要大。需要注意的是,虽然制作者定义的样式比用户定义的样式具有更高权值

  时,但!important规则恰恰相反:重要的用户定义规则要比制作者定义的样式具有更高

  权值,即使是标记为!important的重要规则也是如此。

  看了这么多文字介绍后,我们来举个例子看一下:

  样式定义:

 
h1 { color:gray !important;}

 

  应用举例代码:

<h1 style="color:black;">看这儿!</h1>

 

  应用举例效果:!important规则会覆盖内联style属性的内容,所以结果文字是灰色的而

  不是黑色的。

  还有最后一种需要考虑的情况:继承值总是具有特性值0的特点,即使是从带有!

  important的规则继承的值也是如此,在匹配重要规则的元素之外,重要性也会随之消

  失,这点是需要我们特别注意的

CSS的继承性,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。