使用CSS格式化网页

　　使用CSS格式化网页

　　在前一章，读者学习了如何使用表格将信息排列为行和列。表格作为网页布局工具曾被大量用于Web，但随着样式表的出现，表格的这种用途已被摒弃。表格仍很有用，但主要用于其原始目的，也就是将信息排列为行和列。除取代表格作为网页布局机制外，样式表也是指定字体、控制边距、指定边框和调整网页外观的首选方法。

　　样式表背后的概念很简单：创建一个独立的样式表文档，以指定字体、颜色、背景和其他确定网站外观的特征。然后链接需要使用该样式表的所有网页，而不是在每个文档中都重复指定这些样式。决定修改字体或颜色主题时，只要修改一两个样式表，就可以一次性修改所有网页。因此，样式表是一组格式化指令，能够同时控制众多HTML页面的外观。

　　样式表的作用不仅是将网页内容同格式分离。CSS样式表能够设置许多以前没有大量工作不可能实现的格式化特征，这包括精确的字体控制、字间距和行间距、页面边距和边框以及对非欧洲语言和字符的扩展支持。样式表还能够以人们熟悉的英寸、毫米、点和picas等来指定大小和其他度量值。你还可以使用样式表正确地控制图像和文本在网页上的位置。

　　总之，样式表将面向纸张的复杂的出版机制引入了Web。样式表确实实现了这一点。

　　注意：如果有3个或更多的网页使用类似的格式和字体，可能想在阅读本章时为它们创建一个样式表。即使不想创建完整的样式表，将样式直接应用于网页中的HTML元素也很有帮助。

　　12.1 理解CSS

　　样式表背后的技术称为CSS，即级联样式表(Cascading Style Sheets)。CSS是一种定义样式(如字体、颜色和位置)的语言，用于描述如何格式化和显示网页中的信息。CSS样式可直接存储在HTML网页中，也可存储为独立的样式表文件。不管以哪种方式保存，样式表都包含将样式应用于特定元素类型的样式规则。在外部使用时，样式表规则放在外部样式表文档中，文件扩展名为.css。

　　121 理解CSS

　　样式规则是可应用于网页中元素，如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式表直接放在网页中，外部样式表保存在独立的文档中，网页通过一个特殊标签链接外部样式表——稍后将介绍这个标签。

　　名称CSS中的“级联(cascading)”表示样式表规则应用于HTML文档元素的方式。具体地说，CSS样式表中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定，从而实现级联效果。如果上述解释还不是很清楚，可将 CSS的级联机制看成一种类似继承的关系，在这种继承关系中，父亲的特征传递给子女，但子女有更特殊的特征;基样式规则适用于整个样式表，但可被更具体的样式规则覆盖。

　　用一个简单例子可能更能够解释清楚。看下面的代码，你是否能够说出文本的颜色

　　<div style="color:green">
　　This text is green.
　　<p style="color:blue">
　　This text is blue.
　　</p>
　　<p>
　　This text is still green.
　　</p>
　　</div>

　　在这个例子中，颜色green通过样式属性color应用于<div>标签。因此

　　标签中的文本是绿色的。由于<p>标签是<div>标签的子标签，因此绿色的文本样式传递给<p>中的文本。然而，第一个<p>标签覆盖了color样式，将它改为蓝色。最后的结果是，第一段文本是蓝色的，第二段文本仍为传递而来的绿色。

　　注意：你可能注意到了，我在本章和下面几章中大量使用了术语“元素”。元素就是网页中的信息(内容)，如图像、段落或链接。标签用于对元素进行编码，可以将元素看成标签及其内部的描述信息(属性、文本、图像等)。

　　与许多Web技术一样，CSS已经发展很多年了。CSS最初的版本称为Cascading Style Sheets Level 1(CSS1)，创建于1996年。后来的CSS2标准创建于1998年，虽然这似乎是很久以前了，但直到最近CSS2仍得到所有网页浏览器的支持。由于 CSS的强大功能，浏览器的支持始终是一个问题。幸运的是，浏览器最后支持了大部分功能，现在你可以安全地使用CSS2样式表，不用担心太多事情。因此，当我在本书中谈到CSS时，指的是CSS2。

　　警告：即使在最新的网页浏览器中，仍有一些CSS2特性没有得到正确支持。我将在本书接下来的几章中指出这些特性及相关的解决方法。

　　在http://www.w3.org/Style/CSS/上可以找到关于样式表语言CSS1和CSS2的完整参考，还可以找到各个CSS版本都包含哪些样式。本章接下来将解释如何以与最新的网页浏览器兼容的方式使用这些参考文档中的信息。