搜索
第8章更多层叠样式表本章将介绍更多关于CSS方面的知识，首先介绍CSS规范的前几章未涉及其他的许多特性，使用这些特性可控制链接、背景、列表样式、表样式和框周围的外边框（与边框不同的最后一种特性）的表示。然后介绍:before伪类和:after伪类，使用它们可以在即将赋予样式的源文档中的指定元素之前或之后添加内容，并且这些内容不属于源文档。最后，本章将介绍如何使用CSS定位页面中的框——从而介绍如何使用它们布局页面，而不是使用表进行布局。阅读完本章之后，您将了解如何使用CSS来控制如下的方面：链接的表示文档的背景项目列表和编号列表的样式表的外观框周围的外边框能够获得焦点或者激活的框在XHTML文档中的某个元素之前或之后添加内容3种定位方案，可用于确定框将出现在页面上的哪个位置——这是为利用CSS创建布局所做的准备注意：本章中介绍的某些功能并未被浏览器广泛支持。但其依然值得学习，以便您了解CSS的发展方向。8.1链接前面已经介绍过，color特性可改变任何元素中的文本的颜色，Web设计人员通常在应用于a元素的规则中使用这个特性来改变链接的颜色。但是如果这样做的话，链接将总是保持一种颜色——即使已经访问使用鼠标指针悬停或者单击。稍微改变己访问的链接颜色的能力将有助于用户浏览站点，当用户将鼠标指针悬停在链接上时改变链接的颜色，有助于鼓励用户单击该链接。因此，当创建一个能够改变链接颜色的规则时，表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.1background-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);}当为body元素设置background-color特性时，该特性将影响整个文档；当该特性用于其他任何元素时，它将在为该元素创建的框的边框内使用指定的颜色。图8-2显示了前面的样式用于ch08_eg02.html时的效果。图8-2注意：编者本人几乎在编写的所有样式表中都为body元素添加一条规则，用于设置background-color特性，原因很简单：某些人可能为他们的计算机设置一种非纯白色的背景（通常是因为这样可以减轻眼睛的疲劳）。当操作系统的背景色改变后，Web浏览器中的背景色通常为该背景色（类似Word字处理软件这样的应用程序也是如此）。如果不指定这个特性，则无法保证站点访问者具有与您相同的背景色。8.2.2background-image特性background-image特性可用于在CSS中将一幅图像设置为任何框的背景，并且它的效果非常强大。该特性能够附带的值如下：起始字母为url，然后在小括号和双引号内包括图像的URL:body{background-image:url(images/background.gif);}background-image特性重写background-color特性。但是，最好在使用背景图像时同时提供background-color特性，并且将其值设置为与图像主要颜色类似的颜色，因为当正在加载页面或者因为各种原因无法加载图像时，页面可以使用这种颜色。下面的示例使用了一幅200像素宽、150像素高的单一背景图像。默认情况下，这幅图像多次重复，以布满页面(ch08_eg03.css)。background-color特性被设置为与背景图像相同的颜色（以防止图像无法加载）：body{background-image:url(images/background.gif);background-color:#cccccc;}图8-3给出了这个示例在浏览器中的外观(ch08_eg03.html)。图8-3这不是一个关于背景图像的优秀示例，但是它演示了背景图像的工作原理。该示例中存在的问题是，背景图像中使用的颜色和它上方显示的文本之间的颜色对比度太低，以至于难以阅读文本。必须确保背景图像和它上方显示的文本之间具有足够的对比度；否则用户阅读文本时将存在困难。此外，低对比度的图像（由相似颜色组成的图像）通常是较好的背景图像，因为寻找一种在高对比度图像之上具有很好可读性的颜色较为困难。图8-4给出了该背景图像的改进示例，其中的文本位于单色上方，这使得文本能够更容易阅读。这一次还使用了一幅更大的图像(ch08_eg03b.html)。图8-4您可能已经注意到，没有方法可用于表达背景图像的预期宽度和高度，并且background-image特性不具有alt属性（由于各种原因无法看到图像时显示的备选文本）；因此，背景图像不能用于传送任何重要信息，因为对于看不到背景图像的访问者来说，图像上的信息是不可访问的。在使用大图像文件作为背景图像时需要非常谨慎，因为加载大文件的速度可能非常慢。图像的文件越大（即字节数越大），则加载和显示它的时间越长。background-image特性可以很好地作用于大多数块级元素，但是某些较老的浏览器在显示表中的背景图像时会存在问题。8.2.3background-repeat特性默认情况下，background-image特性会多次重复以布满整个页面，创建一种称为墙纸的效果。墙纸由一幅多次重复的图像组成，：并且看不到它的边缘（如果图像经过良好设计）。因此，重要的是任何模式都应当是可镶嵌的或者能够很好地结合在一起。墙纸通常由一些纹理组成，例如纸张、大理石花纹或者抽象的表面，而不是照片或稽徽标。如果不希望图像在页面背景中多次重复，可以使用background-repeat特性，该特性有4个可选用的值，如表8-3所示。表8-3值目的repeat图像多次重复以覆盖整个页面。repeat-x图像将在页面水平方向多次重复（但在垂直方向不重复）repeat-y图像将在页面垂直方向多次重复（但在水平方向不重复）no-repeat图像将仅显示一次具有不同值的特性能够带来各种令人感兴趣的效果，因此值得依次查看。前面已经给出repeat值的效果，下面查看repeat-x值的效果，该值沿着浏览器的x轴创建一条水平栏(ch08_eg04.css):body{background-image:url(images/background_small.gif);background-repeat:repeat-x;background-color:#ffffff;}在图8-5中可以看到使用这个特性后的效果。图8-5repeat-y值的工作原理与repeat-x值相同，但作用方向不同：它沿着浏览器y轴方向创建垂直栏(ch08_eg05.css)：body{background-image:url(images/background_small.gif);background-repeat:repeat-y;background-color:#ffffff;}在图8-6中可以看到结果，该结果由左边向下的边栏组成。图8-6最后一个值是no-repeat，默认情况下它仅在浏览器窗口的左上角显示图像的一个实例(ch08_eg06.css):body{background-image:url(images/background_small.gif);background-repeat:no-repeat;background-color:#eaeaea;}图8-7中给出了结果；注意，页面的背景色被设置为与图像中所使用的颜色相同。图8-78.2.4background-position特性（用于固定背景的位置）当background-color特性的值与图像的背景色相同时，无法看到图像的边缘，如图8-7所示。但是，您可能希望修改这幅图像的位置，此时可以使用background-position特性，该特性可采用表8-4中所示的值。表8-4值意义x%y%沿着X轴（水平）和y轴（垂直）的百分比xy沿着X轴（水平）和y轴（垂直）的绝对长度left在页面或者包含元素的左边显示center在页面或者包含元素的中间显示right在页面或者包含元素的右边显示top在页面或者包含元素的顶部显示bottom在页面或者包含元素的底部显示下面的示例固定图像的位置，如图8-8所示(ch08_eg07.css):body{background-image:url(i