自从 Dreamweaver MX 2004 发布以来, 我曾经无数次向 Dreamweaver 的新老用户演示它的新特征和新功能。每次进行产品演示, 我很快就会极力称赞 Dreamweaver MX 2004 设计和呈现 CSS (或层叠样式表) 的新功能。

然而最近某位新用户问了一个问题, 说实话, 这个问题一下子让我张口结舌。这位用户只是问：“我为什么要使用 CSS?”当时我意识到, 尽管我们这些每天与 HTML 和 CSS 打交道的人非常了解 CSS 的优点, 但仍有很多人并不了解。或者说并不完全了解 CSS 所能提供的所有优点。本文是我对上面那位新用户的书面回答。

CSS 起源

回顾 CSS 的优点之前, 我要先介绍一下它的历史。Web 管理组织 W3C 在 1996 年 11 月推荐使用 CSS, 并批准了 CSS 1 级规范。CSS 1 级规范说明了用于 HTML 页面的属性。这些属性代替了传统的字体标签和其他“样式”标记, 例如颜色和边距。1998 年 5 月, W3C 批准了 CSS 2 级规范, 将一些附加功能添加到 1 级规范, 并引进了定位属性。这些属性代替了表格标签普遍 (但是错误) 的用法, 用来设计页面元素的表示。CSS 规范的最新版本是 CSS 2.1, 它改进了某些属性, 并删除了在当前浏览器里没有作用或作用很小的属性。

不幸的是, 就像很多新技术一样, CSS 经历了漫长的过程才被广泛采纳。其中的重要原因在于浏览器, 以及为这些浏览器建立站点的 Web 设计者们。CSS 批准期间, Netscape Navigator (NN) 仍然是主导浏览器, 而该浏览器基本上不支持 CSS。Microsoft 在其第 3 版浏览器中添加了对 CSS 非常有限的支持, 但当时大多数的 Web 设计者 (本人在内) 仍然将 NN 作为首选平台进行页面编码。

很多年来, 每发行一个新版本, 浏览器制作者们都扩展了对 CSS 的支持。今天, Internet Explorer 6、Netscape Navigator 7、Mozilla、Opera 和 Safari 都全面支持 CSS。但这并不意味着我们作为 Web 设计者和开发人员的生涯不存在问题。尽管上述所有浏览器都支持 CSS Level 2, 它们的兼容程度仍然各不相同。而且在某些情况下, 特定属性仍然会带给你很多麻烦。也就是说, 您仍然需要遵守老的信条“测试再测试”。但如果您坚持使用 CSS 规范的核心属性, 您将能够正确地呈现页面。

但是为什么 W3C 认为需要创建 CSS 规范呢? 当我创建基于 HTML 的 Web 站点和应用程序时, 这一切对我又意味着什么呢? 我认为, 我们需要使用 CSS 的理由以及它带来的优势可以分为以下三个主要方面：灵活性、呈现性和可访问性

灵活性

我确定几乎每个 Web 设计者和开发人员都经历过这样的痛苦时刻：当您小心地布置好页面, 完成所有嵌套的表格后, 客户要求进行一点“小小的”更改。这小小的更改可能只是“能不能把那个图形稍稍往左移动一点? ”, 也可能非常富有戏剧性：“我不喜欢这些标题, 能把它们的字体弄大一点吗? 改字体的时候, 顺便把颜色也改了, 怎么样? ”如果只需要处理有限的几个页面, 您可以深吸一口气, 花上大半个小时做那些让人恼火的改动。但如果涉及到较大的站点 (而这已经很常见), 一个简单的更改无论如何也简单不了。

这样的情形为什么会如此痛苦呢? 因为定义页面外观的标记本身就是页面的一部分。要看到实例, 您只需到任何站点的任何页面上去数一下 font 和 table 标签的数量。只要您能够从实际页面的流程 (或代码)中删除这些标记, 或者采用更好的办法, 即将其外置, 您就可以进行集中更改。而这就是 CSS 所能做的。

如果使用一个或多个外部样式表, 通过修改样式表然后将修改后的版本上载, 您就可以将更改应用到站点。

想象一下, 在传统的基于表格的布局中, 将站点浏览从页面左侧移到页面右侧将有多么困难。这需要几个小时重复而乏味的工作。但是, 如果您选择使用 CSS 的定位属性 (通常称作 CSS-P) 来设计页面, 只需更改外部样式表中的“浮动”或“位置”属性, 即可更新页面。而且还有以下附加优势：您更新了站点中使用该样式的所有页面。

呈现性

