网页结构和层叠样式的继承属性

特殊性对于理解如何向网页文档应用声明很重要,同样的,还有一个很重要的概念,即继承。基于继承机制,样式不仅应用到指定的元素,还会应用到它的后代元素。例如,如果向一个h1元素应用一个颜色,那么这个颜色将应用到h1中的所有文本,甚至应用到该h1 的子元素中的文本:

h1 {color:gray;}

<h1>Meerkat <em>Central</em></h1>

不仅正常的h1文本会变成灰色,连em文本也会是灰色,因为em元素继承了这个color 值。如果属性值不能被后代元素继承,em文本应当是黑色,而不是灰色,则必须单独地为该元素指定颜色。

继承对无序列表也适用。假设为ul元素应用样式color: gray;:

ul {color: gray;}

你希望应用到ul的样式也应用到其列表项,并且应用到这些列表项中的所有内容。正是因为有继承,你将如愿以偿。

将声明color :gray;应用到ul元素时,这个元素会采用该声明。这个值再沿着树向下

传播到后代元素,并一直继续,直到再没有更多的后代元素继承这个值为止。值绝对不会向上传播,也就是说,元素不会把值向上传递到其祖先。

注意:在网页HTML中,对于向上传播规则有一个例外:应用到body元素的背景样式可以传递到html元素(html是文档的根元素),相应地可以定义其画布。

继承是CSS中最基本的内容之一,除非有必要的理由,否则一般不会特别考虑,正所谓“熟视无睹”。不过,还是有几点需要记住。

首先,注意有些属性不能继承,这往往归因于一个简单的常识。例如,属性border (用于设置元素的边框)就不会继承。如果边框能继承,网页文档会变得更混乱,除非网页设计师另外花功夫去掉继承的边框。

一般地,大多数框模型属性(包括外边距、内边距、背景和边框)都不能继承,其原因是一样的。毕竟,你肯定不希望一个段落中的所有链接都从其父元素继承30像素的左外边距!

继承的值根本没有特殊性,甚至连0特殊性都没有。这看上去似乎只是理论上不同,不过等你了解到继承值没有特殊性会有什么结果时,就会知道这种差别绝不能忽视。

*{color: gray;}

h1#page-title {color:black;}

<h1 id="page-title">Meerkat <em>Central</em></h1>

<p>

Welcome to the best place on the web for meerkat information!

</p>

继承bug

由于不同的网页浏览器实现中可能存在的问題,创作人员不能指望依靠继承在所有情况下得到预想的结果。例如,Navigator 4 (另外,从某种程度上讲,Explorer 4和5)的表不会继承样式。因此,以下规则会导致文档中除表之外的所有文本都有更小的字体:

body (font-size: 0.8em;)

在CSS中,这是不合适的,但这种行为确实存在,所以创作人—直以来都求助于以下技巧:

body, table, th, td {font-size: 0.8em;}

如果浏览器本身在继承方面存在bug,在这样的浏览器中,利用上述技巧比较有可能得到所要的结果,不过仍然不能保证。

遗憾地是,在能正确实现继承的浏览器中,以上“修正方法”会导致更严重的问题,如IE6/Win、IE5/Mac, Netscape 6+等浏览器。在这些浏览器中,最终文本会放在一个表单元格中,其字体大小是用户默认字体大小设置的41%。应当针对更新的浏览器编写正确的CSS,相比之下,试图在老浏览器中解决继承bug的做法通常比较危险。

因为通配选择器适用于所有元素,而且有0特殊性,其颜色声明指定的值gray要优先于继承值(black),因为继承值根本没有特殊性。因此,em元素会显示为灰色而不是黑色。

这个例子生动地说明了不加区别地使用通配选择器可能存在的问题之一。由于它能匹配任何元素,所以通配选择器往往有一种短路继承的效果。这个问题可以解决,不过通常更合理的做法是从一开始就避免不加区别地使用通配选择器,从而从根本上避免这个问题。

继承值完全没有特殊性,这一点很关键,绝不能等闲视之。例如,假设一个样式表编写如下,使“工具条”中的所有文本都是黑底白字:

#toolbar {color: white; background: black;}

只要id为toolbar的元素只包含纯文本而不包含其他内容,这就能正常起作用。不过,如果这个元素中的文本都是超链接(a元素),用户代理的超链接样式就会占上风。在一个Web浏览器中,这意味着它们的颜色很可能是蓝色,因为浏览器的样式表可能包含以下规则:

a:link {color: blue;}

为克服这个问题,必须如下声明:

#toolbar {color: white; background: black;}

#toolbar a:link {color: white;}

通过向工具条中的a元素直接指定规则。