2.2 使用层叠

CSS（层叠样式表）——层叠，多好的词！很多人一直都在考虑“层叠”。到现在为止，我们尚未涉及层叠，以至于都因为直接将样式表看成CSS而感到不安。许多人都忽略这个缩写的第一部分，这是不对的。因为层叠对CSS开发人员来说是最有用的方面。

你一定还记得，类所定义的样式可以重写基本CSS规则的样式。当有多个样式表时，有一个层次来定义将这些样式表应用到(X)HTML的顺序。同时，针对不同的应用方法，同样存在一个顺序。这个顺序就是“层叠”。

如果仅仅通过一个外部样式表来应用CSS，那么就无所谓层叠了。因为在样式表之前和之后都没有任何东西。但是，当结合多个样式表或者多种应用方法时，事情就变得非常有趣了。让我们先看一下下面三个例子。

2.2.1 利用不同的应用方法实现层叠

第1章已经学习了应用CSS的不同方法——内联、内嵌、外部和导入，结合这些方法可以对层叠产生影响。

假定，已经将所有的CSS规则都保存在一个外部样式表中，该样式规定了整个大型站点的表现样式。但是由于某种原因，需要为某个页面改写某些外部样式，这个时候就需要层叠。对于这个页面，可以采取在页面的<head>中使用内嵌式CSS的方法，以重新定义相应的规则。当页面加载时，浏览器在查找并应用外部CSS规则之前，将应用第一个碰到的CSS——内嵌式CSS，并忽略任何外部样式表中相同的选择器。

需要更进一步的控制吗？不成问题！在这个层次中，最高层的是内联样式——直接加到(X)HTML元素中的CSS。不管应用什么样式，内联样式都将改写在页面的<head>部分或外部样式表中声明的任何样式。

例子

为了理解这些操作，可以看下面的简单例子。

（1）打开external.css，输入p{color:#F00;}来定义默认的段落颜色（同第1章），并保存文件。

（2）在浏览器中查看external.html。如果仍然通过external.css应用CSS，所有默认的段落都是红色。

（3）打开external.html并在模板的头部使用内嵌式样式<style type="text/css"> p{color: #333;} </style>，保存该文件。

（4）重新在浏览器中加载external.html。由于内嵌式CSS改写了链接的样式表，所以现在所有默认的段落都变成了深灰色。

（5）最后，在external.html中寻找一个默认段落，并且为其定义内联样式，如<p style= "color:#CCC">，并保存该文件。

（6）重新加载external.html，现在，由于内联CSS改写了内嵌CSS和链接的样式表的属性，应用了内联样式的段落将变成浅灰色。任何其他的段落将基于内嵌样式保持深灰色。

这样，层次就形成了。浏览器首先执行内联规则，然后执行所有在<head>中的其他的内嵌规则，最后再查找外部文件来完全理解你所创建的CSS。

2.2.2 通过多个外部样式表层叠

另外一种层叠的方法是使用多个外部样式表。该方法和前面已经了解到的为不同平台（如打印机、移动设备）连接不同的外部样式表类似。但是，在此所有的外部文件都是针对屏幕的。

假定这3个样式表都定义了#header规则，并且在各个样式表中，#header的声明都拥有相同的属性（如height、width和color），但是它们的属性值有所不同。

在这个例子中，浏览器认为最后一个链接样式表（three.css）最为重要，并且优先执行它所包含的所有规则。任何在three.css中没有定义的规则则按照第二个样式表（two.css）执行。在two.css中重复定义的选择器将被忽略。最后，如果one.css中定义的样式没有在前述样式表中定义，则浏览器将应用one.css中的这些样式。

因此，在three.css中声明的#header规则将被应用，而忽略其他的实例。你必须时刻牢记，越晚给定的规则越重要。

2.2.3 通过导入样式表实施层叠

层次性也体现在导入样式表上。和前面的例子一样，它与样式表给定的顺序相关。在第1章中，我们学习了模块化CSS。该方法将一个站点的CSS组成相关联的样式表，例如默认样式、布局样式、导航样式等。在此，我们采用一个类似的例子，该例子通过一个主外部样式文件external.css导入四个模块。external.css包含如下代码：

正如它们的顺序一样，forms.css在层次上是最高，而default.css显然是最低的。假定在navigation.css（第二个层次）中有一个highlight类，用来将文本变成红色，而且highlight也出现在default.css中，但是它使文本变成橙色。由于navigation.css在层次上所处的位置而拥有更高的权值，所以文本将是红色的。

尽管如此，forms.css并不一定就是位于层次的最顶层。要记住这些样式表都是通过一个主外部样式表导入的。在第1章中，你已经使用external.css来调用两个模块化样式表。在此，仍然使用external.css来导入模块化样式表。如果在external.css中定义了highlight，声明的颜色将改写导入样式表中的红色或橙色。

更进一步，external.css中的规则仍然会被在(X)HTML模板中使用的内联或者内嵌CSS中定义的规则覆盖。这主要取决于你什么时候停止层叠。所以必须特别小心，不要被层叠搞糊涂了。

注意如果一个样式表通过另外一个模块化样式表使用@import导入，那么在层次上，它将自动处于较低层。简单地说，一个样式表总是比调用它的样式表级别更低。

2.2.4 层次的最底层

处于层叠层次最底层的样式表是浏览器自己的默认样式表。一般说来，浏览器默认样式表对标题、段落、列表以及一些常用的(X)HTML元素都做了规定。例如，浏览器样式使得链接是蓝色的，而访问过的链接则是紫色的。在浏览器中查看任何没有通过CSS加样式的页面，都可以看到默认的浏览器样式。

一旦定义了所有需要控制的元素，默认的浏览器CSS将被覆盖。记住，默认的样式是考虑了多种原因设计的，尤其是易读性、可访问性和共识等。是不是将这些广泛接收的惯例集成到你的设计中就随你便了，但是你应该努力改善这些样式，而不是全然不管。

2.2.5 小心使用层叠

跨多个样式表跟踪层叠通常是一件非常困难的事情。如果两个选择器有匹配的属性，但是有不同值，譬如，每个选择器实例都有font-family、color和background属性，而每个属性都有不同的值，那么拥有最高层叠层次的样式表中的选择器将被使用。但是，如果所有定义选择器拥有特有属性，事情将变得非常有趣了。我们可以通过一个例子来进行说明。假定，在模块化样式表如forms.css中定义highlight类如下：

只要在任意更高层的样式表中没有定义这个选择器，那么highlight将真正起作用，将文本变成红色斜体，并带下划线。但是，如果数周后，在更高层的样式表external.css中你已经忘记了原来类的定义并决定重新定义highlight如下：

首先，层叠使得external.css中highlight的font-style值（font-style:normal;）比在forms.css中font-style值（font-style:italic;）具有更高的优先级。因此，整个网站内的highlight的所有实例都是正常的红色文本，不带斜体。但是，你并没有意识到，你已经将所有的斜体表单文本转换成为讨厌的正常文本了，而很可能直到通过浏览器重新访问表单时你才会注意到这一点。

我们可以更进一步解释这个陷阱。由于在external.css中重新定义的highlight类中没为text-decoration定义相应的值，因此，你希望得到的正常的红色文本将根据forms.css被加上下划线。诚然，新的highlight类在层次上具有较高的优先级。但是，如果没有在external.css中去除下划线的话，层叠将仍然会调用这个样式表，并使用所有没有重新定义的规则。

【查看所有评论(0)条】