学习使用样式设计网页
书名： Eric Meyer on CSS：精通网页设计语言
作者： Eric Meyer
出版社： New Riders
ISBN： 0-7357-1245-X
价格： 45.00 美元，69.99 加元
您是否曾看过设计精良的网页的源代码，并惊讶地发现只有最少的 HTML 标签和对样式表的引用？这就是层叠样式表 (CSS) 的美妙之处——简单、易于维护的 HTML 代码。CSS 可以做很多事情。许多网页设计师都使用过 CSS，但大多数人并没有充分利用它所能提供的全部功能。如果您不熟悉 CSS，它就是网页设计的一个方面，用于改善网页的外观并为多个网页的外观建立索引。它基于一个文档运行，该文档列出文本和其他布局属性。随着 Web 设计领域正在发生的变化，如果您设计网页，那么了解如何有效地使用 CSS 将是必要的。如果您不相信，请考虑一下 <font> 和一些其他格式标签正在被淘汰的事实。“在游戏的这一点上，不使用 CSS 进行设计就像不使用 HTML 编写网页一样没有意义”，Netscape 的标准布道者 Eric Meyer 说。如果没有 CSS，您将无法更改 HTML 文档中文本的外观。
已经编写了几本好的参考书，可以帮助您学习如何使用 CSS 设计网页。但是，能够查找 CSS 属性并知道如何应用它们来制作美观的网页是完全不同的事情。困难在于 CSS 在某种意义上是网页设计的一种艺术工具。因此，掌握使用 CSS 的技能需要实验，并且为了使过程更容易，需要已经擅长使用 CSS 的人的指导。为此，Eric Meyer，他也是 Web 联盟 (www.w3.org) CSS 工作组的特邀专家，撰写了一本新书，他在书中演示了如何使用 CSS 设计网页。这本书名为 Eric Meyer on CSS：精通网页设计语言。在评论 Meyer 的新书之前，对于那些不熟悉 CSS 的人，让我稍微解释一下它并举几个例子。如果您已经了解 CSS 的基础知识，请跳过接下来的部分。
CSS 简介
样式表是 Web 浏览器的指令或规则列表，因此它知道如何显示特定的网页。如果没有样式表，浏览器将使用其默认设置来设置文本和页面布局。样式表可以位于网页内，也可以包含在单独的文档中并从网页链接到它。如果样式表位于网页内，则样式规则放置在开头和结尾样式标签 (<style></style>) 之间。样式和样式标签必须放置在开头和结尾标题标签 (<head></head>) 内。但是，它们不能放置在可能位于标题内的任何其他标签内（例如，<title></title>）。
在样式标签内，可以放置将在整个网页中使用的样式指令。例如，如果您希望所有粗体文本除了粗体之外还显示为红色，如果没有样式表，您将必须浏览 HTML 文档并查找每个 <b> 实例，并在其后添加一个字体标签，例如 <font color=“red”> 和一个结束字体标签 (</font>) 在结束粗体标签 (</b>) 之前。与其做所有这些，不如简单地将以下样式表添加到网页的顶部
<style>
b{color: red;}</style>
为了样式的一致性并节省将样式表键入到每个网页的时间，您可以设置一个单独的样式表文档并将所有网页链接到它。外部样式表的链接如下所示
<link rel="stylesheet" type="text/css" href="main.css">
在此链接中，样式表文档的名称为 main.css，它与链接到它的网页位于同一目录中。如果样式表不在同一目录中，则可以将目录路径添加到 href 值。顺便说一句，习惯上将样式表文件的扩展名命名为“css”。
使用外部样式表，如果您想修改链接到样式表的所有网页上的主标题的颜色和一些其他字体属性，您可以简单地将此规则添加到您的样式表中
h1 {
text-size: 200%;
text-align: center;
color: navy;
}
在此示例中，链接到此样式表的所有网页中包含在 <h1> 标题标签中的所有文本都将以正常文本的两倍大小显示，居中并为海军蓝色。如您所见，一旦正确设置了样式表文档，只需更改样式表即可轻松更改所有关联的网页。如果您的站点有数百个网页，则需要相当长的时间才能实施任何格式更改。但是，使用 CSS 只需几秒钟即可进行更改。
可以使用 CSS 设置的样式属性列表很长。如果您想了解有关 CSS 基础知识的更多信息，可以访问 Web 联盟站点的 CSS 部分。关于 CSS 的一本好的参考书是 Meyer 的另一本书 层叠样式表：权威指南。它已成为 CSS 设计师的主要参考书，但我建议您也考虑购买 Meyer 的新书（如下评论）。
这本书 Eric Meyer on CSS 是一本尺寸适中、光面纸的书，约 325 页。插图是全彩的且数量众多。此外，本书还有一个配套网站 (www.ericmeyeroncss.com)，可以在其中下载本书中介绍的 HTML 和 CSS 代码。
Meyer 使用类似于电视节目的 CSS 网页设计方法演示格式，其中艺术家绘制风景油画，并向观众解释他在绘画过程中的操作。艺术家解释了他混合的颜色以及他的阴影方法等等。Meyer 的书就像这样，它也像那些木工或木工节目之一，主持人解释了施工过程的每个步骤。只是在这种情况下，Meyer 解释了 CSS 的使用；他是 CSS 的艺术家和木匠大师。Meyer 说：“目标是向读者展示如何在实际项目中使用 CSS——他们自己可能想要或必须做的事情。” 在他在 Netscape 的工作中，Meyer 协助主要网站的网页设计师使用 CSS。本书是普通网页设计师接触他的才华的途径，因此阅读和学习本书是一种真正的享受。
Meyer 新书的每一章都介绍了一个不同的网页设计项目。每个项目都首先定义其目标，并向读者展示他正在努力完成的已完成项目的屏幕截图。Meyer 说：“在 13 个项目中，每个项目我都从一个未样式化的文件开始，并一点一点地添加 CSS，直到完成一个完整的项目。” 对于每个项目，都提供了几乎对网页所做的每个更改步骤的屏幕截图。当每个项目进行时，都会显示相关的 HTML 代码和样式规则，并且对样式的更改以红色显示。在每个项目结束时或某些项目的主要阶段结束时，都会提供完整的 CSS 样式表。看到项目如何展开非常令人着迷。
例如，第一章或项目涉及一个使用普通方法创建的网页，没有合并样式表。Meyer 从一个干净且典型设计的网页开始，该网页包含多个表格、表格内的表格、字体标签和其他冗余格式标签。然后，他剥离了页面上的所有这些标签，因此他只剩下一个非常简单的页面，主要由内容和少量 HTML 组成。接下来，他系统地添加样式表规则，以使页面恢复到其原始外观，但没有所有 HTML 开销。结果是一个更小的文档和一个可以重用的样式表，以确保整个站点设计的一致性——并且更易于管理。
书中还包含其他几个引人入胜且鼓舞人心的项目。“每个项目的目的都是向读者展示各个部分如何组合在一起。了解各种 CSS 属性的作用是一回事，但了解如何以有趣的方式将它们组合在一起则完全是另一回事”，Meyer 说。在一个项目中，Meyer 采用了一个事件日历并对其进行了很好的格式化，以突出显示特殊事件（见上图）。另一个项目涉及样式化侧边栏菜单（见下图）。另一个项目在没有表格的帮助下构建了一个多列网页——非常巧妙。他使用 <div> 标签和样式表来实现这一点。并且，在另一个项目中，Meyer 展示了为打印网页与在屏幕上查看网页制作单独的样式规则集的过程。
Eric Meyer on CSS 主要不是一本参考书，尽管它可以作为参考书使用。相反，它被设计为一本教学书，一种学习辅助工具。正如 Meyer 所说，“它专门设计为实践性的，我认为这是学习任何东西的最佳方式。此外，以项目为中心的书籍往往更有趣阅读，当然对我来说也更有趣写作。” 您学习的最佳方式决定了您可能如何使用本书。为了充分利用本书，您可能需要从本书的配套网站下载 HTML 代码，并将其加载到您的文本编辑器和 Web 浏览器中。该网站提供了每个项目每个步骤的 HTML 代码和样式表。因此，您可以只获取第一页并按照书中的指示进行编辑，或者您可以打开每个单独的 HTML 文档以查看 Meyer 在每个步骤中所做的更改。如果您完成每章末尾的练习，那么一起练习特别有用。在练习中，Meyer 提供了关于如何进一步调整网页的说明，以及完成时应有的外观的屏幕截图。
但是，一起练习对我来说效果不佳。我必须承认，我没有足够的纪律来完成示例练习。我需要从现实生活情境中学习。因此，当我阅读 Meyer 的书时，我仔细研究了书中的样式规则和插图。当我遇到一些启发我的东西时——这种情况经常发生——我放下书，跑到我的电脑旁，修改了我的一个网站，以包含我学到的东西。有时我的更改并没有像我想象的那样工作，我不得不回去重新阅读启发我的特定部分。这通常涉及将我周围的 HTML 和我的样式表与书中的项目进行比较。这就是我学习的最佳方式。
无论您是使用本书的代码还是像我一样使用您自己的代码，亲自进行实验对于充分利用本书都很有用。如果您付出努力，您会惊喜地发现您可以使用 CSS 完成多少工作。
Russell J. T. Dyer 是一位 Perl 程序员、MySQL 开发人员和网页设计师，在新奥尔良地区以顾问身份生活和工作。他使用 Linux 大约六年了。他欢迎读者对他的文章做出回应。
本文中的所有图片均来自 Eric Meyer on CSS：精通网页设计语言，版权 2003 年。经 New Riders 许可转载。
