Web编程入门经典 第8章 更多层叠样式表

则也利用list-style特性指定了使用的项目符号的样式。

ul {

clear:left;

list-style:circle; padding-left:145px;}

(10)保存该样式表，并在浏览器中加载使用该样式表的samplePage.html文件。 工作原理

本章前面已经提到，需要重点注意的是，并不是这个示例中的所有规则都能工作于所有浏览器。但是，在Firefox浏览器或IE7浏览器中可以很好地展示这个示例，因此下面的讨论集中于在图8-34中显示的结果。

从固定的题头开始，元素被排除在普通流之外，并且固定在浏览器窗口的顶部（注意，题头上方的空白实际上不会显示）。绝对定位元素总是位于顶部，因此如果页面上的其他内容（即导航和段落）不使用内边距来防止它们重叠，题头就会覆盖这些元素。

导航栏不仅使用padding-top特性使其位于题头的下方，而且使用了z-index特性。z-index特性确保如果导航和标题重叠，则标题将出现在上方。这里不能依赖CSS的像素精确定位，并且如果导航栏出现在上方，则看上去有些奇怪。

题头、段落和组成文章主体的无序列表都必须具有内边距，以便它们离浏览器左边有一段距离，否则它们将与导航重叠（导航已经被排除在普通流之外，因为它采用的是绝对定位）。因此，这些段落和其他位于普通流中的元素必须远离绝对定位元素。

第一个段落内的图像在块级段落容器中浮动，并且具有值为5像素的padding-right特性，以便文本不与它的右边缘接触。

最后，比起段落或者题头，无序列表必须更加远离左边的页边空白一段距离，因为它的文本开始位置的左边具有项目符号。如果无序列表的padding- left特性值与题头或者段落的相同特性值一样是115，则列表的文本将从左边115像素处开始，但是标记符（项目符号）将距离左边更近。因此，将这个特性设置为145，以便列表比文本具有进一步的缩进。

8.11 本章小结

本章介绍了可用于控制列表、链接、表、外边框和背景的一些CSS特性，然后介绍了如何利用CSS从样式表向文档添加内容。:before伪类和:after伪类可用于在选择器指定的元素之前或者之后添加内容，添加的内容包括文本、图像或者文件中的内容。甚至可以利用counter()函数自动编号或计数任何元素，并且可以管理复杂的引号集（但是，并不是所有的浏览器都支持这些功能）。

还介绍了如何使用@import规则将其他样式表中的规则包含到当前样式表中，创建模块化的样式表，以及重用来自于站点的不同部分的规则。另外，@charset规则指示样式表使

用的字符集。

最后，介绍了CSS的3种主要定位方案：普通流（和它的衍生物相对定位）、绝对定位（和它的衍生物固定定位）、浮动定位。这些是控制文档内容显示位置的强大工具；它们完成了将样式独立于内容的功能，因为不需要使用表来控制文档的布局（下一章中将详细介绍布局方面的内容）。

如本章中的示例（特别是本章最后的较长示例）所示，即使是在最新的浏览器中，对CSS的支持仍然是不完全的。考虑到CSS2规范于1998年完成，而浏览器制造商仍然没有竭力尝试很好地实现它，这不得不说是一种悲哀。

需要注意的是，虽然可以创建利用CSS布局的页面，但是较老的浏览器并不都支持这些布局。因此，某些设计人员结合使用较老的页面布局技术和用于赋予一些样式的CSS。

8.12 练习

所有练习的答案都在附录A中给出。

1．在这个练习中，需要创建内容的链接表，它位于一个长文档的上方，以有序列表的方式出现并链接到文档主要部分中的题头。

本书的下载代码中提供了XHTML文件exerclsel.html，请为该文件创建样式表。该样式表应该执行以下操作：

? 设置所有链接的样式，包括激活的和访问过的链接 ? 列表的内容设置为粗体

? 列表的背景设置为亮灰色，并使用内边距确保项目编号能够显示 ? 链接框的宽度设置为250像素宽 ? 将题头项目符号的样式改为空心圆 ? 将链接项目符号的样式改为正方形 创建的页面应当如图8-36所示。

图8-36

2．在这个练习中，测试您的CSS定位技能。您需要创建一个页面，该页面以不同的方式表示指向本章不同小节处的链接。每一小节将在不同的块中显示，每一个块将被绝对定位在一个从左上到右下方向的对角线上。中间的框必须出现在最上方，如图8-37所示。

图8-37

可以在本章的下载代码中找到XHTML源文件exercise2.html。