则也利用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。
相关推荐：
loading