由于宽带的广泛使用, 很多开发人员已经不再考虑在浏览器中呈现页面所花费的时间。但是, 你们应该记住, 很多目标用户仍然在使用拨号连接。传统的基于表格的布局是页面下载速度慢的主要原因。因为浏览器从服务器接收页面时, 必须首先检查并“理解”一系列复杂的镶嵌式表格。它必须先找到镶嵌在最里面的内容, 然后小心地逐步处理代码, 直至到达最外层的容器, 即 body 标签。完成以上所有过程后, 浏览器才能开始在屏幕上呈现内容。

如果使用 CSS, 浏览器从服务器接收内容后, 立刻就可以开始呈现过程, 因为页面中没有或只有很少的显示标记。

使用外部样式表还有一个潜在的呈现方面的好处。在传统的基于表格的方法中, 浏览器必须检索、分析并单独呈现每个页面。也就是说, 浏览器在您的站点上显示第 30 页时耗费的工作和显示第 1 页时一样多。

但是, 如果使用外部样式表进行显示, 站点的第一页将提示浏览器将页面使用的已链接样式表文件缓存起来。这意味着站点中所有使用上述样式表的后继页面下载速度会更快, 因为浏览器已经缓存了样式表。

最后一个与呈现有关的优点让我想起电影《莫扎特》。电影中, 莫扎特问国王对自己的歌剧有什么看法。国王说很好, 但是很沉闷。莫扎特一再追问, 国王解释说, 问题就在于“音符太多”。Web 设计也可能有同样的问题, 当然这里的音符指的是实际 HTML 代码。代码越多, 浏览器理解页面所花的时间就越长。

大家也许都听说过有关官方应用程序的传言, 它们编写了非常糟糕的代码, 满是复杂的信息, 然而文档页面却无法呈现。作为 Dreamweaver 的用户, 你们不会遇到这样的问题, 但是如果编写了太多代码, 你们也会感到内疚。典型的基于表格的设计就是一个很好的例子。

在设计中使用 CSS 后, 您将减少客户需要下载的代码的数量。仅仅减少某些页面中的字体标签就可以大大减少代码的数量。在很多情况下, 如果完全使用 CSS-P 进行设计, 代码的数量最多可以减少 50% 甚至更多。代码减少就意味着页面下载的速度加快。

可访问性

如今我经常听到人们谈论可访问性。大多数开发人员知道自己必须考虑建立更多可访问站点的问题, 但在更大的程度上, 只有为政府或教育机构建立站点的开发人员才被迫真正做到了这一点。考虑到可访问性的问题时, 大多数开发人员认为这仅仅意味着需要将 alt 属性添加到图形中。但实际上, 提高可访问性有很多工作可做, CSS 使您可以轻松建立可访问站点。

可访问性的主要问题 (也是使用 CSS 能够解决的问题) 在于辅助技术 (例如屏幕阅读器) 怎样“阅读”页面。传统的基于表格的环境下, 屏幕阅读器面临一个巨大的挑战, 那就是决定怎样阅读页面。想想吧, 当屏幕阅读器遇到镶嵌很深的表格时该有多么困惑, 它应该阅读内容, 还是跳过内容? 跳过内容后, 以后怎样返回内容?

当您点击页面时, 您会很快看到页面中自己感兴趣的内容, 而忽略页面顶部的导航和其他内容。视力不太好的人却做不到这一点。他必须等待屏幕阅读器分析完页面顶部和他感兴趣的内容之间所有复杂的信息。

当然, 有的技术能够使屏幕阅读器跳过导航, 但这需要在导航条或其他内容的图像中添加链接。这些技术的运行可能会造成混乱, 而且访问站点的其他人也能够看到它们。使用 CSS, 您能够在页面中完整定义不可视元素 (对于其他站点访问人员和您的鼠标不可视)。屏幕阅读器可以使用这些元素快速导航, 有效处理文档。

由于 CSS 没有显示标记, 屏幕阅读器所遇到的唯一问题就是实际内容。另外, 当您使用 CSS-P 进行设计时, 您将专注于内容的实际“流”。您开始考虑它在页面上的逻辑顺序。

当您阅读本文档时, 您理解了信息“流”。但在镶嵌型表格的示例中, 如果您使用多栏布局, 本段落将很可能位于页面的右上角。那样, 屏幕阅读器无法知道它应该在文章末尾阅读本段落。

使用 CSS-P 后, 浏览器可能仍将本段落显示在浏览器窗口的右上角, 但当您查看文档的源代码时, 段落在文档的 html 中仍然是您现在所看到的位置。这使页面更容易访问。

总结和计划

以上就是我的答案。我希望我解释了使用 CSS 进行 Web 设计的独特优势。显然, 要学习的内容很多。因此, 我鼓励您阅读 Macromedia 开发人员中心关于 CSS 的其他文章*, 它们将帮助您更好地了解 CSS 的优点, 并教会您在设计中使用 CSS 的整个过程。以后的几个星期以及几个月当中, 我将带回来更多的 CSS 教程。就写到这里, 希望您愉快使用我们的样式。

关于作者