第8章 更多层叠样式表
本章将介绍更多关于CSS方面的知识，首先介绍CSS规范的前几章未涉及其他的许多特性，使用这些特性可控制链接、背景、列表样式、表样式和框周围的外边框（与边框不同的最后一种特性）的表示。然后介绍:before伪类和:after伪类，使用它们可以在即将赋予样式的源文档中的指定元素之前或之后添加内容，并且这些内容不属于源文档。最后，本章将介绍如何使用CSS定位页面中的框——从而介绍如何使用它们布局页面，而不是使用表进行布局。
阅读完本章之后，您将了解如何使用CSS来控制如下的方面： ? 链接的表示 ? 文档的背景
? 项目列表和编号列表的样式 ? 表的外观 ? 框周围的外边框
? 能够获得焦点或者激活的框
? 在XHTML文档中的某个元素之前或之后添加内容
? 3种定位方案，可用于确定框将出现在页面上的哪个位置——这是为利用CSS创建布局所做的准备
注意：
本章中介绍的某些功能并未被浏览器广泛支持。但其依然值得学习，以便您了解CSS的发展方向。
8.1 链接
前面已经介绍过，color特性可改变任何元素中的文本的颜色，Web设计人员通常在应用于元素的规则中使用这个特性来改变链接的颜色。但是如果这样做的话，链接将总是保持一种颜色——即使已经访问使用鼠标指针悬停或者单击。
稍微改变己访问的链接颜色的能力将有助于用户浏览站点，当用户将鼠标指针悬停在链接上时改变链接的颜色，有助于鼓励用户单击该链接。因此，当创建一个能够改变链接颜色的规则时，表8-1中列举的伪类能够帮助将不同的样式关联到处于不同状态的链接。
表8-1
伪 类
link
用于一般状态的链接的样式
目 的
visited active hover
用于已经访问的链接的样式
用于当前激活（单击）的链接的样式 当鼠标指针悬停在链接上时的链接样式
当使用这些伪类时，很可能需要同时使用下面的特性：
? color：通常用于改变链接的颜色。本量章前面已经提到，如果能够稍微区分已经访问的链接和未访问的链接，将会非常有帮助，因为这样有助于用户了解自己已经访问过哪些页面。此外，当用户将鼠标指针悬停在链接上时，稍微改变链接的颜色有助于鼓励用户单击该链接。
? text-decoration：通常用于控制链接是否具有下划线。在Web中，链接的下方通常，具有下划线，但从20世纪90年代末开始更趋向于不在链接下方使用下划线。使用text。decoration特性，可以指定链接下没有下划线，或者仅当用户将鼠标指针悬停在链接上或选中它时才将其设置为具有下划线。
? backgfound-color：高亮显示链接，如同使用目荧光记号笔绘制。该属性主要用于用。户将鼠标指针悬停在链接上时提供轻微的颜色改变。
在下面的示例中，当用户与链接交互时，将改变链接的样式(ch08_eg0l.css)： body {background-color:#ffffff;}
a {
font-family: arial, verdana, sans-serif; font-size:12px; font-weight:bold;} a:link {
color:#0000ff;
text-decoration:none;} a:visited {
color:#333399;
text-decoration:none;} a:active {
color:#0033ff;
text-decoration:underline;} a:link:hover {
background-color:#e9e9e9; text-decoration:underline;}
图8-1中给出了这个样式表在浏览器中的外观（该样式表用于ch08_eg0l.html），但是在这个打印图中很难看到完全的效果，即无法看到用户鼠标指针悬停在链接上和访问过站点之后链接改变颜色。因此，请读者利用本章的下载代码测试这个示例。
图8-1
还有两个伪类:focus和:active，它们分别用于当元素获得焦点或者激活时改变元素的样式。本章后面将介绍这两个伪类。
8.2 背景
表8-2中列举了CSS中的6个特性，它们可用于指定整个浏览器窗口或者单个框中的背景的显示效果。
表8-2
特 性
background-color background-image background-repeat background-attachment background-position background
目 的
指定一种颜色作为页面或者框的背景色 将一幅图像设置为页面或者框的背景
指示背景图像是否应该在页面或者框中重复显示
指示背景图像应该固定在页面的某个位置．，并且指示当用户向下滚动页面时图像是否应当停留在该位置
指示图像应当定位在浏览器窗口或者包含它的框中的特定位置处 一种简写形式，可用于指定上面所有的特性
需要注意的是，在较老的浏览器版本中，简写形式background特性比其他单独的特性获得了更好的支持，但是在使用简写形式的background特性之前，需要了解这些特性能够采用的值。
8.2.1 background-color特性
background-color特性可为页面或CSS创建的框内部指定一种单色背景。
这个特性的值可以是十六进制编码、颜色名或者RGB值（附录D中更深入地介绍了颜色方面的内容），例如(ch08_eg02.css)：
body {background-color:#cccccc; color:#000000}
b {background-color:#FF0000; color:#FFFFFF;} p {background-color: rgb(255,255,255);}
当为
元素设置background-color特性时，该特性将影响整个文档；当该特性用于其他任何元素时，它将在为该元素创建的框的边框内使用指定的颜色。图8-2显示了前面的样式用于ch08_eg02.html时的效果。
图8-2
注意：
编者本人几乎在编写的所有样式表中都为
元素添加一条规则，用于设置background-color特性，原因很简单：某些人可能为他们的计算机设置一种非纯白色的背景（通常是因为这样可以减轻眼睛的疲劳）。当操作系统的背景色改变后，Web浏览器中的背景色通常为该背景色（类似Word字处理软件这样的应用程序也是如此）。如果不指定这个特性，则无法保证站点访问者具有与您相同的背景色。8.2.2 background-image特性
background-image特性可用于在CSS中将一幅图像设置为任何框的背景，并且它的效果非常强大。该特性能够附带的值如下：起始字母为url，然后在小括号和双引号内包括图像的URL:
body { background-image: url(\
background-image特性重写background-color特性。但是，最好在使用背景图像时同时提供background-color特性，并且将其值设置为与图像主要颜色类似的颜色，因为当正在加载页面或者因为各种原因无法加载图像时，页面可以使用这种颜色。
下面的示例使用了一幅200像素宽、150像素高的单一背景图像。默认情况下，这幅图像多次重复，以布满页面(ch08_eg03.css)。background-color特性被设置为与背景图像相同的颜色（以防止图像无法加载）：
body {
background-image: url(\ background-color:#cccccc; }
图8-3给出了这个示例在浏览器中的外观(ch08_eg03.html)。
图8-3
这不是一个关于背景图像的优秀示例，但是它演示了背景图像的工作原理。该示例中存在的问题是，背景图像中使用的颜色和它上方显示的文本之间的颜色对比度太低，以至于难以阅读文本。
必须确保背景图像和它上方显示的文本之间具有足够的对比度；否则用户阅读文本时将存在困难。此外，低对比度的图像（由相似颜色组成的图像）通常是较好的背景图像，因为寻找一种在高对比度图像之上具有很好可读性的颜色较为困难。
图8-4给出了该背景图像的改进示例，其中的文本位于单色上方，这使得文本能够更容易阅读。这一次还使用了一幅更大的图像(ch08_eg03b.html)。
图8-4
您可能已经注意到，没有方法可用于表达背景图像的预期宽度和高度，并且background-image特性不具有alt属性（由于各种原因无法看到图像时显示的备选文本）；因此，背景图像不能用于传送任何重要信息，因为对于看不到背景图像的访问者来说，图像上的信息是不可访问的。
在使用大图像文件作为背景图像时需要非常谨慎，因为加载大文件的速度可能非常慢。图像的文件越大（即字节数越大），则加载和显示它的时间越长。
background-image特性可以很好地作用于大多数块级元素，但是某些较老的浏览器在