CSS 禅意花园(修订版)

本书作者是世界著名的网站设计师，书中的范例来自网站设计领域最著名的网站——CSS Zen Garden（CSS禅意花园）。全书分为两个主要部分。第1章为第一部分，讨论网站“CSS禅意花园”及其最基本的主题，包含正确的标记结构和灵活性规划等。第二部分包括6章，占据了本书的大部分篇幅。每章剖析“CSS禅意花园”收录的6件设计作品，每章介绍的作品围绕一个主要的设计概念展开，如文字的使用等。通过探索36件设计作品面临的挑战和解决的问题，读者将洞悉主要的Web设计原则以及它们运用的CSS布局技巧，理解CSS设计的精髓，恰当地处理图形和字体来创建界面优美、性能优良且具有强大生命力的网站。

本书原版书自出版以来持续畅销，受到众多网站设计师的推崇。本书适合网站设计人员和网站设计爱好者阅读，更是专业网站设计师必读的经典著作。

Dave Shea是一位图像设计师，“CSS禅意花园”网站的创始人和耕耘者，该网站获得了很多奖项，包括SouthWest Interactive会议授予的“Best of Show”。Dave Shea曾在全球的行业大会上发表演讲，其作品被世界各地的书籍和杂志广泛收录。他还是Web标准项目（Web Standards Project，WaSP）的成员，该项目是一个由We b开发人员和设计师组成的小组，致力于推广基于跨平台和标准技术的Web设计。Dave还是Web设计机构Bright Creative的拥有者兼总监，其在线出版物mezzoblue.com中所有的Web内容几乎均为Dave所作。

Molly E.Holzschlag是一位作家、教师和Web设计师，编写了30多本有关We b设计和开发的图书。她享有“最伟大的数字作家之一”的美誉，同时被认为是网上最有影响力的25位女性之一。Molly无疑是Web设计和开发界最有趣、最活跃的人物之一。

作为WaSP指导委员会的成员，Molly同其他Web开发人员和设计师一道，致力于推广W3C推荐规范。她还在亚利桑那大学、菲尼克斯大学和比马社区学院教授“网站管理员（Webmaster）”课程。在Web Techniques Magazine关闭之前的最后三年中，Molly在该杂志撰写的专栏Integrated Design深受欢迎；她还在WebReview.com担任过一年的执行编辑。若想更详细地了解Molly，请访问她的网站http://molly.com。

“CSS禅意花园”网站（www.csszengarden.com）的超常创意就已经足够让我们唏嘘不已——亘古不变的HTML文本，仅靠着数百个不同的CSS样式表，就成就了数百个风格迥异而又精彩绝伦的网页设计作品！而一本计算机技术著作的书名若是敢包含“禅（Zen）”，那么作者又将会对该技术有怎样的理解，对自己有着怎样的自信？

而此时此刻，这样一本讲述“CSS禅意花园”网站的、名为《CSS禅意花园》的书就这样静静躺在你手中！毫不夸张地说，它丝毫没有辜负“禅”这个美名的褒扬，加上“CSS禅意花园”在Web标准领域内无可争议的地位，二者相辅相成，交相辉映，让本书当之无愧地站在了We b标准设计领域中旁人难以企及的巅峰。

这本书是教我们学习CSS的吗？不尽然。这本书是教我们学习Web标准的吗？不尽然。这本书是教我们学习网页设计的吗？不尽然。那这本书是做什么的呢？为什么要读呢？

实际上，这并不是一本用来入门的教科书，它已经跳出了某种技术或是某个主题的限制，涉及的范围异常广泛：从We b技术的发展到用户体验，从简单的模仿到富有灵性的创意，从心理学、人类学和社会学到深层次的艺术理念……无所不包却又大都点到为止，留给我们充分的思考空间——薄薄的300页篇幅、屈指可数的7个章节，寥寥的36个实例无一不体现了作者的精巧与良苦用心。所谓滴水藏海，阅读本书，我们将体会到的是一种开阔、超然的对技术、对美的总体把握能力——这或许也正是“禅”的真谛吧！全书始终围绕在符合We b标准的网页设计的方方面面，但却从没有任何枯燥的说教，抑或是冗长的代码，而是在更高的位置、从一个全新的角度娓娓道来，如涓涓溪流般潜移默化地让你体会到We b标准的好处。正如老子在《道德经》中所说的那样，大音希声，大象无形。

100个人眼中有100个哈姆雷特，本书也是如此。对于CSS、Web标准以及网页设计技术，无论你是初出茅庐的新手，还是渴望更进一步的提高者，抑或是浸淫多年的专家，都能在书中领悟到独一无二的意境，学到适合自己的知识。当然，你最好已经有了丰富的We b设计、开发经验，否则只被本书中那一个个漂亮精致的设计所吸引，而却对其背后隐藏的那片世界望洋兴叹，岂不遗憾？

若你只是想要一本CSS语法的快速参考手册，或是一本从头到尾循序渐进讲述Web标准的优势以及实现方法的“传统”技术图书，那么本书显然不会是一个好的选择——若你正在书店中，那么方圆一米之内就有无数种更“好”的替代品。阅读本书，你需要小资一般的情调——暖暖阳光的午后、安静舒适的房间、一盏弥漫的香茗……仔细领悟其中蕴含的深意，时而沉浸其中，时而掩卷沉思，时而打开电脑记录下最新的灵感，你的心灵将要充盈着沉静、安闲，直至领悟到技术与艺术结合起来的那份超然的意境。

正是因为本书的原版如此经典，我们在翻译时备感诚惶诚恐。原作语言带有强烈的西方文化特色，很多俗语、典故更是让翻译的过程充满了艰辛，加之时间有限，以致一度让我们萌生了退却的念头，深恐一不小心糟蹋了如此的传世之作。虽在翻译的过程中竭力以求信、达、雅，但限于自身水平，译本很多地方仍会有所不足，还望各位读者不吝指正。您可以通过我的博客（http://dflying.cnblogs.com）或E-mail （DflyingChen@hotmail.com）与我们联系。本书的勘误也将发布到我的博客网站上。

在CSS领域，很多术语的翻译颇有争议，也非常值得玩味。这里我们列出翻译中遇到的一些常见的、争议较大的CSS术语对照。选择的标准主要考虑约定俗成的翻译习惯以及更明确的表意。我们还在http://dflying.cnblogs.com/archiv-e/2007/02/04/639837.html中一一列出了选择这些译法的详细原因以及各种译法之间的比较，若有更好的建议，也请至上述地址指出，我们会在再版时予以修订。

□ box model：盒模型

□ padding：内边距

□ margin：外边距

□ hack：（不译）

□ liquid layout：流式布局

□ ancestor element：祖先元素

□ descendant element：后代元素

□ selector：选择器

□ accessibility：可访问性

在翻译过程中，我们得到了众多家人、朋友和同事的关心与鼓励。感谢Aditya Bansod先生，不厌其烦地为我们解释了很多原著中艰深晦涩的语句；感谢段大为先生为我们解释原著中的日语；感谢人民邮电出版社的谢工女士、李际女士和付飞先生，ajaxcn.org的李锟先生给了我们这宝贵的翻译机会；感谢Cure、xilihwala、sheva.wen、kevin、hax、Cat Chen、琳琳的小狗、THIN、small tiger和liucsoft等博客园网友为本书的术语翻译提出的宝贵意见。没有你们的支持与帮助，我们不可能在如此短的时间之内做到这些！

可以到www.csszengarden.com浏览“CSS禅意花园”网站和本书中列出的所有设计作品。

若想查看某段HTML标记，可使用浏览器的“查看源文件”功能，该功能通常位于“查看” 菜单中。若想查看设计中使用的CSS，首先选择该作品，然后找点击页面中的“View This Design's CSS”链接。需要注意的是，不同作品中该链接在页面中的位置也各不相同。

欢迎阅读这本关于一个将要塑造We b未来的项目的图书。

本书的诞生缘于2003年5月8日创办的一个网站。该网站的初衷是改变人们对We b设计的看法，但最终却出乎意料地改变了全球技术发展的趋势。该网站名为“CSS禅意花园”，是来自世界各地的众多天才协力合作的结晶。

“CSS禅意花园”在发布宣言和展示作品两方面双管齐下，其创建目的在于展示基于CSS设计可实现的视觉效果。网站以样式表和图像的方式向设计师征集原创作品，但规则是所有作品都必须使用相同的HTML文件。每件作品的HTML都完全相同，无一例外。

不可思议？甚至有点疯狂？也许兼而有之，但毫无疑问，只要使用得当， CSS与任何设计工具相比都毫不逊色。本书展示了网站收到的36件最杰出的作品，深入剖析了创作人员的设计历程及他们使用的工具和编码方法。

整本书就谈论一个网站？是真的吗？如果这是一个普通的网站，当然有理由这样怀疑。但“CSS禅意花园”的内容是如此丰富多彩而又如此实用，并且都由世界各地各怀绝技的设计师创作，因此对本书来说最严峻的挑战则是如何将其揉合到一本书中。

本书介绍的内容

本书是介绍和描述该网站的吗？从某种意义上说，是的。本书是有关Web设计最佳实践和技巧的教程吗？显然如此。它是一个令人赏心悦目的设计画廊，设计网站时能从中获取灵感吗？当然没问题。

“CSS禅意花园”涉及了众多有关如何完成现代Web设计的主题，如果专门探讨设计的某个方面，比如布局，那么连展示该网站的冰山一角都谈不上。编写本书时，我们就清楚地认识到了这一点，因此必须涵盖方方面面：文字的使用、色彩理论、布局设计技巧，应有尽有。

从本书中能够学到CSS知识吗？当然，但不是入门水平的基础知识。要侧重于视觉设计技巧，必须跳过入门课程，直接进入中级。市面上的另外一些不错的技术书可帮助读者快速掌握有关CSS句法和语法的基础知识。我们建议读者购买其中一本进行快速入门，然后在本书中学习如何以极具视觉震撼力的方式应用CSS技术。

本书将重点放在解决视觉设计问题上，而不是详细描述CSS规范的方方面面。在恰当的时候也会讨论浏览器的支持情况，以保证实用性。

本书针对的读者

本书适合所有对设计和开发网站感兴趣的读者阅读。

本书采用视觉化的方式讨论CSS设计理论和实践，以使用基于标准的最新技术完成实际作品和解决实际问题为目标。

本书的重点是视觉艺术，但并不要求读者具有图形设计基础。作者从始至终都在尽最大努力以最佳的方式定义设计术语，确保即使读者不具备任何设计知识，也能理解并运用本书中介绍的概念和技巧。

尽可能少用行话和技术术语，即使读者对CSS没有足够清晰的认识，也能理解大部分章节。建议CSS新手从推荐读物（参见本书末尾的“结语”部分）中选择一本阅读，学习基本概念和语法，然后通过阅读本书来拓展这些概念并在作品中实际应用。

书中探讨了一些基本的We b设计原则，适用于大多数但不是所有情况。当然可以使用Adobe Dreamweaver¹等自动设计工具来创建基于CSS的网页，但对那些使用HTML编辑器手工编写代码的设计人员来说，本书介绍的大部分CSS技巧将显得更加有用。如果仅依赖拖放来完成Web设计，将会发现本书在很多方面技术性太强。但愿这不会让读者丧失拓展知识的勇气。

注释：¹ 原文为“Macromedia Dreamweaver”，但Macromedia已与Adobe公司合并，产品名称也有所改变。——译者注

即使是对CSS了如指掌的读者也能从阅读本书的过程中受益良多。本书侧重于视觉艺术，辅以实际的CSS示例，这些实例均出自当今最具创意的一些设计师之手；书中涉及的主题丰富多彩，即使是那些经验最为丰富的专业人员也能从中学到一些全新的技巧。

如何阅读本书

网站通常都有入口，被称为主页。在这里，用户可以通过点击某个标题跳转到网站的任何地方，浏览其中包含的内容；也可以使用搜索功能查找所需的内容；还可以随意单击，了解能获悉哪些更深入的内容。

本书采用的也是这种模型，阅读的方式也没有对错之分。既可以从头开始逐页阅读，也可以直接跳到感兴趣的章节。读者可以以任何非线性方式阅读本书，以任何顺序研究书中的每个作品。

本书分为两个主要部分：

□ 第一部分为第1章，讨论网站“CSS禅意花园”的创建及其最基本的主题，包含正确的标记结构和灵活性设计等；

□ 第二部分包括6章，占据了本书的大部分篇幅。每章剖析“CSS禅意花园”收录的36件设计作品，每章介绍的作品围绕一个主要的设计概念展开，如文字的使用。通过探索36件设计作品面临的挑战和解决的问题，读者将洞悉主要的Web设计原则和CSS布局技巧的运用。

下面概述这7章的内容。

第1章追本溯源

概述“CSS禅意花园”的来历及CSS的发展历程，讨论正确的标记结构和设计。

阐述基本设计元素及其在We b设计中的应用，包括色彩理论、比例、位置、文字和图片之间的关系以及如何协调地使用Adobe Photoshop和CSS。

第3章正文布局

详细阐述如何创建复杂的CSS布局，包括分栏、浮动内容和定位方案。

使用图像改善布局以及如何生成图像，包括图像替换、图形文件格式及寻找图像素材。

第5章字体排印

Web上字体的局限性及其避免方法等有关文字的方方面面，包括字号、字体的选择和基于图像的文字等。

掌握基本知识后该做什么？根据用户使用的浏览器采用不同样式的高级CSS效果、创建灵活布局的技巧，以及使用巧妙的代码克服技术的局限性。

介绍6位设计师进行重构的方法。给出了这6件设计作品创建的过程，详细阐述了每一步。综合运用本书其他5章介绍的设计原则，就能在这里获得最佳的效果。

可以看到，我们竭尽所能，将尽可能多的优秀内容揉合到本书中，这几乎是市面上最全面的有关基于标准的现代Web视觉设计的参考资料。

编写本书是一种享受，但愿你阅读时也是如此！

Dave Shea，Molly E.Holzschlag

首先也是最重要的，感谢我的妻子April容忍我在那么多的夜晚中独自在星巴克咖啡店中写作。若是没有她的支持、理解和耐心，我不可能完成本书。

（这也提醒了我——感谢这家本地的星巴克咖啡店的所有员工给我带来那么美味的拿铁咖啡，且对总是独自呆在角落中敲击着PowerBook的我没有丝毫厌烦。）

感谢我的父母Gord和Linda以及我的兄弟Matt和Jeremy，能善意地装作理解我的所作所为。

感谢DreamFire工作室（www.dreamfirestudios.com），虽然访客越来越多，但从开始到现在，它一直为禅意花园网站提供着服务器。

围绕在禅意花园的设计师社区给了我很多支持和鼓励，这些都是我在两年前着手本书写作时从未想到过的。这里有太多太多的人需要感谢，但很遗憾不能在书中全部列出，感谢你们曾经给我的帮助。虽然下面列出了很多人，但还有很多人没列出来，但你们的那些让We b更加丰富多彩的作品却无时无刻地带给我无穷的勇气和灵感。

最好、最多、最真诚的感谢，献给我的合作者Molly，感谢她能把她的想法和经验与我分享，感谢她给我的鼓励。很多年前她的一本书将我带入了We b设计的殿堂，能够与她共同完成本书是我的荣幸。

Molly E. Holzschlag感谢

若是某个领域中的学生很快就能成为我们的老师，那么能处在这个领域中绝对会是段不平常的经历。我们现在做的正是这样的事情——立即改变人们对Web的想法。与Dave合著该书时我也再次感受到了从学生到老师的那个奇迹般的过程——我的作品启发了一个人，这个人很快又启发了新的一批Web设计师。Dave以及很多禅意花园设计师都让我更好地理解了CSS，进而更有效地教授CSS，最终又以一种全新的方式对Web充满了热情。因此，最主要的感谢必须致以Dave，以及所有本书的贡献者——很多人都是我的朋友或老师，都曾在过去的一段时间中帮助我认识到了We b项目中的最重要之处。

从个人角度，我要感谢深爱的Michael以及我的家人和朋友，你们忍受了我善变的性格并自始至终陪在我身边。还要感谢David Fugat，这位异常优秀的文字编辑，也是我的好朋友，从不吝惜他的鼓励和指导。

更要感谢我的网站的读者和访客：对我而言，你们长久以来的支持和鼓励是任何其他东西都无法替代的！

Dave和Molly共同的感谢

献给所有参与本书编辑出版工作的朋友一个最真诚的感谢！Cheryl England不但是个绝佳的编辑，也让编辑的过程充满了乐趣！感谢Shaun Inman帮助本书在技术上精益求精，感谢Elissa Rabellino细心的编辑工作。同样感谢产品团队的成员（Charlene Will、Kim Scott和Hilal Sala）帮助我们保证了本书的质量。最后，一份特殊的感谢献给Nancy Ruenzel和Cliff Colby，是你们坚信本书的取材，并随后帮助我们付诸于实践。

感谢所有认为CSS禅意花园值得参与的朋友，是你们造就了禅意花园的今天。若是没有你们的努力，世上决计不会出现本书。

长久以来， We b设计就在快速变化着。We b设计师需要逐字逐句地查看源文件，反复试验并挑战自己的极限。这是一个有趣的过程，也通常是我们自发来做的工作。

随着时间的流逝， We b标准及其最佳实践开始逐渐浮出水面，这个过程直接指向了我们的工作所基于的最重要的软件——We b浏览器。在本书中，你将学到掌握当代We b设计的理念、过程和技术所必需的一切知识。

20世纪90年代末的互联网是一个疯狂且危险的新领域。任何事情都可能发生，新东西不停地出现。没有人能确定互联网当年应该是怎样的。就像孩童拿到了一件新玩具一样，“挑战极限”成了那时人们的口头禅。

人们还在不停地挑战极限。但同时，HTML也以一种用来标记研究论文的简单语言的身份呱呱坠地。浏览器厂商和图形设计师都对其低下的布局能力颇有微词。于是，类似 <font>标签和被强行用作布局的<table>标签等hack¹应运而生，用来克服HTML的这些布局上的弱点。但这些hack却破坏了HTML语言的本意——以结构化的方式表示文档。

注释：¹ 指一些偏重于技巧类的、非常规的用来实现某种布局要求的手段和方法。例如用<table>标签进行布局就属于一种hack。——译者注

一些基本的HTML元素被滥用于与其本意毫不相关的页面布局中。同时一些具有明确功能的元素却因为不够“美观”而被人们抛弃。为了迁就网站的视觉效果，正确的文档结构往往被忽视。

当然，那时主流的浏览器生产厂商并没有帮上什么忙。在事情向好的方向发展之前，情况似乎还将变得更加糟糕。当时的两大浏览器霸主——微软和网景都在不停地开发出自己的私有扩展，再基于这些扩展进一步提供新的扩展，这就是著名的浏览器之战。虽然竞争有利于创新，但这个过程也同样让人感到窒息：Web开发者不得不为同一个站点维护多个版本的HTML代码，因为为某种浏览器编写的HTML代码极少能够在另一种浏览器中正常显示。

总之，当时的情况是一团糟。尽管存在着这样那样的问题，但.com兴起时吸引的大量的资金仍旧让Web保持了不断的增长——有了足够的钱，即使要为同一个网站编写两套不同的HTML也没什么大不了的。但在千年之交的时候，无论是网站编写者还是投资者，都终于无法忍受了。

在新世纪之初，资金枯竭，Web上的预算减少。随着状况急转直下，那些尚未失业的Web开发者很快认识到，为各种非标准浏览器编写代码所带来的额外工作已不能承受，是时候去改变一些东西了。

一些“草根”Web设计师组成了一个叫做Web标准项目（Web Standards Project，WaSP；www.webstandards.org）（图1-1-1）的组织，并劝说主流浏览器生产厂商将它们的那些“狂放不羁”的浏览器标准统一起来，共同遵从W3C（World Wide Web Consortium）所“建议”的规范。这样，浏览器生产厂商基于W3C规范进行标准化的过程就为Web开发注入了一丝“一致性”的意识。人们有理由相信，在未来的一段时间之内，Web设计师所创建的复杂HTML页面完全可能以统一的样式呈现在各种浏览器和操作系统之上。

W3C规范大都专注于解决较高层的编码及架构方面的问题，但普通的Web设计师却很少需要关心这些。即使这样， W3C还是从20世纪90年中期发布标准化HTML版本开始，陆续提供了一系列的规范。这一系列规范约束了发送给浏览器的HTML代码，旨在以一种智能、易用并便于实现的方式解决浏览器之间的兼容性问题。

W3C致力于推动互联网的发展。自1996年发布第一份规范开始，W3C不停地挑战着现有的互联网规则，并为很多种技术提供了规范的解决方案。

2.为什么是这些标准

W3C 工作组成员由很多不同背景的专业人士组成，这些专业人士聚集在一起，讨论解决一些超前的、普通Web设计师永远都不用关心的问题。他们的目标就是提供一系列经过深思熟虑的建议，这些建议为软件开发者和浏览器指明了发展的方向。若网站编写者和设计师遵从了这些建议，就可以保证其站点能够在最多数的用户代理（user agent）中正常显示并正常使用。

当然，这里的“用户代理”指的是浏览器。但普通的桌面浏览器仅仅是众多“用户代理”中的冰山一角而已。随着移动设备（例如移动电话）的迅速发展，越来越多的用户不再被束缚在PC机前。而且，也不是所有的用户都有能力用浏览器访问网站——因为有些用户不能使用浏览器。例如，一些有特殊可访问性需求的视力不便的用户可能需要借助屏幕阅读器软件、盲文设备或屏幕放大软件等来帮助访问网站。

因为W3C创建这些规范的目的是改变20世纪90年代Web领域中的各种混乱的不兼容现象，所以很难为所有用户代理制定出统一的网站规范。考虑到这些，W3C发布了一系列的规范，包括HTML 4.01、XHTML、层叠样式表（Cascading Style Sheets，CSS）和DOM等。

这些规范所包含的技术都是Web标准项目组织里的设计师和开发者所希望看到的。遵从这些规范，我们就可以在保证网站支持大多数最广泛的用户代理的同时，也能够对其布局进行精确的控制（使用CSS），但这确实是一种与以往完全不同的网站创建方法。要让设计师们相信学会CSS是他们最好的出路并不是件容易的事。新千年的头几年一直都在阐释如何使用CSS。

就在这样的互联网大环境中，“CSS禅意花园”迎来了它的春天。当时，研究CSS的人们主要是程序设计师，这些程序设计师在如何从技术角度使用CSS方面非常精通，但他们的作品却都略显简单乏味，从艺术角度看，实在不敢恭维。而图形设计师却无法掌握使用CSS的精髓，因为当时并没有什么出色的CSS设计作品可供参考。

在2002年的晚些时候，禅意花园的创立者Dave Shea开始考虑这个问题。对于那些有能力学会并用CSS做出漂亮效果的设计师来说，这类由程序员创建的平常之作又怎能引起他们的兴趣呢？Shea同时具有程序设计和视觉艺术两方面的背景，这也让他坚信CSS有成为一门设计语言的潜质。Shea同样意识到，那些真正应该使用CSS的人们反而没有在使用。于是他产生了这样的想法：如果有一个网站，集合了大量的的优秀CSS设计该多好啊。简单地搜集现有的资源用处不大——因为还没有什么现成的，唯一的办法就是鼓励优秀的设计师去创造全新的作品。就这样，Shea在内心播下了禅意花园的种子。

Web标准项目的创始人之一Jeffrey Zeldman在2002年发表了一篇文章，文中恳求那些已经了解了基于Web标准设计的好处的人们暂时放弃“说教”他人，而是去“使用”Web标准。“使用”成了宣扬Web标准最有说服力的武器，“展示而不是说教”也成为这批Web标准拥护者的信条。

2002年，一个叫Chris Casciano的Web开发者发起了一个名为Daily CSS Fun的项目（图1-1-2）。Casciano计划在为期一个月的时间内，每天发布一个新版本的CSS文件，让同一个HTML页面呈现出完全不同的样子。Casciano从未声称过他是图形设计师，但这个项目的结果却异常引人注目——人们都纷纷叹服于CSS也能实现如此特别的布局效果。

由于Netscape Navigator 4在当时还非常流行，且它对CSS的支持并不好，所以Casciano的这个项目也仅仅在理论上让人赞叹而已，离实际应用还有相当的距离。随着Netscape Navigator 4市场占有率的不断下降，直到2003年IE开始一统天下，CSS布局大行其道的日子似乎已经指日可待。CSS的全面应用重新被提上了议事日程。

禅意花园的构思终于成熟，2003年5月，Shea发布了他的个人站点，即www.mezzoblue.com，很快又转到了现在的域名之上：www. csszengarden.com。

需要注意的是，所谓Web“标准”，并不是传统意义上的“标准”——“Web标准”只是一种建议而已，并不是强制执行的规定。这一点在W3C的文档中也有体现：文档的名称都以“建议（Recommendation）”命名，而不是“标准（Standard）”。尽管如此，很多开发者仍旧将其作为“标准”来遵守。若想详细地了解这里面“标准”与“建议”之间的区别，请参考这篇文章：“Web标准是什么”（http://www.webstandards.org/2004/10/26/what-is-a-web-standard/¹）。

可以在www.zeldman.com/daily/0802c.html#Evangeline这个页面浏览Zeldman的原文。

可以在www.placenamehere.com/neuralustmirror/200202这个页面浏览Daily CSS Fun项目。

在2002年的晚些时候，Shea就已开始尝试为禅意花园编写原型，这个原型能够在四套样式表之间切换，分别代表了四种古代的元素——地、水、火和风。但这个想法并没有充分体现，主题中也没有用到足够的图片。如图1-1-3～图1-1-6所示，第一版的禅意花园草案还远远称不上吸引人。

这些设计似乎显得有些令人厌倦，因为它们都缺少了图片修饰。背景图片可以通过CSS的background-image属性声明，而作为内容的前景图片则不能。若是使用了<img>标签，则页面就会丧失了灵活性：我们将不得不被限制于一些确定了的图片中，无论CSS样式如何变化，都不能改变这些已经用<img>标签定义了的图片。但是，很多时候只使用背景图片是不够的，因为设计时所用的图片往往用来修饰文本，也就是说，这些图片需要放置于文本的两侧，而不是作为背景和文字混在一起。显然，只使用背景图片还不能完全满足这样的设计要求。

Douglas Bowman在其文章“使用背景图片来替换文本”中给出了一种权宜之计（这种解决方案目前已经是声名狼藉）：首先在页面中将前景图片和某些文本元素关联起来，然后用图片来代替原来的文本。使用CSS加上一些少量的额外标记，即可很容易地实现这个hack——与<img>标签及其alt属性的表现非常类似。

2003年4月，禅意花园的计划正式开始了。设计者发布了一个单独的HTML文件作为所有设计的基础，随着这个HTML文件发布的还有5个初始设计（图1-1-7～图1-1-11 ）。

如果你曾读过Bowman 的原文（http://www.stopdesign.com/articles/repla ce_text/），则会发现这个解决方案存在着一些非常致命的可访问性问题。禅意花园的很多设计也使用了同样的技巧，该技巧将在第4章中详细介绍。

因为禅意花园的HTML文件一旦发布，就不能再修改（其他人会开始为这个HTML编写CSS样式文件并提交上来），所以Shea花费了一段时间来检查文档的标记和内容是否合适，且还要保证文档中有足够的class和id元素，以便于日后用不同的CSS进行修饰。但即使如此细心，在HTML正式发布之后还是出现了一些事先难以预料的问题——这些将在本章稍后部分介绍。

虽然前5个初始设计都对禅意花园的成功起到了至关重要的作用，但从长远来看，只有默认的第一个设计始终保持着较高的知名度。精致简洁的“安静”始终被设定为禅意花园的默认界面。虽然也曾考虑将2号设计“鲑鱼奶油奶酪”作为默认界面，因为该设计第一眼给人的冲击力较强，但谢天谢地，最后还是选择了“安静”。

除了正文部分之外，默认设计中的所有图片和文字都是在Adobe Photoshop中手工绘制的。起初Shea希望能够用书法手工写出标题的这段文本，不过在尝试了一个小时的毛笔和墨汁之后，Shea还是决定使用另一种让人更加满意的方法——Bitstream的Calligraphic 421字体（图1-1-12）。

因为汉字笔画复杂、样式美观，所以很多设计师非常欣赏它所体现出的细节。一种典型的西方设计方式就是一知半解地将若干汉字拼凑起来，以体现出某种“神秘”的意味，但Shea却不想这样。Shea花费了一段时间研究将要放在页面左上角卷轴中的汉字，希望能够让这些汉字表示出一定的含义。虽然初衷是好的，但结果仍旧让人遗憾：卷轴中的汉字在英语中的含义大概为beginning、complete、whole和skill¹。

注释：¹ 在图1-1-7中我们可以看到，这几个汉字为“完”、“全”、“技”等。隐约可以感到Shea似乎要表达出类似“最高水平”的意思。——译者注

还记得小学时候的这类小作品吗？将墨汁倒在一张白纸上，然后用吸管将墨汁吹成类似树的形状，最后撕下一些卫生纸片作为“花”。页面右下角的那棵树的设计过程将会让你回忆起这段美好的时光。从屏幕截图中可以看到，这棵树经历了若干次修正（图1-1-13）。整个过程从树的轮廓开始，只包含一些很简单的颜色，然后再基于该轮廓，以不断添加图层的方式进行改善。

几天之内，陆续有用户开始提交他们的设计：在站点发布的第一周里，每天就有成千上万个访问者到来。人们还志愿将禅意花园翻译成数十种语言。很明显，禅意花园的出现满足了人们压抑已久的对CSS设计方面的需求，这在当时没有任何其他网站能够做到。

自发布以来，禅意花园已经出现在全球范围内的数十种杂志、图书中，巩固了它在Web设计历史上独一无二的地位。感谢信更是从世界的各个角落纷至沓来，设计师和开发者用禅意花园向他们的雇主、客户以及同事证明了使用CSS进行设计的优势。提交作品的设计师也由此声名远扬，禅意花园甚至推进了他们的职业发展。

虽然创建和维护是由一个人完成的，但禅意花园在很大程度上是志愿者协作的结果——才华横溢的设计师们贡献给自己的作品，帮助它获得成功。每个人都能在禅意花园中找到不同的价值。虽然创建禅意花园的本意是演示CSS在设计中的作用，但它同样在很多当初没有预料到的领域中给人们带来了帮助。

□ 若是某位设计师正在被一个布局问题所困扰，那么现在他有了寻求帮助的地方——禅意花园中有数百个不同的设计，他所遇到的问题极有可能已经被别人解决了。禅意花园允许并鼓励人们学习它的CSS，并将其使用在其他站点上。

□ 类似地，禅意花园中也不断出现新的页面布局技术及CSS效果。我们都有机会在数百个作品中找到一些新奇的东西。

□ 禅意花园还是一个绝佳的浏览器兼容性测试网站。其中所有的设计都使用有效的、基于标准的代码编写，所以理论上这些设计应该能够在所有浏览器中以一致的方式呈现出来。（当然实际上并非如此完美。由于某些浏览器的缺陷或对某些元素缺乏支持，大多数设计师都不得不考虑浏览器之间显而易见的呈现差别，并使用多种CSS过滤器和hack来解决。）

□ 当你正尝试说服你的雇主或客户使用Web标准设计页面时，禅意花园就是一个极其令人信服的证明。

□ 当你灵感枯竭的时候，禅意花园中的设计或许能够给你一些启发。感觉江郎才尽了？来禅意花园逛逛吧，说不定灵感就在不经意之间出现了呢！

□ 禅意花园为经验丰富的专家和积极努力的设计师提供了一个良好的展示自我的平台。雇主和潜在的客户很愿意主动联系它们中意作品的设计师，提供工作或者合作机会。这些优秀的作品也经常出现在国际性的图书和杂志中。

□ 禅意花园已成为教师和讲师在教授当代Web设计实践时的一个有力工具。

只有对HTML元素非常熟悉，才能知道何时应该选用何种标签。这里我们推荐Dan Cederholm的Web Standards Solutions:The Markup and Style Handbook一书（2004年由Friends of ED出版社出版），作为实际开发中关于结构化标记的参考。

在开始使用CSS布局之前，首先要保证你的Web页面是以标记结构化的方式编写的。既然正在阅读本书，那么你十有八九已经听过将结构（structure）和表现（presentation）分开的说法。若你对此尚不熟悉，也不用担心——基于CSS进行设计的最主要的优势就是，只要HTML文档结构良好，那么今后将很容易通过添加一层CSS作为修饰，让文档样式变得非常漂亮。

长期以来，格式化Web页面时基本HTML元素的选择都取决于它们的显示的样式。若需要一个带有缩进的段落，你可能会选择用<blockquote>标签将这段文字包围起来，让段落两端显示出一些空白。但顾名思义，blockquote元素表示其中包含的内容是一段引用自其他来源的文字。如果我们仅仅是为了让某一段文字以缩进形式显示而使用blockquote元素，而这段文字却并非引用自其他来源的话，那么就意味着我们错误地使用了HTML标签——HTML标签是用来表示文档结构的。对于文档的显示样式（例如某一元素的缩进），应该使用CSS来实现。

结构化HTML文档主要体现在对HTML标签正确、合理地使用中。选择HTML标签时要根据其语义，而不是其样式进行。

既然现在CSS设计已经是可用的了，那么就应该把所有的格式化和设计相关的实现放在CSS文件中，让HTML只用来表示文档结构。作为一门用来设计表现样式的语言，CSS建立于HTML的文档结构之上并为其应用可视化样式，而HTML则只用来表示文档的结构，不再用于页面样式的设计中。

那么正确、合理的文档结构能够带来什么好处呢？这一节中所提到的“结构”到底又是什么东西呢？

为表现样式编码和为实现正确的语义编码，二者在基本原理上的差别比较微妙。这里给出了一段示例代码来帮助我们更好地区别。下面这一段HTML就是为了实现某种表现样式而编写的：

<b><font size="2">Our Family</font></b>

<font size="1">Pictured are Matt and Jeremy.As

usual,Matt is msking a funny face. We don't have many hotos

where he isn't.</font>

下面这一段HTML是为了达到正确的语义而编写的：

　<h3>Our Family</h3>

　<p>Pictured are Matt and Jeremy. As usual, Matt is

　making a funny face. We donÕt have many photos where he

在第一个代码片断中，所有的HTML标签都是用来表现样式的。 <br>标签用来换行，<b>标签用来给文本加粗，<font>标签则指定了文本显示的大小。

而在第二个代码片断中，却一点都没有对页面显示样式的说明——h3和p元素仅仅用来描述页面中某一段内容的功能。p元素中包含了一个自然段的文字，而h3元素则表示其内容是页面中的第三级标题。

关键之处就在于，第二个代码片段并没有考虑这些元素将要以何种样式呈现出来，因为元素的呈现样式将由CSS控制。之所以选择这些标签，是因为它们恰如其分地描述了其中的内容。这也正是HTML中语义的概念：选择何种HTML标签取决于标签本身的语义，而不是其默认显示出的样式。

针对语义编写HTML所带来的巨大优势将在本章稍后部分介绍。现在我们只要记住，使用CSS进行设计时的主要任务之一，就是从编写合法的、带有良好结构并拥有语义的HTML文档开始。完成了这一步之后，我们才能在这个坚实牢固的基础之上应用各种CSS样式。

每个页面都在结构上有自己不同的需求，所以对于创建HTML来说，很难找到一个完美的一揽子解决方案。但我们却能够总结出一些通用的指导方针，将这些要点烂熟于胸，一定会对编写HTML大有裨益。

在HTML的最开始部分声明DOCTYPE（Document Type的简写）可以让浏览器或其他用户代理知道你要使用的HTML语言的类型。无论你打算选择何种类型的HTML语言，DOCTYPE都是一个健壮的文档所必需的，也是你在编写HTML时要做的第一件事情。

“<p>标签”和“p元素”之间到底有什么区别？大多数时候它们表示的是同一个东西，但仍有一些细微的区别。“标签”指简单的HTML分隔符，例如<p>、<div>和</body>等。而“元素”则是由一对开始结束“标签”构成的，用来包含某一些内容——这里有一个值得注意的例外，即<br/>本身既是开始标签又是结束标签，其中不包含任何内容。

若想了解更多关于将文档结构和表现分开的内容，请参考Roger Johansson在456 Berea Street网站给出的白皮书 ——“ Developing with Web Standards”（www.456bereastreet.com/dwws）。

若想了解更多关于DOCTYPE的相关内容，请参考Jeffrey Zeldman在A List Apart网站中的文章——“Fix Your Site with the Right DOCTYPE”（www.alistapart.com/articles/doctype）。

一般地，“元素”用来表示某一段明确的结构，而“标签”则仅仅是用来创建文档结构的语法而已。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

与声明DOCTYPE同样重要的是将HTML文档指定为某一种人类的语言。如果你曾偶然闯入某个看似乱码的网页，而实际上其文字却是日语、希腊语、斯瓦希里语或者其他什么语言，你就会知道页面编写者忘记设置页面编码所造成的后果了。因为Google和其他搜索引擎会根据搜索请求的语言来过滤搜索结果，所以如果你不想放弃搜索引擎带来的流量的话，那么正确地设置页面的编码将显得极为重要。本章稍后将详细介绍字符编码的相关内容。

设置文档的XML语言。这里设置为英语的ISO代码en。

设置文档的字符集。这里为UTF-8。

每个HTML页面都需要一个用来描述页面内容的<title>元素。在访客将页面保存至收藏夹时，<title>元素中的内容将作为链接的描述同样被保存在访客的浏览器中。搜索引擎也对<title>元素中包含的关键字格外感兴趣，因此好的<title>可以明显地提高页面在搜索引擎中的排名。网站中的每个页面都应该尽可能地有一个唯一的标题，标题应该极具描述性地概括该页面的内容，而不是泛泛地介绍整个站点。

<title>css Zen Garden: The Beauty in CSS Design</title>

我们在前面已经分析了这个问题，但还是有必要在这里重复一遍：根据文档内容的结构而选择HTML元素，而不是根据HTML元素的样式。例如，用p元素包含文字段落，而不是为了换行；用blockquote包含被引用的文字，而不是为了得到缩进等。

当然，并不是所有的HTML元素都可以在XHTML 1.0 Strict标准中使用的。事实上，虽然XHTML 1.0 Strict标准（以及XHTML 1.1标准）中可使用的HTML元素较少，但这些元素却有着更加明确的意义。若你在创建文档时找不到合适的、可以恰当描述其结构的标签，那么可以考虑使用通用的div或span元素。当然，这也是一个警告……接下来将会介绍。

<h3>The Road to Enlightenment</h3>

而不要使用这样的HTML：

<code style="font-size: 1.5em;">The Road to Enlightenment</code>

设计HTML时一个常见的错误就是过度使用div和span。少量、必要地合理使用可以明显增强文档的结构性。但若是文档中使用了太多的div和span，那么你就应该考虑一下是不是还有更加合适的HTML元素供选择了。例如，若是h3更能表示内容的含义，那么就不应该使用div，span也不应该替代label的作用。

但这并不意味着应避免使用div和span。文档中合适位置的少量div元素可以使文档更易于应用样式，且在逻辑段落上也显得更加清晰。我们可以将div看作一个可以被重用的容器：将内容深深隐藏于太多的容器中并不是一个好主意，但是几个合理位置中的div却可以让文档显得井井有条。

　<h1>css Zen Garden</h1>

　　<h2>The Beauty of <acronym title="Cascading Style

　　Sheets"> CSS</acronym> Design</h2>

在W3Schools的“XHTML 1.0 Refere nce”（http://w3schools.com/xhtml/xhtml_reference.asp）中可以找到XHTML 1.0中允许使用的所有HTML元素。

前面两个提示所隐藏的含义就是，HTML标签使用得越少越好——事实上也确实如此。若想创建出良好的文档结构，那么尽可能少使用标签应该是一个自始至终都要考虑的问题。仅仅使用必要的标签，将其他不必要的都删掉。这样做的好处不仅在于能够让文件保持小巧（也就意味着用户下载速度的提高），也可以让浏览器能够很快完成文档的解析，即得到更快的呈现速度。

<p>The Zen Garden aims to excite, inspire, and encourage participation.</p>

　<p><span class="text">The Zen Garden aims to excite,

　inspire, and encourage participation.</span></p>

为元素添加起标示作用的属性可以让你在稍后很容易将该元素与CSS或JavaScript关联起来。class是一类可重用的属性，能够被重复应用到页面中的任何元素上；而id则是独一无二的，同一个id在每个页面上只能出现一次。

一个元素可以应用多个class，一个class也可以应用在多个页面元素上。我们也可以为同一个元素同时应用class和id，但要记住：在同一个页面上不能为多个元素指定相同的id。class和id可以选用字母或数字（a～z、A～Z、0～9）命名¹，但必须以字母开头。虽然有些浏览器对class和id名称的大小写不敏感，但为了今后便于调试，还是小心为妙。

三个合法的标识符：

两个不合法的标识符：

若曾编写过在未来相当长的一段时间内都要保持不变的文档，你就会发现在编写的过程中必须处处小心，让文档尽可能完美。

以出版行业为例，为了保证语言流畅简洁和内容的正确性，这本书曾被很多人修改编辑过。原因很明显：与网页在浏览器缓存中存在的时间相比，书籍在书架中停留的时间要长得多。所有这些预先的检查工作都是为了确保书籍在出版时的正确性（但愿出版后好运相伴）。

但是在同样的问题上，Web却没有此类的限制。每次用户来访，Web站点都从服务器将内容发送给访客。这样就意味着，即使在网站发布之后，你仍旧可以修改页面的内容或重新设计页面的样式，每个再次访问的用户都能够立即看到这些变化，而并不需要像图书这样，只有重印或再版的时候才有机会修改。自然，网站的不断改进会让人非常高兴，但这也会让那些签了固定合同的设计师感到些许郁闷。

虽然禅意花园也是一个网站，但在编写HTML的过程中却遇到了一些独特的挑战，让这个过程更像是写书而不是网站。若是在用户已经提交了设计之后再修改页面的HTML，那么就有可能破坏掉从前的设计，这也与禅意花园的最初目标相悖。即使修改的仅仅是页面中的文本，也会对文档以及文档中某块内容的大小造成影响，并有可能无法预知地改变某些作品的布局。这样看来，一旦发布之后再对禅意花园的HTML进行任何结构或内容的修改都可能是有害且不可接受的，所以在编写HTML时就需要尽可能小心准确。

我们应该把禅意花园的HTML结构看作像书一样持久不变。虽然有数不清的可改善之处，但禅意花园的HTML结构仍然没有过大的修改。文档的内容可能会略加改进，但最基本的HTML元素以及文档结构则不会，就像被刻在石头上一样¹。

注释：¹ 禅意花园现在的HTML代码已经与接下来列出的有所不同，但在文档结构上仍没有任何改变。——译者注

为了便于本书后面章节参考，下面几页中完整地列出了禅意花园的HTML源代码。你也可以访问禅意花园站点（www.csszengarden.com），并在浏览器中查看源文件来得到这份代码。关于查看源文件的步骤，在大多数浏览器中都差不多：从工具条中选择View > View Source或其他最类似的选项即可。或者也可以通过禅意花园页面中的下载源代码链接得到其HTML文件。本书列出的代码删除了原版本中的注释，而改为在边栏对某些段落或条目给出了一些注解。若想看到原版本中的注释，请直接访问禅意花园站点。

指定用来标识文档类型的DOCTYPE是每个页面都必需的。请参考本章前面的“选择DOCTYPE”小节。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

在全球化的环境中（例如Web），为文档指定字符编码也极其重要。请参考本章前面的“指定语言和字符集”小节。若想了解更多关于字符编码的内容，请参考Joel Spolsky在Joel on Software网站上的文章：“The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!)”（www.joelonsoftware.com/articles/Unicode. html）。

　<title>css Zen Garden: The Beauty in CSS Design</title>

这个空的script元素用来避免Windows下IE中可能出现的文档样式短暂失效问题¹。该问题在Blue Robot网站中的“Flash of Unstyled”一文（www.bluerobot. com/web/css/fouc.asp）中有详细介绍。

注释：¹ 指在IE加载页面时的一个缺陷：首先显示出没有应用任何样式的文档，随后页面闪烁一次并重新显示应用了样式的文档。——译者注

这种方式用来让Netscape Navigator 4浏览器不要加载并应用外部样式文件，而是直接显示出简单的、未经CSS修饰过的HTML文档²。就目前来讲，这种方法已经不是那么必要了³。若想了解更多相关内容，请参考Eric Meyer on CSS网站中的“Tricking Browsers and Hiding Styles” 一文（www.ericmeyeroncss.com/bonus/trick-hide.html）。

注释：² 因为Netscape Navigator 4对CSS的支持非常不好，加载了CSS不但不能起到修饰页面样式的作用，甚至反倒会让页面难以辨认。——译者注

注释：³ 因为目前Netscape Navigator 4浏览器已经近乎绝迹。——译者注

　　@import "sample.css";

应用到body元素上的id叫做“CSS签名（CSS Signature）”。借助CSS签名的帮助，用户自定义的样式表可以覆盖页面中的部分甚至所有CSS样式。请参考“[css-d] CSS signatures”（http://archivist.incutio.com/viewlist/css-discuss/13291）。

将页面中的元素按照逻辑上的相关程度分开放置于不同的div元素中，可以让后期应用样式变得更加简单灵活。

　　　<h1><span>css Zen Garden</span></h1>

　　　<h2><span>The Beauty of <acronym title="Cascading Style Sheets">CSS</acronym> Design</span></h2>

　　　<p class="p1"><span>A demonstration of what can be accomplished visually through <acronym title="Cascading Style Sheets">CSS</acronym>-based design. Select any style sheet from the list to load it into this page.</span></p>

　　　<p class="p2"><span>Download the sample <a href="zengarden-sample.html" title="This pageÕs source HTML code, not to be modified.">html file</a> and <a href="zengarden-sample.css"title="This pageÕs sample CSS, the file you may modify.">css file</a></span></p>

让事情简单点，再简单点！虽然那些准备为禅意花园提交设计的朋友都应该知道如何下载这些文件（在链接上右键单击，选择Save As¹），但这个方法却不是每个想要学习的人都了解的。仍不时有电子邮件询问如何下载这些文件，这也从一个侧面证明了你的目标群体中总是会有一些无法预料到的成员。

注释：¹ 中文版浏览器中该选项一般是“另存为”。——译者注

事后诸葛地考虑，若是#intro div在这里结束，并将#preamble²置于#supportingText中，页面的结构无疑将变得更有意义。#preamble的内容在逻辑上更适合文章正文，而不是文章的介绍部分。从样式或布局的角度考虑，这样的改变也会增强其灵活性。

　　　<h3><span>The Road to Enlightenment</span></h3>

　　　<p class="p1"><span>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible <acronym title="Document Object Model">DOM</acronym>s, and broken<acronym title="Cascading Style Sheets">CSS</acronym>support.</span></p>

　　　<p class="p2"><span>Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the <acronym title="World Wide Web Consortium">W3C</acronym >, <acronym title="Web Standards Project">WaSP</acronym> and the major browser creators.</span></p>

从语法和标记上都能看出来，W3C是一个技术上的简称，而不是取首字母的缩写词。事实也正是如此，且HTML中专门为声明简称定义了abbr元素，虽然IE并不支持这个元素，但我们也可以使用IE支持的acronym元素来代替。

　　　<p class="p3"><span>The css Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the (yet to be) time-honored techniques in new and invigorating fashion. Become one with the web. </span></p>

　　　<h3><span>So What is This About?</span></h3>

　　　<p class="p1"><span>There is clearly a need for <acronym title="Cascading Style Sheets">CSS</acronym> to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing th-at has changed is the external .css file. Yes, really.</span></p>

　　　<p class="p2"><span><acronym title="Cascading Style Sheets">CSS</acronym> allows complete and total control over the style of a hypertext document. The only way this can be illus-trated in a way that gets people excited is by demonstrating wh-at it can truly be, once the reins are placed in the hands of those able to create beauty from structure. To date, most examp-les of neat tricks and hacks have been demonstrated by structurists and coders. Designers have yet to make their mark. This needs to change.</span></p>

我们并不知道“结构至上者（structurist）”描述的是哪一类人。在当初编写页面内容时似乎有一种感觉，那就是我们应该把那些编写代码的人和那些注重于HTML结构的人区别开来。现在看来，其原因已经无从知晓了。

　　　<h3><span>Participation</span></h3>

　　　<p class="p1"><span>Graphic artists only please. You are modifying this page, so strong <acronym title="Cascading Style Sheets"> CSS</acronym> skills are necessary, but the example files are commented well enough that even <acronym title="Cascading Style Sheets">CSS</acronym> novices can use them as starting points. Please see the <a href="http://www.mezzoblue.com/zengarden/resources/" title="A listing of CSS-related resources"> <acronym title="Cascading Style Sheets">CSS</acronym> Resource Guide</a>for advanced tutorials and tips on working with <acronym title="Cascading Style Sheets">CSS</acronym>.</span></p>

　　　<p class="p2"><span>You may modify the style sheet in any way you wish, but not the <acronym title="HyperText Markup Language">HTML</acronym>. This may seem daunting at first if you’ve never worked this way before, but follow the listed link s to learn more, and use the sample files as a guide.</span></p>

’表示什么？它是一个起到替代作用的字符编码，表示印刷中用到的朝向左边的单引号（'），而不是我们常用的普通单引号（'）。Web页面能够显示很多种印刷符号和习惯用法，可在任何可能的地方使用。请参考A List Apart上的“The Trouble With EM ‘n EN (and Other Shady Characters)” 一文（http://www.alistapart.com/articles/emen）。

　　　<p class="p3"><span>Download the sample <a href="zengarden-sample.html" title="This pageÕs source HTML code, not to be modified.">html file</a> and <a href="zengarden-sample.css"

　　　title="This pageÕs sample CSS, the file you may modify.">css file</a> to work on a copy locally. Once you have completed your masterpiece (and please, don’t submit half-finished work) upload your .css file to a web server under your control. <a href="http://www.mezzoblue.com/zengarden/submit/" title="Use the contact form to send us your CSS file">Send us a link</a> to the file and if we choose to use it, we will spider the associated images. Final submissions will be placed on our server.</span></p>

由于提交量过多，对提交作品的要求有所改变。在提交作品之前，请参考mezzoblue.com上最新版本的“Submission Guidelines”（www.mezzoblue.com/zengarden/submit/guidelines）。

　　　<h3><span>Benefits</span></h3>

　　　<p class="p1"><span>Why participate? For recognition, inspiration, and a resource we can all refer to when making the case for <acronym title="Cascading Style Sheets">CSS</acronym>-based design. This is sorely needed, even today. More and more major sites are taking the leap, but not enough have. One day this gallery will be a historical curiosity; that day is not today.</span></p>

　　　<h3><span>Requirements</span></h3>

　　　<p class="p1"><span>We would like to see as much <acronym title="Cascading Style Sheets, version 1">CSS1</acronym> as possible. <acronym title="Cascading Style Sheets, version 2">CSS2</acronym> should be limited to widely-supported elements only. The css Zen Garden is about functional, practical <acronym title="Cascading Style Sheets">CSS</acronym> and not the latest bleeding-edge tricks viewable by 2% of the browsing public. The only real requirement we have is that your <acronym title="Cascading Style Sheets">CSS</acronym> validates.</span></p>

目前已经有了一些方法，在使用某些高级CSS效果的同时，也略微减少了专为低版本浏览器设计的样式，这些将在第7章中介绍。在一些设计中，该方法已经被付诸实践，所以这个对浏览器支持的需求或许可以改为“使用自己的最佳判断”。

　　　<p class="p2"><span>Unfortunately, designing this way highlights the flaws in the various implementations of <acronym title="Cascading Style Sheets">CSS</acronym>. Different browsers display differently, even completely valid <acronym title="Cascading Style Sheets">CSS</acronym> at times, and this becomes maddening when a fix for one leads to breakage in another. View the <a href="http://www.mezzoblue.com/zengarden/resources/" title="A listing of CSS-related resources">Resources</a> page for information on some of the fixes available. Full browser compl-iance is still sometimes a pipe dream, and we do not expect you to come up with pixel-perfect code across every platform. But do test in as many as you can. If your design doesn’t work in at least IE5+/Win and Mozilla (run by over 90% of the population), chances are we won’it accept it.</span></p>

在将某个作品添加到禅意花园之前，通常都要在几个不同的浏览器中检查一下，设计者自然也应该对此项检查负责。但若你还是发现某个作品的样式不正常，那么也不必太过计较——毕竟作品的征集是全世界范围内的，设计者可能接触不到您所用的浏览器或操作系统。

　　　　<p class="p3"><span>We ask that you submit original artwork. Please respect copyright laws. Please keep objectionable material to a minimum; tasteful nudity is acceptable,

　　　　outright pornography will be rejected.</span></p>

　　　　<p class="p4"><span>This is a learning exercise as well as a demonstration. You retain full copyright on your graphics (with limited exceptions, see <a href="http://www.mezzoblue.com/zengarden/submit/guidelines/">submission guidelines</a>), but we ask you release your <acronym title="Cascading Style Sheets">CSS</acronym> under a Creative Commons license identical to the <a href="http://creativecommons.org/licenses/sa/1.0/"title="View the Zen GardenÕs license information.">one on this site</a> so that others may learn from your work.</span></p>

　　　　<p class="p5"><span>Bandwidth graciously donated by <a href="http://www.dreamfirestudios.com/">DreamFire Studios</a>. Get the <a href="/book/"> Book </a>!</span></p>

　　　　<a href="http://validator.w3.org/check/referer" title="Check the validity of this site’s XHTML">xhtml</a>  

#footer中的这些链接是个列表……难道不应该用ul来组织吗？这是个反问句——这些链接确实应该包含在某个列表元素中。

　　　　　<h3 class="select"><span>Select a Design:</span></h3><ul>

　　　　　<li><a href="/" title="AccessKey:a" accesskey ="a">Sample #1</a> by <a href="http://www .mezzoblue .com/" class="c"> Dave Shea</a>  </li>

在禅意花园最初版本的HTML代码中，包含链接的元素是span，而不是现在的li。但在使用某些自动化的工具或服务（例如HiSo-ftware的Cynthia Says，www.cynthiasays.com）检查页面的可访问性时会导致检测失败。每个链接结尾部分的那个额外的 ¹就是为了尝试解决这个问题而添加的，但事实证明这样做只是徒劳。好在我们很快悬崖勒马，用列表元素代替了原本的span，但这些 却在不经意间流传了下来²。

注释：² 在最新版本的禅意花园HTML代码中，该 已经被移除。——译者注

　　　　　<li><a href="/" title="AccessKey: b" accesskey="b">Sample #2</a> by <a href="http://www.mezzob-lue.com/" class="c">Dave Shea</a>  </li>

　　　　　<li><a href="/" title="AccessKey: c" accesskey="c">Sample #3</a> by <a href="http://www.mezzo-blue.com/" class="c">Dave Shea</a>  </li>

　　　　　<li><a href="/" title="AccessKey: d" accesskey="d">Sample #4</a> by <a href="http://www.mezzo-blue.com/" class="c">Dave Shea</a>   </li>

　　　　　<li><a href="/" title="AccessKey: e" accesskey="e">Sample #5</a> by <a href="http: //www .mezzob-lue.com/" class="c">Dave Shea</a>   </li>

　　　　　<li><a href="/" title="AccessKey: f" accesskey="f">Sample #6</a> by <a href="http: //www.mezzob-lue.com/" class="c">Dave Shea</a>  </li>

　　　　　<li><a href="/" title="AccessKey: g" accesskey="g">Sample #7</a> by <a href="http: //www.mezzo-blue.com/" class="c">Dave Shea</a>  </li>

　　　　　<li><a href="/" title="AccessKey: h" accesskey="h">Sample #8</a> by <a href="http:// www.mezzo-blue.com/" class="c">Dave Shea</a>  </li>

快捷键（accesskey）是一项起辅助作用的技术，用来让浏览者更加容易地在页面中导航，但快捷键也并非是完美无瑕的。请参考WATS.ca上的“Using Accesskeys-Is it worth it?”这篇文章（www.wats.ca/articles/accesskeys/19）。

　　　　<h3 class="archives"><span>Archives:</span></h3>

　　　　　<li><a href="/" title="View next set of designs. AccessKey: n" accesskey="n"> <span class="access-key">n</span>ext designs »</a> </li>

用这种方式在作品之间导航似乎非常可笑，现在我们已经有了100多件作品，将这个链接指向一个外部的列表或许会更加有效（www.mezzoblue.com/zengarden/alldesigns）¹。但很多人都没注意到这个链接，他们以为禅意花园只有8个作品，且从来没有看到过其他作品。不要犯同样的错误哦！

注释：¹ 在最新版本的禅意花园HTML代码中，该链接已经指向了该站点。——译者注

　　　　　<li><a href="/" title="View previous set of designs.AccessKey: p" accesskey="p">« <span class="accesskey">p</span>revious designs</a></li><li><a href="http://www.mezzoblue.com/zengarden/alldesigns/" title="View every submission to the Zen Garden. AccessKey: w" accesskey="w">Vie<span class="accesskey">w</span> All Designs</a></li>

　　　　<h3 class="resources"><span>Resources:</span></h3>

　　　　　<li><a href="http://www.csszengarden.com/001/001 .css"title="View the source CSS file for the currently-viewed design, AccessKey: v" accesskey= "v"><span class="accesskey">V</span>iew This Design’s

　　　　　</a></li>

虽然“查看源代码”的方法一直存在于各个浏览器中，但还是有不少的初学者发邮件询问如何查看某个作品的CSS文件。所以很快我们又添加了这个链接。

　　　　　<li><a href="http://www.mezzoblue.com/zengarden/resources/" title="Links to great sites with information on using CSS. AccessKey: r"accesskey="r"><acronym title="Cascading Style Sheets">CSS</acronym> <span class="accesskey">R</span>esources</a></li>

　　　　　<li><a href="http://www.mezzoblue.com/zengarden/submit/" title="Send in your own CSS file. AccessKey: s" accesskey="s"><span class="accesskey"> S</span>ubmit a Design</a></li>

　　　　　<li><a href="http://www.mezzoblue.com /zengarden/transl ations/" title="View translated version sof this page. AccessKey: t" accesskey="t"><span class="accesskey">T</span> ranslations</a></li>

这些完全空白的div和span可以用来在页面上添加原本不在其中的图片，稍后可以看到一些实例。我们可以将其看作一类可重用的img元素。

设计师Andy Clarke为禅意花园HTML结构创建了一个图形化的示意图（图1-1-14）。这个示意图清晰地显示了各个元素之间的嵌套关系，如果想学习禅意花园的HTML结构，或是想为禅意花园设计新的样式，那么这个图示无疑是个很好的开始。请参考Clarke的说明文档“3D CSS Zen Garden”（www.stuffandnonsense.co.uk/archives/3d_css_zen_garden.ht ml）。

在W3C的“5 Selectors”（www.w3. org/TR/CSS21/selector.html）中可以了解到更多关于CSS2选择器的内容。

从一开始，我们编写这套HTML的一个主要目标就是为各个设计的变化提供足够的灵活性支持。为禅意花园的HTML提供尽可能多的额外信息是非常必要的，这样才能让页面中的每个元素都能依照需要被修改和调整。如果没有这些额外的信息，选择页面中的某个特定元素将变得很难，甚至不可能实现，虽然使用后代选择器（descendant selector）可以完成某一类元素的选择，例如：

但按照上述CSS的定义，#quickSummary中所有的p元素都将变为红色。如果我们只想修改#quickSummary中的第二个段落，那又将如何实现呢？除了为#quickSummary中的所有段落都添加独一无二的class之外，我们只能选用更加高级的CSS2选择器：

#quickSummary > p + p {

#quickSummary > p + p + p {

这段代码似乎已经有些难以理解了。第一条规则将子选择器（child selector）和邻接选择器（adjacent selector）组合了起来，表示的含义为：“若某个段落元素¹紧跟着另外一个段落元素出现，且该段落元素还定义于#quickSummary中，则为其应用该样式”。这样就意味着除了第一段之外，#quickSummary中所有的其他段落都将应用该样式。接下来又用第二条规则覆盖了第一条中的定义，为紧跟着两个或两个以上段落后出现的段落恢复了其默认样式，当然这些段落也必须同样在#quickSummary中，即除了前两段之外，#quickSummary中所有的其他段落都将应用该样式。

天啊！只是要选择一个元素而已，居然弄出了这么冗长的代码。谢天谢地，在CSS3中我们有了一个简单的方法：

#quickSummary p:nth-child(2) {

但是也别高兴得太早了，有件事情你必须知道：这两种方法IE都不能支持¹！除非你有什么实在特殊的理由，以至于可以放弃绝大多数浏览者，否则你可以先把这两种方法忘掉了。IE的使用者比例可能将在几年之后有所变化，但在本书出版时它的市场占有率仍在90%左右。

注释：¹ 最新发布的IE7已经支持了子选择器和邻接选择器。——译者注

上面这一长段讨论其实只是为了选择到一个简单的元素。从这段讨论中我们也可以明显地看出，为了保证灵活性，给元素添加额外class是非常必要的。由于类似的原因，我们也添加一些额外的span标签。在页面的段落中声明内部元素，也就意味着在设计时我们可以为这些元素应用某些额外的样式。

这些额外的span标签还有个用途，那就是图像替换。这是为设计禅意花园的HTML时CSS设计领域中流行的一种全新的方法所准备的。让我们举例说明这个方法：若你想用图片替换页面上的某一个标题（例如一个h3标签）中的文字，那么就必须用两个标签（一个h3和一个span）将文字包围起来。

然后我们可以用display: none之类的规则将span中的文字隐藏起来，并为h3应用背景图像，这样一个带有丰富图形效果的标题就做好了。因为禅意花园中所有的元素中都包含了这样的一个span，所以这种形式的扩展也就非常易于应用。

但为什么宁可要这么麻烦，也不使用同样能实现该功能的img元素呢？同样也是出于灵活性方面的考虑。若是将图片的地址直接写入到HTML中，就不可能只通过替换样式文件让页面来个“大变脸”了。但这个图像替换的方法也存在着一些问题，将在本书稍后部分介绍。

这些决定及实现方式都是基于当时大家认同的最佳设计方案。与最近出现的一些技术相比，这种实现方式的代码量偏多，现在回顾起来，不难发现很多可改进的地方。

在W3C的“Selectors”（www.w3. org/TR/css3-selectors）中可以了解到更多的关于CSS3选择器的内容。

OPAL Group的SelectORacle（http://g allery.theopalgroup.com/selectoracle）是一个很不错的CSS选择器分析工具。在分析复杂CSS时可能会助你一臂之力。

如果灵活性是设计的要求，那该如何考虑呢？一些项目的确需要足够灵活的样式选项，所以一个常见的问题就是，如何在设计HTML时保证其拥有最大的灵活性。

若具有足够的判断力，那么使用禅意花园类似的方法将会是一个不错的开始。建议从一些最基础的HTML元素（段落、标题、列表等）开始定义页面的内容。在必要时添加额外的作为逻辑上容器的div，并为其指定唯一的id。如果需要的话，适当且最小限度地为其中的元素指定class。禅意花园中用到的这些span基本上不是必要的，除非有极特别的需求，否则不要这样使用。

禅意花园发布不久，一种新的、不需要额外span的图像替换方法横空出世，因此HTML文档中的大部分span自然也受到了冷落。98%的提交作品中都没有使用这些额外的span，所以基本上可以认为这些span是多余的。除了被某些设计师用于实现一些极为特殊的视觉效果之外，文档结尾部分的那些空的div和span也没有太大的用处。

对于其他网站来说，文档结尾部分的那些空的div和span并没有什么意义。但在禅意花园中它们却有存在的必要，即为了实现最大的灵活性。因为并不是每一个网站都需要如此多样的设计，所以在为这些网站编写HTML时也不必考虑这些。

若你决定以禅意花园的HTML为基础开始编写页面（我们祝愿你的老板会同意你这样做），请记住基于标准的设计中很重要的一个目标就是避免不必要的元素。偶尔使用div元素将一些逻辑上相关的元素包围起来并没什么问题，但若是把页面中的每一个段落或标题都用span元素包围起来，那么就有些过度了。关于如何正确、合理地组织文档结构，将在本章稍后讨论。

禅意花园的主要目的是为了演示基于标准进行设计所能实现的效果。通过浏览这些种类繁多的作品，访客也能体会到CSS所提供的强大的灵活性。就其自身来讲，CSS是一种用来增强某种基本标记语言（例如HTML、XHTML或XML）的设计性语言。CSS1在1996年被提出，很快W3C又在1998年提出了CSS2标准。各种浏览器也开始逐步支持这两种标准，到了1998年，Web设计师普遍采用链接外部CSS文件的方式来部分地控制页面的样式。当时几乎所有人都这样做，直到四五年之后。

为什么设定字体时我们都会选用CSS？原因很简单，能在所有浏览器中有一致表现的，也几乎只有字体这一种CSS设定了。虽然效果并非总是如此理想，但使用CSS定义字体还有一种非常独特的优势，这种优势让很多设计师最终转向了CSS。

这个优势在于，某个单一的CSS文件可能被站点中所有的文档所引用。若在这个CSS文件中声明了字体，那么所有的页面都会应用这一设定。若你想对字体或字号进行修改，那么只要更新一下该CSS文件中的定义即可，站点中所有的页面都会立即被更新——大功告成，就这么简单。

相对于从前的<font>标签，这种方法有了明显的进步：那个声名狼藉的<font>标签是文档级别的、用于设定文字样式的元素，使用时需要将其应用于站点中的每一个实例上。最终几百个页面中的每一页上都可能会有七八个<font>标签，若是这时想修改，想必过程一定非常耗时且痛苦吧。

这个样式方面的分离只不过是CSS所带来的诸多优势中的冰山一角。一个简单的重新设计要求就让实现的过程有了数量级上的简化。从以前的方案迁移过来也同样简单：无须在众多文件中替换成千上万个<font>标签，只要将HTML内容复制过来，然后声明相应的CSS即可。

但<font>标签还是被使用了很长时间。一些较老的浏览器对比较高级的CSS样式的支持并不好，这些浏览器过了几年之后才逐渐消失。为了照顾这些浏览器，在这段时间之内使用CSS还是有一些不切实际。

到了2000年之后，浏览器对CSS的最小支持普遍有所提高，已经足够实现完全的CSS布局了。虽然当时浏览器对CSS的支持还不甚完美（现在也依旧如此），但这已经足够让CSS更进一步发挥作用，而不只是用来控制页面的字体。在经过了几年通力合作之后，全球范围内的Web设计师给出了一些足够可靠的使用CSS进行页面布局的方法，包括使用浮动（floating）或绝对定位模型进行布局，以及对非标准浏览器的一些临时补救措施等。

这就是我们现在所面对的情况。直到2005年，仍有一些浏览器在解析1998年就已经出台了的CSS2标准时还存在问题。但即便如此，主流浏览器对CSS的支持在大体上已经足够完善。很多网站都转向使用CSS且基于标准进行设计，设计者也自然享受到了基于标准所带来的好处。

接下来让我们简要总结一下这些好处。既然您已经在阅读本书，那么很可能您已经认识这些好处。如果还想更深入地了解一些细节，那么请参考本书结语中的推荐阅读列表。

基于Web标准开发的好处

基于Web标准的设计要同时使用CSS和结构化HTML。二者相互依存，很难将其带来的优势分割开来。我们只有用HTML结构化地描述文档的结构，同时使用CSS展现文档的样式，才会从Web标准中真正受益。

禅意花园的各种不同设计证明，只要为其应用不同的CSS，HTML页面的布局样式就可以被随心所欲地修改。CSS正是一种用来展现设计的方法，我们只需将其与原始的HTML文档结构关联起来即可。虽然CSS依赖于HTML结构并建立于其上，但却能够相对独立地为其提供丰富的表现样式。

W3C的HTML验证器在W3C的“Validate Your Markup”页面中（http://validator.w3.org）。

只有使用了外部的CSS文件，才会享受到节省带宽带来的好处。我们可以将CSS嵌入到HTML文档中，但这样的话浏览器将不能像对待外部CSS文件一样对其进行缓存，你也会由此失掉一些缓存带来的好处。

但非常重要的一点是，HTML文档必须有一个良好组织且合法的结构。一个非法的HTML文档会在浏览器中呈现的样式可能是不可预料的，且可能会导致很多本可以避免的麻烦。若CSS布局出了问题，那么首先要检查的就是HTML文档的合法性。

将样式相关的标记从HTML移至CSS之后，通常文件的大小也会降低。很有可能出现的情况就是，一张混杂着内容和表现的30KB大小的HTML文档，完全可以用一个10KB的HTML加上一个10KB或不到10KB的CSS文件代替。

除了将在最初降低文件大小之外，CSS文档还能够被缓存于浏览器中。考虑如果要添加另外一些页面，每一个都有30KB，那么用户要浏览网站中的每个页面都必须从服务器下载30KB的内容。每一次浏览都是如此，无论页面中实际有多少内容。若是访问了这样站点中的10个页面，则用户需要下载300KB的内容，而其中大部分都是不必要的。

但若是将表现样式移至单独的CSS文件，那么不仅最终的页面大小将降低，每个页面共用的CSS文件也将不必被重复下载。这样用户访问某张页面时只要下载10KB的页面内容即可，而另外10KB的CSS文件可以直接从浏览器的缓存中得到。前面例子中的300KB的总下载量在这里将减至110KB。

无论对服务器还是对最终用户来讲，这种文件大小的降低都有非常显著的效果。当站点的流量非常大时，这些省下来的字节将极大地降低你的带宽需求。运动主题的ESPN网站从2003年早些时候开始切换至CSS，这个数字可能并不准确。在对ESPN.com的开发者进行的一次采访中（采访内容最初发布在网景公司的DevEdge网站上。该网站目前已经停止运营，现在请参考这个地址：www.mikeindustries.com/blo-g/archive/2003 /06/espn-interview），该开发者估计ESPN网站每日可以由此节省大概2TB的流量！这就意味着ESPN在无需任何额外的硬件投资情况下就可以支持更多的并发访问人数，且响应速度也将有所提高。的确是一本万利！

实际上，一个正确、合理组织的页面甚至并不需要CSS来辅助呈现。在某些场景中这一点非常重要：当你为一个足够大的1024×768的屏幕设计网页时，将有大量的空间可以随意发挥；但对于一个小巧的、240×320的掌上电脑来说，情况却大为不同。

W3C的 “ 7 Media Types” 页面（www.w3.org/TR/CSS21/media.html）中介绍了一些CSS媒介类型的概要信息。

即使没有了CSS的修饰，原始的文档内容也十分易读：超链接仍然可以点击，表单元素也可以正常使用。无需任何额外工作，结构化的HTML文档就自动拥有在移动设备上正常显示的能力，这意味着可以免费得到网站的移动设备版本。

但CSS仍旧为多种显示设备提供了支持——你可以为某种显示设备指定不同的、专有的CSS样式。计算机屏幕、移动设备（例如移动电话）以及打印机都有它们自身的媒体类型（media type），且对更多的媒体类型的支持也正在研发中。

专门用于打印机设备的CSS宣告了那个小小的“打印该页面”链接的死亡。只要专门为打印机编写一个CSS文件，网站中的任何页面都可以直接打印出来。这个CSS文件能够有选择地格式化一些内容。隐藏另外一些条目，并专门根据打印机设备的特性进行适当的优化，以期得到最佳的打印效果。由于打印机与显示器相比所受到的限制更多，所以专门为打印机设备设计的CSS将变得非常有用。

理论上总会有这么一天，所有的设备在显示网页时都将依赖于自己的媒介类型。但现状却是，除了屏幕之外，很少有人使用其他类型的显示设备。对于移动电话来说，CSS的控制范围一般只局限于文本大小和颜色上；而用语言进行“浏览”的浏览器，即“听觉”设备类型还尚未出现。

这是个先有鸡还是先有蛋的问题。因为除非已经拥有了足够多的内容，否则该设备将不会得到更多的CSS支持，但同时又没有人为一些甚至并不存在的设备编写内容。当然，这种状态也在缓慢改进中，或许某一天将出现一个专为移动电话和PDA编写的移动版本的禅意花园。

正确、合理地组织的HTML本身就具有良好的可访问性。如果用有效的标记编写页面，那么该页面的90%内容都将符合W3C的“内容可访问性指导建议（content-accessibility guidelines）”。

和那种只等同于文本的内容，还有多个版本的、维护起来极其痛苦困难的网站说再见吧，让我们来拥抱这种“一次编写，到处适用”的页面编写方式！在大多数情况下，即使是那些视力不佳而需要用屏幕阅读器（屏幕阅读器将朗读出网站的内容）的用户也同样可以访问你的站点，而这并不需要什么额外的工作。

W3C的“内容可访问性指导建议（WCAG）”可以从这个地址访问：www.w3.org/TR/WAI-WEBCONTENT。

当然，这其中也有一些需要注意的地方。本章稍后部分将介绍一些可能由CSS引入的可访问性问题。

作为一门专注于文档表现样式的语言，CSS提供了很多极为丰富的、全新的功能，而这些功能是HTML所无法企及的。例如对行间距的精确控制（line-height属性）、对元素之间的距离的精确控制（margin和padding属性）和指定元素在页面中的绝对/相对位置（absolute和relative属性）等。

如果你曾受限于基于表格的布局所强加的网格，那么使用CSS进行定位则可以将表格一脚踢开，让你随心所欲地将元素置于页面中的任何位置上。如果你曾期待能对元素的背景有更加精确的控制，而不是只能选择某种颜色或是某个单一、重复的背景图片，那么CSS所提供的background属性将给你带来一些小小的启示。

Bobby（http://bobby.watchfire.com/）是一个在线的页面可访问性检查工具。例如Cynthia Says （www.cynthiasays.com）和WebAIM’s Wave （http://wave.webaim.org/）等一些其他工具也提供了同样的功能。

没有任何网站是完美的，包括禅意花园在内。虽然现在亡羊补牢已经太晚了，但过去几年中相关讨论所揭示出的一些额外的知识却仍旧值得分享。

编写完成之后，我们使用Bobby¹对禅意花园的HTML进行了一次快速的可访问性检验，并确认它已经满足了大多数可访问性要求。当然，在正式发布之前还必须修复由Bobby发现的一些小问题。禅意花园页脚部分添加的“AAA²”链接也表明了该页面在设计时曾考虑过这个问题。

注释：¹ Bobby（http://webxact.watchfire.com/）是一个用来检查Web页面是否满足可访问性的软件。——译者注

注释：² 按照W3C对页面可访问性的分级，AAA是最高一级，达到该级别的页面即表示其通过了W3C最严格的可访问性检验。请参考：http://www.w3.org/TR/WAI-WEBCONTENT/#wc-priority-3。——译者注

真的考虑过么？似乎Bobby的检查并不是十分严格的。若熟悉W3C的“内容可访问性指导建议”（请参考本章前面部分的“更好的可访问性”小节），将会发现有些条款Bobby并不能检查。例如条款2.1，“在颜色不可用时，用户应该仍然能够得到那些由颜色传达的信息”，类似Bobby的软件无论如何也不能检查到这一点，特别是当信息和颜色被嵌入到图片中时。

实际上，在Bobby的网站上就有这样一段声明：

“可访问性在根本上还是由人决定的。带有各种不同程度残疾的人是否都能够有效地获取页面中的信息，才是可访问性问题的关键所在。Bobby仅仅是在提高页面的可访问性工作中的一步而已，而并不能保证其百分之百满足可访问性要求。”

这样，禅意花园的HTML源代码在理论上通过了所有有关标记的可访问性检查，但可访问性的要求还不止这些。有些条款甚至还对CSS有所限制，但一段时间之后，我们可以很明显地发现，一些作品并没有考虑到这些问题。考虑一下Fahrner图像替换（将在第4章中详细介绍）对可访问性的影响，我们很容易就能看出，任何一个自动化的可访问性检查软件都没法发现这个由CSS带来的问题。

从中学到的教训就是，在创建具有良好可访问性页面时，使用类似Bobby的自动化工具可以帮我们迈出良好的第一步。但“内容可访问性指导建议”还包含很多同等重要的条款，对于这些条款的检查却并不能由此类工具代劳。

一个比较独特的、由CSS导致的可访问性问题就是文本的可缩放性。在编写网页时，我们经常会倾向于选择较小的字号，以便能够一次在页面中显示更多的内容。总之，我们都清楚自己在设计时有多么的“寸土必争”，所以也很有理由相信网页中文本的字号仍将越变越小。

问题在于，很多人又恰好看不清低于某个字号的文字。例如某些人无法辨认12像素高的文字，在某些极端的情况下，甚至24像素也还嫌小。当然，在现在的低分辨率¹显示器的条件下，没有人会在开始设计时就选择24像素作为主要文字大小²。

注释：¹ 这里的“分辨率”指显示设备的单位长度/面积中像素点的数目，而并不是指屏幕整体“分辨率”（例如1024×768等）。——译者注

注释：² 在目前“Web 2.0”的浪潮中，很多网站也会反其道而行之，在正文中使用极大的字号，以方便用户把握其主要内容。但这样大字号的设计的主要目的并不是用来增强可访问性，而是考虑到了用户心理学。——译者注

幸运的是，当前所有浏览器都提供了内建的对文本进行缩放的机制。虽然不是所有的用户都知道如何使用，但对于那些知道的用户，这个功能却是无价之宝。但问题也随之而来：IE只能对用em或%为单位指定的文本进行缩放，若字号大小采用px设定，那么IE将对此无计可施。

对于这种情况，浏览器中内建的文本缩放机制将如鸡肋一般食之无味，字号的问题也仍然无法解决。但若是设计师不用px单位，那么就万事大吉了吗？或许是这样的吧，但在本书第5章中也介绍了一些完全不同的、使用em或%单位造成的问题。

即使文本大小在任何浏览器中都可以正常缩放，我们还是要考虑很多问题：作品自身必须允许缩放（图1-1-15）。听起来似乎很简单，但若是将固定大小的元素（例如一幅20像素高度的背景图片）和可变大小的元素（例如一段文本，用户将其原始大小14px改变为了24px）放在了一起，你将很快发现在进行文本缩放时，这个依赖于固定大小的设计将出乎意料地显示得一团糟。大多数禅意花园的设计都通过了文本缩放测试，其中的文本都可以被调整至很大的字号。

图1-1-15 即使图片以及区域的大小是不可变的，文本仍旧可被缩放

从中学到的教训就是，无论你将文本设置为多大，有些用户仍然想要设置得再大一点。所以我们要特别注意并清楚地认识到当用户对文本进行缩放时可能遇到的潜在问题，且我们需要在合理范围之内对该问题有所准备。

禅意花园是基于XHTML 1.1标准发布的。既然禅意花园的HTML代码通过了XHTML 1.1验证，有什么理由不选用XHTML 1.1来代替老版本的XHTML 1.0 Strict呢？

虽然如此，但XHTML却远远不止“完全将标签闭合”这一点要求。即使XHTML通过了验证且整篇文档都完全合法，若是不为其指定正确的MIME类型，从技术角度上说它仍不是一个真正的XHTML文档。

MIME是一种用来描述信息的标准，在这里介绍MIME的唯一原因就是XHTML的正确MIME类型为application/xhtml+xml。当然，也可以使用更加常见的text/html（HTML的默认值），但只有XHTML需要向下兼容的时候才应该这样做。千万不要把XHTML 1.1文档的MIME类型指定为text/html，XHTML 1.1文档始终应该拥有XML类的MIME类型。

为XML文档制定正确的MIME类型，就意味着已经以编程的方式改变了服务器发送的HTTP头部信息（通过.htaccess或httpd.conf文件）。如果您对上面这句话一头雾水，那也不是您的错。对于专注于设计的人来说，这些都是非常底层的技术问题，通常由服务器管理员来处理。

A List Apart网站中介绍了更多的XHTML及其DOCTYPE，可在www. alistapart.com/articles/doctype访问。

但即使已经为文档指定了正确的MIME类型，问题也远远没有结束。只有最新的浏览器才支持application/xhtml+xml，所以我们需要一个转换的方法，用来有选择性地发送合适的MIME类型，以便为那些较老版本的浏览器指定一个更加兼容的MIME类型。

此外，若指定了application/xhtml+xml MIME类型，将触发浏览器的XML解析过程。XML有一套自己的判断错误的方法，例如若文档中缺失了一个</p>标签，浏览器将停止解析并返回一条错误信息。发生错误的文档也不会被部分呈现在浏览器中，也就是说，在浏览器中将无法看到任何一段页面内容（图1-1-16）。XML文档必须有着良好的结构——必须这样，不允许有任何错误发生。

XHTML真的那么值得使用吗？毕竟XHTML的整体目标就是将HTML重构为一种XML的应用。所以若使用了XHTML却不按照XML格式编写，就显得有些奇怪了。XHTML所带来的优势却基本上并不存在，但理论上只有这样做才能称其为XHTML，application/xhtml+xml的MIME类型仍是必不可少的。即使不想使用application/xhtml+xml MIME类型也没有关系——很多世界上一流的Web设计师也同样毫不顾忌地将XHTML的MIME类型指定为text/html。不要因此而不安，只要避免使用XHTML 1.1并选择XHTML 1.0即可。同样，坚持使用HTML 4.01也可以帮助您完全避免这个问题——HTML 4.01使用更加宽容的text/html作为MIME类型。当然，在之后编写文档标记的过程中，仍旧可以遵循XHTML的规范。

从中学到的教训就是，XHTML看上去似乎很简单，但是一旦你开始深入到其中，将会发现前面等待你的却是一大团纠缠不清的问题。

在计算机行业中曾经有那么一段时间，若你想用非英语的语言写点什么（假设你并不在英语国家），则必须要靠其他软件的帮助才行。

谢天谢地，当前的软件在设计时都考虑了相当多的国际化问题。万维网中就能找到相当好的证据——非英语的网站数目正在一刻不停地快速增长。

为了能够让更多人了解，禅意花园鼓励志愿者将其翻译成各国语言（www.mezzoblue.com/zengarden/translations）。当各种各样的翻译版本出炉之后，问题也随之浮出水面：处理其他语言需要对字符编码有初步的了解，而翻译却更加类似一门艺术，而不是科学。

这两篇文章详细介绍了MIME类型相关的内容：其一在Web标准组织网站（www.webstandards.org/learn/askw3c/se p2003.html），其二在XML.com （www.xml.com/pub/a/2003/03/19/dive-into-xml.html）中。

关于字符编码的更多建议请参考“WaSP Asks the W3C”（www.webstandards. org/learn/askw3c/dec2002.html）这篇文章。

目前的操作系统都能够良好地处理非英语字符。但按照默认设定，最基本的Windows XP或Mac OS X安装并不包含对世界上所有语言的支持。但安装CD中都附带了语言包，加载了这些语言包之后，计算机即可正确显示多种非英语语言的字符。

能够看到文字不过是完成了一半的任务：只有在字符编码匹配时，将内容直接从源文档复制并粘贴至目标HTML文档才行得通。例如，使用shift_jis编码（日语）的文本将无法在utf-8编码（Unicode）的文档中正确显示。所以我们必须要保证当前编写的内容要与HTML文档的字符编码相匹配。

字符编码可以在服务器端设定，并作为网站中所有页面的默认配置。即使已经有了这些，仍需要在HTML文档中用meta标签再次指明字符编码：

禅意花园使用的字符编码是iso-8859-1，该字符编码中包含了大多数主要的欧洲语言。各种各样的翻译版本都使用了不同的编码，但事后才发现最好的选择却是统一的UTF-8。

UTF-8是一种Unicode，Unicode则是一种流行的国际性编码方案。使用UTF-8所带来的好处就是，不同字符集的多种语言，例如法语、日语、阿拉伯语和希腊语等，将能够共存于同一张页面中。

目前唯一阻碍UTF-8在Web中广泛应用的就是，一些古老的、没有考虑到国际化需求的服务器端软件以及页面开发工具并不支持UTF-8。目前的各种浏览器在处理UTF-8时都没有任何问题，所以用户这一端并不是问题所在——问题正是出现在服务器端。但在处理亚洲语言时，由于其需要极其复杂的字符集，UTF-8也将生成不必要的庞大文件。因此，若文档的主要语言是中文，那么指定一个更加明确的字符集可能会更好些。

从中学到的教训就是，考虑到UTF-8在处理多语言时的强大之处，若是相关服务器端软件和开发工具能够支持的话，我们应该尽可能地选择使用UTF-8编码。

因为翻译禅意花园属于自愿行为，所以翻译的质量也自然良莠不齐。以这些翻译版本所用语言作为母语的读者现在还时常提出建议和修改意见：显而易见的语法以及拼写错误很容易纠正，但对于词句给出的替代翻译将会变得难以抉择，毕竟仁者见仁，智者见智。

即使选择专业的翻译服务，不同语言之间也并不是可以直接互换的。同样的一个短语，却可以以不同的方式理解成不同的含义，因此如何选择就取决于翻译者的经验以及该语言所代表的文化背景。例如，短语“That will never fly”指的是一个馊主意，还是某架有缺陷的飞机？这种模棱两可的二义性可以借助上下文来澄清，但前提条件是翻译者正确地理解了上下文的含义。

与计算机语言相比，人类的语言显得非常“不精确”，所以关于翻译的问题始终存在。解决这个问题最值得信赖的方法就是遵从大多数使用这种语言的人的意见。但区域性的方言所带来的一些变化却对此雪上加霜（例如对于“颜色”这个单词，是使用美国式的color还是英国式的colour呢？），甚至大多数人的意见也很难统一。特别是若你不讲这门语言的话，那更是无从下手了！

从中学到的教训就是，翻译并不是个轻松的任务，想做到完美更是几乎不可能。所以结果就是，禅意花园愉快地接受了这个现实，并声明翻译上的差错是无法避免的，我们愿意忍受这些小小的不便。

除了起到演示的作用之外，禅意花园的价值还在于灵感的展现以及知识的分享。这是一把双刃剑，因为分享就意味着迟早有一天，人们希望得到的要超过你愿给出的范围。

从一开始，禅意花园的提交作品都遵循这样的协议，即作品的CSS应用创作共用许可协议¹，允许其他人在某个限制范围之内使用。但考虑到图像对于作品而言独一无二的重要性，其著作权仍完全保留给设计师。如果你想要基于某件作品进行创作，那么可以自由复制并修改其CSS，但若要使用作品中的GIF、JPE或PNG文件，或是要使用整个设计，则首先要征得原设计师的同意。

注释：¹ 关于创作共用许可协议以及其发布者—— 知识共享组织，可在其网站http://cn.creativecommons.org/中了解更多内容。——译者注

理论上，这样的版权规定既可以让别人参考、重用作品的部分CSS代码，以其达到学习的目的，也能够为作品的设计师保留足够的权力。禅意花园的本意是为了分享知识，所以这样的规定看起来也似乎非常完美。但实际上，却很难实现这样的理想。

有些站点同时使用并修改了禅意花园部分的图像和CSS，或是重用了一些设计上的元素，给人一种“似曾相识”的感觉。在一些情况下，我们也很难辨认某个网站是否抄袭了禅意花园的创意。还有一种情况是，某些设计中CSS起到了非常主要的作用（无论是否使用了图像），然而模仿者原封不动地照搬却让原作品的设计师感到极其无奈。

对于第二种情况，我们有什么办法呢？大多数情况下，我们会给抄袭者发送一封电子邮件，简单说明问题——因为大多数人都会尊重原作者的权利和意愿。但若是抄袭者并不是那么肯合作，我们也无计可施。毕竟创作共用许可协议的条款比较宽松，除非抄袭者直接使用了原设计的图像，否则我们并没有追索权。从技术角度上考虑，虽然会让很多设计师感到不快，但这类的重用却是完全合法的。

创作共用许可协议在侵权行为的定义上有一个漫长的灰色地带。对原有作品进行了多少的修改之后才能算作新作品？若最终作品与原作品完全不同的话，允许人们以原作品为基础并开始自己的创作吗？这些问题甚至在法庭上都会引起很大争论，所以目前也并没有一个完美的答案。

对于禅意花园来说，最理想的解决方案就是既让CSS公开，让别人有足够的参考资源，同时却不鼓励未经原作者允许就全盘或部分照搬其代码，甚至用于商业作品中。这里需要良好把握的就是尺度问题——过于自由会让设计师在提交作品时顾虑重重，而过于严格的保护也将影响到禅意花园建立的初衷。

除非彻底关闭禅意花园，否则将永远没有办法保证作品不被以与设计师初衷相反的方式“重用”。是否有版权协议保护，是发布创造性作品时自然要考虑的问题——这类作品非常容易被剽窃。这样的事情一直在发生——看看pirated-sites.com就知道了。

借助于每个浏览器中都内建的“查看源文件”功能，抄袭Web页面变得非常容易。但同时借助于引用记录以及搜索引擎，发现这类抄袭也较为容易。

在撰写本书时，彻底解决这个问题仍是遥遥无期。目前我们仍决定允许受限制地使用作品的CSS，并用创作共用许可协议保护，但却禁止将其用于商业用途。这并不是个完美的解决方案，但至少我们为此已经做出了努力。

禅意花园的CSS文件应用了By-Attribution Non-Commercial Share-Alike许可。Creative Commons网站中列出了该许可的全文：http://creativecommons. org/licenses/by-nc-sa/2.0。

从中学到的教训就是，无论应用了什么样的版权协议，还是会有一些人会无视这些条款，为所欲为地进行抄袭。所以解决方法就是选择某种有效的途径警告这些人，让其知道他们可以做什么，不可以做什么。

很多访问者都提出了建议，希望禅意花园能够做大些、做好些、做得与众不同、做得更有影响力，甚至是添加一些维生素C

只要是你能想到的建议，我们都收到过。下面就列举了一些建议。

为一张页面给出不同的CSS设计，这个想法非常好。但为什么不将一张页面扩展为一个完整的网站呢？这个网站可以通过内容管理系统（Content Management System，CMS）维护。这样也可以更好地反映出真实世界中网站的状况。

类似于CMS禅意花园的创意，为什么不为一个提供了真实且不断改变的商品的电子商务网站应用不同的CSS设计呢？CSS可以用于修饰购物车、商品列表、推荐商品等页面。

将文档的结构和表现样式分开是个很不错的目标。但为什么不更进一步，添加一个控制页面行为的JavaScript层呢？这一层增强禅意花园的表现能力，且同样也能与前两层彻底分开。

这个想法的创始者之一，Rares Portan提交了一个非常不错的示例作品（图1-1-17，www.csszengarden.com/javascript/）。随之也出现一些对这种增强做法优劣之处的讨论（www.mezzoblue.com/archives/ 2004/05/04/javascript_b）。

图1-1-17 一个带有JavaScript脚本的禅意花园设计作品，其特色在于页首移动的云彩

首先用最基本的标记语言编写内容，然后用CSS修饰其样式。那为什么不充分展现出CSS和基于XML的语言之间配合的潜力，而却只选用XHTML呢？

毫无疑问，这些主意都非常吊人胃口。其中很多都能给Web设计社区带来额外的宝贵资源。大多数情况下，这些想法的创始者都会收到正面的反馈与建议，人们都很乐于看到将这些想法付诸实现的示例站点。

但事实上，禅意花园只是专注于几个目标，也不能满足所有人的所有需求。从这一点考虑，前面那些建议就都意味着需要修改创建禅意花园的本意，这对那些已经参与进来的贡献者来讲是不公平的。

但创建一些新的网站来实现这些创意却是不错的想法。若能发明一种更好的捕鼠器，那就去做吧！一两个这样的站点随之而生，但却并没有维持太长的时间。关于为什么会出现这样的结果，每个人都有自己的想法，我们也不例外。

首先，为禅意花园设计作品非常容易。其难点在于设计技巧以及CSS编程知识，但作品却并不需要花费长达数周的时间来完成。为整个站点编写CSS将困难很多，特别是对于那些内容不停变化的站点来说。当设计师由此得到实际利益时，前面花费的时间自然物有所值。但若是不能，那么耗费大量时间也就自然成为制约这类网站发展的门槛。

其次，禅意花园最主要的目标已经实现。禅意花园的创办目的就是为了改变人们对基于CSS进行设计的理解，这个任务已经完成。既然CSS样式可以很容易地应用到一张页面上，那么也不难对其进行扩展，并将其应用到多页面网站中。

若你还是无法想象如何将CSS应用到多于一个的页面中，那么很多真实世界中基于标准设计的网站或许能够更好地证明这一点。目前，很多企业站点都转向了基于标准的设计，例如Wired News（www.wire d.com）、ESPN.com、Chevrolet（www.chevrolet.com）、AOL.com等。

从中学到的就是，人们非常需要一个编写各种各样网站时都能够遵从的、“放之四海皆真理”的标准。但这样的标准是没有的，相反，真实世界中的实例网站却是最好的学习对象，它们在阐明标准方面要远远好于禅意花园之类的演示站点。

Web设计的流程经历了戏剧性的变化，但优秀设计的原则从未改变过。无论是选用调色板，还是把握欣赏者浏览作品的顺序，或者合理有效地使用图形，亦或是管理页面相关的元素，传统设计中的关键之处在Web设计中同样重要。

这一章中将要介绍的作品能够阐明设计的关键之处，同时也会澄清当代We b设计师心中的一个疑虑：应该如何把握设计的流程。是首先在Adobe Photoshop中拟出设计的草图，然后转向到CSS中，还是一开始就直奔主题编写CSS代码？相信在阅读完这一章之后，您一定会有所收获。

Kevin Davis，设计师

www.csszengarden.com/028

简洁的设计，统一，象征手法

视觉作品是用来交流的。一个成功的作品将传递给欣赏者用语言无法描述的信息。作品应该能够唤起某种气氛和感情，体现独特的风格，并最终引起欣赏者的共鸣。

如同室内设计师将桌椅、柜台、油画组合成一间带有忧郁色彩的咖啡屋一样，在创建亚特兰蒂斯时，Kevin Davis也希望能够将文字和图像以类似的方式组合起来。Davis从相片和调色板入手，将各种元素不断组合直至满意。然后将设计好的作品付诸于CSS实现。

除了充满细节的页首部分之外，亚特兰蒂斯给人的第一印象就是其相对的简洁性。通过将相片元素和令人不可思议的简单布局结合起来，Davis用一种少见的方式将复杂和简洁统一了起来。

禅意花园自身的HTML结构导致了很多平庸的设计都显得方方正正，过于“简洁”（图2-1-1A～图2-1-1C）。但这并不是这些作品的错，列出它们只不过是为了说明问题而已。

这些作品之所以显得平庸，是因为作者有一个常见的误解：这些作品的设计者都不是传统观念中图形设计师，所以在创意方面自然略显欠缺。当然，纠正这个错误的观点也正好是禅意花园的主要创办目的之一。

亚特兰蒂斯的出现无疑是对此类疑虑的一个辛辣嘲讽，它用事实证明了简洁并不一定就等同于糟糕：当您一次又一次看到同一件东西的无数种样子之后，将很快感到厌倦。一餐中同时品尝马铃薯泥、烤马铃薯和薯片，再好的东西也将变得没什么新意。火鸡配一些马铃薯泥（或是豆腐）才是一顿简单却美味的晚餐。

也正是在这种情况下，这样一个低调、简洁的设计才会显得如此成功。毕竟内容决定了设计，若是内容本身就十分复杂，且足够吸引浏览者注意的话，那么也没有必要为其添加过多的修饰。

若想设计一个极其精彩且简洁的作品，从另一个角度看

即使对于专家来说也不是一件容易的事。当设计元素很简单时，浏览者也将用更挑剔的目光检阅页面的各个角落。这时每个元素都会显得格外重要，所以在这种情况下，只有对细节的良好把握才能让作品从平庸中脱颖而出。

若想学习如何恰到好处地使用设计元素，那么你定会从研究亚特兰蒂斯强大、简洁的布局中受益非凡。若我们移除页首的图像，那么其简洁性不言自明（图2-1-2）：中间为主要的内容区域，左边围绕着一个略小的菜单。

在亚特兰蒂斯中，正文部分的文字按照比例来讲要远大于菜单部分的文字，用来更好地区分这两个区域。Davis通过合理地使用字号来暗示浏览者——左边的内容并没有右边的内容那么重要（图2-1-3）。同样，更大的标题字体也将标题区域与正文区域区别开来。这些视觉上的差异为浏览者提供了额外的信息，即表明每一段文字之间重要性的相对高低。

排版是一种起交流作用的表现方式，它拥有内建的层次结构、模式和韵律。通过运用不同的文本大小、文字间距和颜色来调整版面样式，作品将为读者带来很多文字之外的丰富信息。

左边的菜单中，Davis在每个作品名的左边都插入了一个小图标。因为这些图标的大小和文字大小接近，所以给人的感觉是它们半隐藏于文字中，仅仅起到标号的作用，而不会喧宾夺主地吸引或让浏览者转移视线。这个简单的细节为作品链接之间提供了上下文关系，并与菜单的其他部分区别开，也为这个设计简洁的菜单添加了一些令人玩味的独到之处。

图标是一类简化了的符号，用来表示某件物品或者某类概念，或者用来以抽象的图形化概念替代一段较长的文字描述。物品通常都会有较直观的视觉抽象方法，但类似过程和操作之类的概念却很难描绘。一个好的图标所代表的含义无需加以解释，但前提是图标是对物体本质的抽象。设计图标的关键在于，要将图标尽可能地以某种强烈、一致的方式与其要表示的概念关联起来。这样，当浏览者对该图标产生重复印象之后，就能用直觉体会出图标的含义。

Davis用两种样式的分界线将作品中的不同区域分开。页面最上边的一段与页首部分重叠的文字用虚线包围，白色的实线更进一步将标题和页脚与正文分开（图2-1-4）。这些简单的分界线既为作品添加了额外的上下文信息，又不至于让浏览者感到迷惑。

适当地使用线条能够在页面中定义区域的边界，让页面显得有韵律，甚至给页面添加额外的维度。但也不要过度使用——未闭合的方框以及过多的平行线将给浏览者类似网格结构的暗示，而实际上您的本意却并非如此。浏览者也可能会尝试寻找本不存在的规律与模式，进而迷失于作品中，所以在使用线条时必须足够谨慎、明智，只用在最需要的地方。

为了让作品始终处于浏览器窗口的中心区域，Davis尽力控制了页面中各元素间的距离。页面的两边都采用了可变宽度的空白区域，以期让内容居中显示。有时候全屏的设计让人愉悦，但另外一些时候定宽的布局似乎更为可取。

对于这两种情况，适当的左右外边距将会让作品的正文部分不至于显得太局促。默认情况下，大多数浏览器会在页面的边缘添加一个极小的外边距。但不幸的是，即使这样，文本仍将从左到右近乎写满整个屏幕。

这是个布局理念方面的问题——文本需要一些呼吸的空间，缺乏足够的外边距将让文本与浏览器的边缘重合在一起。这种情况下默认的外边距设定将无法满足我们的要求，因此设计师自然有责任做出适当的调整。

在这种简洁的布局中，外边距是仅有的几种被使用的设计元素之一，合理地应用外边距能让页面显得完全不同。足够大的外边距更是可以将内容置于浏览器窗口的中心位置，让浏览者一眼就能看到。

大多数设计师不会受到浏览器默认的外边距设置的影响，因为他们总是简单地将默认设置覆盖掉。但对于非专业的业余爱好者来说，这一点的确值得注意。但若是浏览器在这方面做得再好一些，例如能够像标准打印机一样在内容周围自动添加足够的外边距，那么也就不会有这种混乱情况出现了。

在用设计元素营造气氛方面，亚特兰蒂斯如Davis所愿地堪称经典之作。据古希腊哲学家柏拉图所述，亚特兰蒂斯是远古时期沉入到海底的一片大陆。页首锈迹斑斑的螺旋贝壳以及古典的石雕支柱都会让欣赏者陷入到对这个传说的深深回忆中，深蓝和黑色也营造出了深海的气氛。Davis在动笔之前就为作品选择好了图像和色彩，这样就在设计的过程中坚守住了最先的设计灵感。

页首贝壳的颜色经过了一定的调整，以便与旁边的抽象图案融合起来。贝壳的边缘也用Adobe Photoshop进行了更大程度的柔化处理，与整个页首图片融为一体。但Davis并没有将贝壳的颜色调整为与主题一致的蓝色系，而是留下了足够多的、锈迹斑斑的黄色，增强整个作品的对比度（图2-1-5）。若是整个作品都使用蓝色系，那么将给人以过多的沉重感（图2-1-6）。

图2-1-6 蓝色的页首图像，这样可能会显得与主题更加统一，但整个作品却因此缺少了对比度

设计中用到的元素可能各不相同，但作品整体达到统一的意境却是最重要的。除了使用单一的色系之外，还有一些更加巧妙的方式来实现一致性：例如将最重要的、起支配地位的元素用艺术线条或照片表示，或在悉心调整匹配区域的大小后再用线条环绕等。

在亚特兰蒂斯的页首，我们可以看到一些白色的实线圆圈，它们都以类似的方式融合在贝壳和旁边的抽象图案中。若是没有上下文的话，这类简单的白色圆圈并没有什么实在的意义。但在圆弧形以及蓝色背景的衬托下，浏览者将很容易将其认同为水中荡漾的波纹。这些圆圈的大小也和贝壳相近，二者交相辉映，显得非常协调和统一。

借喻（用简单的设计元素表示复杂的图像或概念）是一种强大的设计方法，可以为作品添加一些微妙的气氛并增加作品的深度。若不是我们在前面已经指出了的话，您可能很难发现页首的那些白色线条。但现在您一眼就能看出来，并能把它们想象成水中荡漾的波纹。

亚特兰蒂斯中使用象征的地方不仅仅是这些简单的线条——页首部分的图片中还包含了很多。从前的亚特兰蒂斯——一个强盛富有的帝国——现在，已经带着那些象征着文明与力量的石柱和美轮美奂的雕像消失在了蓝色的背景中。现今的亚特兰蒂斯——锈迹斑驳、静静地躺在海底。一个消失了的帝国，荣耀已经远去，页首左右部分的空间关系恰如其分地体现了这些。这种看似简单的设计却在不经意之间委婉道出了一段沉重的历史，并为整个作品添加了相当的深度，让欣赏者不得不陷入其中，仔细体会。

但对于那些从CSS角度审视作品的人来说，Davis在页首使用的贝壳还有另一个意义：这体现了他对Eric Meyer的CSS经典示例作品Complexspiral （可在www.meyerweb.com/eric/css/edge/complexs piral/demo.html浏览，图2-1-7）的敬意。

图2-1-7 Eric Meyer的示例作品Complexspiral，亚特兰蒂斯中同样在页首使用了类似的贝壳

这个作品在与读者交流，引起共鸣方面做得非常好：贯穿网站的一条清楚且统一的主线为提高用户体验打下了良好的基础。但也并不是所有的站点都需要如此的精心设计，对于那些内容和功能占主要地位的网站来说，设计师一般应该尽可能地简化图片等设计元素，以简洁实用为首要目标。

Radu Darvas，设计师

www.csszengarden.com/026

游离于光、影、形状和空间中

某一天，Radu Darvas的双眼突然被阳台上的向日葵吸引，随后他开始为这些向日葵拍照， Zunflower的设计灵感也随之迸发。Adobe Photoshop中对这些相片的处理更是让他理清了思路，最终完成了Zunflower的设计。

Zunflower的精妙之处在于，它并不是以“框”的形式设计的。深入观察这件作品，可以看到每一栏的位置都被仔细调整过，在视觉上形成重叠的效果。这种效果表现了光和影之间、形状和空间之间的相互影响，最终成就了作品明亮积极的主色调。

当你读到这里的时候，无论正坐在什么地方，总会至少有一个光源让你看清书上的文字。把你的视线从书本中暂时移开——光源在什么地方？它是如何照亮你周围的物体的？影子又在哪里呢？

视觉艺术家通常使用光和影为作品添加真实感，或者让作品中的某个部分凸现出来，以体现层次感。

回顾一下Web设计过去的十余年，我们将发现很多对光的使用。例如让图像实现梯度效果（图2-2-1），为按钮添加立体的斜边（图2-2-2），给照片创建阴影（图2-2-3）等，光影效果在Web中的用途非常广泛。

图2-2-1 梯度填充，作品创建于1995年左右。在压缩比率较高时，图像会出现抖动和条带，显得不够专业

图2-2-2 带有立体文字的立体按钮。这类视觉效果常见于20世纪90年代中期的Web页面中

不幸的是，一些没有正式学习过视觉设计的Web设计师经常错误地使用光线，在种种限制中能够确保完成任务也成为不小的挑战。但最终，趋势依然影响了技术——即使光线的效果并不真实，光源的位置也显得矛盾（图2-2-4）。

图2-2-4 错误地使用光源——注意两个物体的阴影投射方向并不一致

Zunflower演示了正确使用光源投射阴影的方法。虽然强烈的梯度和斜角在当代的Web设计中已经基本上绝迹，但投射阴影仍一直被广泛应用。原因如下：

□ 阴影可为页面添加丰富的视觉效果。

□ 投射出的阴影能让浏览者感到页面以及页面中的元素存在着层次感。

□ 在绘图软件中，阴影非常易于实现。

为了避免上面提到的那些使用阴影可能会导致的问题，例如相互矛盾的光源等，这里我们给出了如下的几条一般性的指导建议：

□ 注意阴影颜色的深浅——阴影的亮度表示物体与阴影投射表面的距离。深色的阴影代表物体与背景较近，而浅色的阴影则表示物体与背景较远，即更靠近观察者。

□ 阴影的长宽也会给用户造成不同的距离感。较为细小的阴影让人感觉物体与背景较近，而较宽大的阴影则让物体看起来离背景稍远。

□ 要确保光源的真实性。若页面中包含多个对象，则它们的阴影方向要保持统一，以体现出光源的一致性。

例如，头两栏的重叠让Zunflower居中一栏的阴影显得很自然，就像是光线从左边照射过来一样（图2-2-5）。

同样，右面一栏的淡出效果也为作品增加了更多的光影效果。这一栏的颜色逐渐变淡，最终在我们的视线中淡出（图2-2-6）。

若使用Photoshop实现阴影特效，请确保选中了“Use Global Angle”单选框。这样即可让作品中各个阴影的效果保持一致。

与色彩一样，形状也能影响我们的心理。设计师可以通过选择某类特定性质的形状来唤起欣赏者的某种特定的情绪。

形状对人心理的影响不仅仅限于计算机或印刷作品中。人类自从能够在地面画出符号、在岩洞的石壁上刻出描述故事的象形符号开始就已经在使用形状了。环顾四周，形状无处不在——这几乎是人类与生俱来的天性。无论是用来描述复杂的数学公式，还是为某个建筑添加修饰，甚至是代表象征意义的图腾，使用形状是我们的一种本能的自我表达方式。

在Zunflower中，页首的一丛花极其显眼——任何人都会被它的颜色和形状所表现出的内涵所深深吸引。

圆弧形经常与女性、阴柔关联起来，表示温暖、舒适、暧昧以及爱情等。进一步拓宽适用范围，圆弧形也能用来代表社区、全体、忍耐、运动以及安全等含义。很多以女性、社区、整体生活或浪漫传奇为主题的网站经常使用圆弧形来强调其主题。

三角形则通常会让人联想到男性、阳刚，用来表达诸如强壮、攻击以及运动感等含义。棱角的方向也会影响形状的含义——浏览者的目光通常会被吸引至处于支配地位的棱角所指向的方向。指向上方体现了向上的趋势以及攻击性，而指向下方则通常暗示出消极的意味，表示被动和无力。

当然，三角形（包括方形）的适用范围也可以被拓宽。方形暗示了力量和根基，这很有可能因为它们看上去足够的坚实稳重。方形的设计能给浏览者带来有序、逻辑、严密以及安全的感觉。

可以看到，Zunflower图像本身是由三角形和圆弧形构成的。当然，这是大自然创造的结果，但Darvas又在Photoshop中对这一印象进行了强化，使花的颜色和形状更加鲜明。因此，这幅图片给人以强烈的感官刺激——阳刚和阴柔并存，并创造出一种非常独特且让人难以忘怀的意境（图2-2-7）。

图2-2-7 近距离观察Zunflower是如何将三角形和圆弧形组合起来的

在Zunflower中，作者还用显眼的方形平衡了由花带来的阴柔感，奠定了整个作品的基石（图2-2-8）。

形状之间合理的组合能够给欣赏者带来最大限度的视觉冲击。再为其添加适当的色彩和光影之后，作品将更加引人入胜。页首部分恰当保留的部分空间也进一步增强了作品给人带来的冲击感。

正如光、影、形状一样，间隔空间也能够对人产生心理上的影响，从古到今的艺术家们一直都在采用这种方法拉近作品与欣赏者的距离。

在视觉设计中添加间隔空间是考虑到这样一个原理——适当的空间可以将浏览者的目光引导至页面中的关键位置。空间还能够对文本和图像的过密产生一定的缓冲，让眼睛有休息的余地。这将大大提高内容的可读性，并给浏览者足够的思考内容的时间。

空间感在心理和社会方面都有着极为明显的含义。从心理学角度考虑，主要有如下几点：

□ 间隔空间和经济形势息息相关。间隔空间的多少及其使用的方式同样也能够传达出很多信息。挤成一团的设计决不会显得美观，这时恰到好处的间隔空间就会让作品充满优雅的气息。

□ 使用间隔空间并不意味着这个位置什么都没有（间隔空间反而能够帮助我们定义对象）。拥挤的设计意味着信息过多，会让浏览者绷紧了神经。但若是添加了足够且恰当的间隔空间，传达给信息的方式就会变得更为完善、优雅，让浏览者备感轻松。

□ 间隔空间与特定地区的文化也有关系。正如带有不同文化背景的人对同样色彩和形状的感受各不相同一样，文化背景也决定了人们对间隔空间的不同看法。在某些国家中，交流中的身体接触表示关系的亲密。但在另一些文化背景中，例如美国，对身体接触的看法却大相径庭。

若我们在设计时曾考虑过上述几点，就会认识到间隔空间并不仅仅是页面缺少内容的副产品而已，而是作品中的一个极其重要的、需要全方面考虑的大问题。

首先让我们解释一下正空间和负空间的区别，之后你会更容易地理解间隔空间与作品融为一体的方法。

正空间是指组成作品的对象所占据的空间，负空间则是指非作品对象部分（即背景）占据的空间。尽管定义如此清晰，我们也不能将正空间和负空间割裂开来，二者互相依赖、相辅相成。负空间起到定义正空间边界的作用，作品中对象的边界也正是负空间的开始，这个边界本身就是一种形状（图2-2-9）。

图2-2-9 当背景被设置为黑色时，我们即可清楚地看到负空间是如何定义对象边界的。负空间自身也是由一系列的形状组成的

理解正确使用光源的方法将会帮助你在创建阴影及相关效果时达到协调统一。无论是在整体视觉效果中，还是在诸如网站标志或图标等特定之处，形状在设计中所起到的角色都值得深入讨论。充分地理解认识空间及其使用方法和使用目的，将会帮助您把想要表达的信息更好地传达给浏览者。

学会并掌握对光线、空间和形状的控制将让您的作品更加完美，如Zunflower一样熠熠生辉。

Boér Attila，设计师

www.csszengarden.com/083

用色彩激发情感

寒冷、单调的冬天过去之后，Boér Attila迎来了第一个晴朗明媚的春日，让他感受到了向上、充满活力和欢乐的色彩。从冬到春的颜色变化也让Attila产生了创作的灵感。

人们很早就发现，颜色可以引起人情绪的变化。这也正是将红色定义为暖色的原因——红色让人容易联想到火焰或辛辣的胡椒粉。随后，我们又自然地将这种联想应用到设计中的颜色选择上。例如，人们经常将象征着土地、大自然的棕色和褐色用于天然产品的包装上。

在春天中，冬日那单调乏味的颜色和春天万物萌发的颜色被混合在了一起，让作品的颜色选择既不显得过冷，也不显得过热。但整个设计却强烈地表达出了温馨与和谐的意味，给欣赏者带来积极愉悦的感官享受。

若是设计师希望向观众传达某种信息，那么理解色彩所包含的心理效果、文化影响、性别偏好等将与掌握其使用技巧同等重要。

页面的内容、布局及图片的使用无疑都会体现出该站点将要表达的意愿，但色彩的使用同样是一种非常重要的交流方式。优秀的设计师了解如何恰当地使用色彩来表达设计意图，并加深浏览者的印象。对于浏览者来说，色彩表达的含义与图像或文本一样令人信服，某些时候甚至还要强于它们。

若你要为一个重金属乐队设计站点，那么选择在白色的背景下使用黄色或粉色等明亮的颜色显然将与主题格格不入。重金属带有黑暗的意味，虽然作品中仍可以使用一些明亮的颜色，但对于该音乐流派，深沉、浓重的色彩基调则毫无疑问最具代表性。

相反，若你要为某个古典四重奏设计站点，那么深色主题也很难与这一流派音乐的轻柔舒缓特点相符合。选择与网站主题一致的色彩在设计时至关重要，这也是创建成功网站过程中的重要一环。

色彩对人类情绪有着非常大的影响。二者关系非常复杂，包括很多方面的因素。

对于无法感知光线的盲人来说，色彩无关紧要。对于那些色盲（一种先天性疾病，患者无法区分两种特定的颜色，最常见的是红色和绿色，即红绿色盲）或色弱的人来说，颜色的理解也和正常人有所差别。色盲人群的分布较广泛，在北美，大约每12个人中就有一例¹。因此，考虑到这些潜在的浏览者，设计时就更要在选择色彩上多加小心。

注释：¹ 在我国，男性红绿色盲的发病率为7%～8%,女性的发病率为0.5%。——译者注

某种颜色的色调同样可以影响它的含义。一般来讲，浅绿色能够唤起某种较愉悦的感觉，但深绿色却恰恰相反。类似地，添加了材质（texture）的颜色也会让人对其有不同的理解。表2-3-1列举了一些常见的颜色及其带来的一般心理联想。

当然，这类挑战常理的色彩选择也许反而能达到某些意想不到的效果。尽管如此，在这样使用前也必须要格外小心地准备和验证，确保能够实现你的预期的目标。文中的观点仅仅用来说明通常情况下人类对色彩的反应。

你可能会注意到，某种颜色可能会引起两种截然相反的心理联想，就像黑白两种相反的颜色一样。例如红色，既可能表示激情也同样能代表危险（或许激情和危险的差别并不是很大？）。此外，还有很多因素与这种看上去的矛盾相关，例如文化背景和性别差异都会让人对相同的颜色产生不同联想。

在春天中，对绿色的色调以及亮度的选择都非常恰如其分，让人联想到青草和树叶，带来温和、舒适的感觉。作品中偶见的一丝蓝色也进一步体现出了大自然的意味（图2-3-1）。

图2-3-1 春天的颜色选择，包括一系列的绿色、一种淡蓝色和白色

Attila是匈牙利人。艺术家所生长的文化背景会影响到他（或她）对颜色的理解和选择吗？专家们对此都持肯定的态度。类似地，欣赏者的文化背景以及性别也会影响到他们对作品的理解。

文化背景和性别差异都会扩展并复杂化前一节中列出的颜色引发的心理联想。表2-3-2列出了一些由不同的文化背景和性别导致的对颜色的不同理解。从中我们可以很容易看出，色彩的使用，特别是对于在世界范围，例如互联网中的作品来说，必须慎之又慎。

若想了解更多关于色彩的研究论文、图书以及其他资源，请访问J. L. Morton教授的网站：Colorcom（www.color com.com）。还有一个色彩相关的站点也非常不错， Causes of Color（http://webexh ibits.org/c ausesofcolor）。

在为某个网站选择调色板时，应该对上述色彩相关的问题有所了解。正如要清楚作品要表达的含义一样，你还需要对浏览者的期望有足够的了解，以便于根据需要做出最恰当的选择。

研究你的听众

交流中的一个黄金法则就是了解你的听众。因为人与人之间文化背景和性别等差异都会影响到他们对同一色彩的理解，所以在使用色彩之前对作品的浏览者进行充分的研究就显得非常必要。对于某些颜色，大多数人对其的理解和认同感都惊人的相似。这也正是蓝色、棕色以及春天中用到的绿色等被广泛应用于各种作品中的原因。

色彩学专家J. L. Morton（前面介绍过他的网站）建议设计师们尽可能地选择与预期浏览者的通常理解相接近的颜色。例如在为儿童设计网站时，一般应该选取表达欢乐的颜色。若要表现出高雅，那么黑色和银色的组合在美国将会非常受欢迎。若想吸引男性浏览者的关注，那么通常说来大量地使用蓝色总归没有错。而若是想引起女性浏览者的兴趣，那么红色和粉红色则要比蓝色好得多。要是想设计大自然主题相关的网站，那么绿色、蓝色和棕色也自然将是你的不二之选。

在开始设计之前，最好先创建一些测试用的调色板。在Photoshop中创建调色板非常容易（图2-3-2）。新建一个文档，然后使用颜色选择器（Color Picker）将不同颜色以条带形式添加进去，最后看看它们的配合效果。之后你还可以创建一个测试HTML文档，并在CSS中尝试使用一下这些颜色。

CSS在为作品创建原型的阶段能够起到非常大的帮助：对于这些测试用的调色板，你可以为其相应地创建若干个CSS文件，然后将这些CSS依次应用到测试HTML文档上并观察其实际效果。这种方法甚至可以用于可用性研究中——把应用不同调色板的设计草图发送给你的用户，然后分析他们的反馈。

幸运的是，CSS提供了很多描述颜色的方法。我们可以在下面几种方法中随意选择：

□ 颜色名称。CSS目前支持17种颜色的名称，分别为black（黑色）、silver（银色）、gray（灰色）、white（白色）、maroon（栗色）、red （红色）、purple（紫色）、fuchsia（紫红色）、green（绿色）、lime （鲜绿色）、olive（橄榄色）、yellow（黄色）、navy（藏青色）、blue （蓝色）、teal（凫蓝）、aqua（浅蓝绿色）和orange（橙色）。例如：

□ RGB值（绝对值表示）。我们可以使用红（Red，R）、绿（Green，G）、蓝（Blue，B）三种颜色的绝对值来描述某种颜色。颜色的RGB值可以在Photoshop或其他图像处理软件中得到（如图2-3-3所示）。例如下面这段代码就表示一种淡蓝色：

color: rgb(51,153,204);

□ RGB值（百分比表示）。按照百分比混合红绿蓝即可得到想要的颜色。例如下面这段代码表示一种紫色：

color: rgb(93%, 51%, 93%);

□ 十六进制值。使用六位的十六进制值表示一种颜色，Photoshop（图2-3-4）和很多在线参考文档中都使用了这种方法。这种表示方法混合使用了数字和字母，每两位相应地表示红绿蓝三种颜色中的一种。十六进制值颜色表示方法已经在Web中使用了很长时间，所以大多数读者都比较熟悉：

□ 十六进制简写值。只有分别表示红绿蓝的三对字母均两两相同时，才能使用这种简写形式。例如#FF6699就可以使用简写形式¹，但#808080则不能。上面例子中的蓝色的简写形式如下：

□ 系统颜色。系统颜色是在CSS 2.1规范中引入的一系列关键词，允许设计师使用浏览者计算机上的系统颜色配置。例如：

无论是在设计个人网站还是专业网站，都应该事先确定网站将要传达的主旨，并充分地了解浏览者群体的喜好。这些内容都将在选择颜色时助您一臂之力，也会让您更好地表达出作品的设计意图。

春天就是一个非常好的例子，它完全实现了作品在设计上的本意：表达出由冬到春的过渡，唤起浏览者平静且乐观情绪。作品还同时保证了来自全球的、各种文化背景、不同性别的欣赏者都能体会到同样的感觉，这一点已经毫无疑问地被禅意花园的浏览者所证实。

若想了解更多有关系统颜色的信息，请访问www.w3.org/TR/CSS21/ui.htm l#system-colors。注意，这些颜色将不会被CSS 3.0支持。

很多人仍然坚持使用“Web安全（Web Safe）”的调色板。但由于目前主流的计算机都能够显示数百万种颜色，所以已经没有必要再受限于这个规定了，除非你确认作品是为某个特定的、使用古老计算机的人群所专门设计的。熟悉“Web安全”调色板的读者将很容易地发现，春天中选用的一些颜色也并不在Web安全所规定的256种颜色当中。

Laura MacArthur，设计师

www.csszengarden.com/022

在图案、材质和对比度中找到平衡

翠绿活力的色彩基调是单调的绿色，但若着眼细节，将会发现作品让我们联想到了森林中长满苔藓的大地，或天鹅绒一般柔软的织物。Laura MacArthur也正是希望能用这个作品捕获住这份平衡、宁静的感觉。

通过使用重复的图案以及模拟的材质效果， MacArthur用丰富的细节平衡了作品其他方面的简单。深沉的单一色系让作品不至于变得太过拥挤，且虽然作品中使用了繁复的图案，但大片的绿色空白区域也给眼睛留下了足够的休息空间。

翠绿活力中使用的图像主要是很多视觉上相似的图案。深入分析可以发现，这些图案在整个作品中都保持一致，主要分为两种类型：第一种由网点组成，而第二种则由类似植物形态的弯曲花纹组成（图2-4-1、图2-4-2）。两种图案均用Adobe Photoshop的滤镜将剪贴图案元素拼接而成。当然，这些图案在细微之处均有所变化，丰富细节的同时也不至于让作品的视觉效果过于一致，导致单调乏味。

图案是指重复填充到指定区域内的某一种（也可能多于一种）小块视觉元素。在各个视觉作品，例如时装、室内装潢乃至自然界（例如橘皮上的气孔、树叶上的脉络等）中，都经常能够找到图案的身影。

漂亮的图案是Web设计师最好的朋友。对于一片内容很少或者根本没有内容的区域，我们必须想些办法：某些作品选择使用单一的填充颜色，另一些作品则干脆直接留出一片空白。虽然这些方法都能在某种程度上解决问题，但在某些特殊情况下，我们还需要对这片区域添加更多的细节修饰。

当代Web设计中的一些限制引起了人们对图案的关注和使用。一个简单的小图片可以很容易地被重复填充到页面中的某个区域中，很小的图片也意味着在作品中添加这种细节修饰并不需要花费太多的网络带宽。例如，哪怕是一个只有500字节大小的图片，也能很容易地完全填充到某个900像素宽的大区域中。

CSS中内建的background-repeat属性就是用来设定重复显示选项的。background-repeat属性的使用方法非常简单，其可选值包括repeat、no-repeat、repeat-x以及repeat-y，分别代表让图像重复显示、只显示一次（非重复显示）、只在x方向重复显示以及只在y方向重复显示。

　background-repeat: no-repeat;

　background: #669999 url(z_bgrnd.gif) repeat-x 0px 1px;

在前面这段示例代码中可以发现，我们可以独立指定background-repeat属性。该属性并不需要依赖于其他任何的背景（background）相关属性，也并不一定要写在冗长的background规则中。

在浏览Web页面时，我们并不能用触觉感受到什么信息，通常来讲，整个计算机行业中也都是如此。虽然简单的力反馈功能在游戏手柄上较为常见，但除此之外触觉却并没有什么更进一步的用武之地。

在本世纪初的几年里，罗技（Logitech）公司实验性地发明了一种名为“iFeel”的鼠标产品，这种鼠标能够给手指一定的反馈，让操作系统中的元素以及网页带有一定的“材质”感。例如，将指针移到超链接上将会感受到类似在橡胶表面上移动鼠标的感觉。但最近一段时间这种技术似乎销声匿迹了，罗技公司也不再生产这种鼠标。虽然看上去不错，但却没有人知道这种技术到底有什么用，所以它也一直未能流行起来。

因此，在传统观念中Web并不能很好地体现材质：唯一的触觉反馈可能就是在点击按钮时。但材质却并不一定必须要通过触觉才能感受，视觉也能够体现材质感。

以人物雕像为例，设计师一般都会在石头上仔细雕琢出人物的衣物。我们自然可以想象到，若触摸这些石制的衣物，将只能感觉到光滑、坚硬的外表（图2-4-3）。但我们也都理解它要代表的是真实的衣物，因为二者在视觉上有很多的类似之处。

图案是体现材质感所必不可少的。通常情况下，无论是否是刻意而为，图案都能够模拟出材质的效果。很多材质的元素都自然地由图案的重复而体现出来。

虽然翠绿活力中的图案并不是由照片得来的，但这些图案却毫无疑问地模拟出了真实世界中的材质感。网点类型的图案让人联想到凸凹不平的表面，上面的小方块也让人感觉这像是一块带有方格纹的棉布。弯曲花纹类型的图案则给人以怀旧风格的地毯或华丽的布料的感觉。若以织物的角度体会，翠绿活力将很容易让人联想到一个诱人、舒适的长沙发。

选择像翠绿活力一样单调的色系在设计中是个非常冒险的行为，除非你经过了仔细考虑。但丰富的色彩和细节也可能导致潜在的对比度问题，这一点在设计时同样不容忽视。

对比度差别可以用来区分不同的元素。若对比度过低，则元素将失去彼此的界限并混合在一起，文字也变得难以辨认。若对比度过高，则将给浏览者带来压迫感，同样不会觉得舒适。

对比度过高将让作品显得过于拥挤，有过度设计之嫌。虽然翠绿活力中用到的颜色范围较窄，但材质和文本的合理使用却依然起到了提高对比度的作用。若颜色种类过多，作品看上去将充满了噪音，显得不够和谐（图2-4-4）。

图2-4-4 若是在翠绿活力中使用更强的颜色对比度，将与丰富的图案产生冲突

几个世纪以来，各种出版物均是在白纸上印刷出黑色的文字。虽然彩色印刷的历史也不算短，但白底黑字仍旧是最好的对比度组合，读者也都对这样的组合非常习惯。一般来讲，白底黑字原则在计算机屏幕上同样是达到最佳对比度的不二之选。

但还是有些例外情况。真正的书本靠反射光线阅读，但计算机屏幕却是自身发光的，这种差别也给屏幕显示带来了一些特有的问题。例如，黑暗房间中的一个明亮的LCD屏幕将显得极为刺眼。在这种环境下，阅读任何纯白背景上的文字无疑都是对视力的巨大挑战。

考虑到对比度之后，使用颜色将变得愈加复杂。由于同时色对比（simultaneous contrast）¹的原因，某些颜色的色块放在一起会格外显眼。若将两种互补色，例如橙色和蓝色或红色和绿色相邻放置，那么将显示出明显的边界以及强烈的对比效果（图2-4-5），进而引发令人不愉快的视觉上的紧张感。

注释：¹ 同时色对比是指两种不同的色光同时作用于视网膜的相邻区域时，颜色视觉因受到影响所发生的变化。眼睛为了更加清楚地分辨出颜色差异，会尝试夸大颜色的色调、亮度和对比度等。——译者注

但在某些需要表现浓烈色彩的情况中，我们也可以充分利用同时色对比所带来的效果。例如，黄色背景下的橙黄色将显得更接近橙色，但若是在橙色或红色背景下，则看起来会更接近黄色（图2-4-6）。在更加暗淡的颜色背景衬托下，偏暗的颜色也会变得明亮起来。例如，若是将某种比较暗淡的红色置于灰色背景中，则该红色看起来会鲜艳许多。

图2-4-6 同样的橙色，在黄色背景下显得偏橙，在红色背景下显得偏黄

若作品的对比度过低，则往往会给人带来压抑的感觉。在表现变化和差别时，我们需要适当的对比度。翠绿活力中选择了从明到暗的多种绿色，但若是这些绿色都趋于一致，那么整个作品将缺少了让人感觉眼前一亮和平静舒缓的区别，变得毫无生气，最终导致打破整个视觉上的平衡（图2-4-7）。

但低对比度也有其独到之处。在设计中，有些时候即使是一个像素也会显得太大，但因为像素已经是屏幕显示的最小单位，所以我们也没有任何办法画出一条比单一像素还要细的直线。这时若是降低这条线与其背景之间的对比度，则能够让其看上去变得更细一些（图2-4-8）。

用类似的方式降低设计元素之间的对比度同样也可以实现一种柔和的效果。例如，对于某段不是那么重要的文本，我们就可以为其应用一些较浅的颜色。对于某些非活动的图标或链接，我们同样可以通过降低其对比度来实现“变灰（grayed out）”效果，让用户了解该选项当前不可用。

但对于低对比度的使用仍旧需要格外小心。双眼视力都是5.0的读者在阅读浅灰色背景上的深灰色文字时可能没什么问题。但对于那些视力不那么好的读者来说，若想看清楚这段文字，将不得不凑近屏幕或者增大文本的字号。但无论在何种情况下，黑色的文字总是能够带来更好的可读性。

色彩的对比度同样会影响到内容的可读性，不同的色调对应的可读性也不尽相同。例如，纯黄色看起来就比蓝色显得淡一些。所以即使读者的双眼视力都是5.0，白色背景上的黄色文字依然基本上无法阅读。

若想更深入地研究色彩对比度问题，那么自然会考虑到那些患有色盲的读者（图2-4-9A和图2-4-9B）。颜色方面的缺陷有很多种，每种也都有它的变化。最常见的可分为如下两大类：

□ 红色弱/绿色弱——患有红色弱或绿色弱的人仍旧能够看到大多数颜色，但对不同颜色的分辨能力会有所减弱。红色弱/绿色弱也被叫做三色感知异常（anomalous trichromacy）。

□ 红色盲/绿色盲——这类的颜色感知障碍较为少见，但却更加致命。患者通常无法正常分辨出红色和绿色，他们的世界中只有黄色、棕色和蓝色。红色盲/绿色盲也被叫做dichromacy。

以上各种类型的色弱/色盲患者均部分甚至完全不能感受红色和绿色（也可能会有蓝色，但非常少见）。一般地，每12个人中就有一个存在着颜色感知障碍，且男性的发病率要远高于女性。

但若是某个患有颜色感知障碍的人在欣赏某个作品，且该作品中恰好包含了一些他无法感知的颜色的话，会出现什么问题呢？若是设计师想要依赖颜色传递某些重要的信息，那么在这些患有颜色感知障碍的浏览者眼中，其精心挑选出的调色板可能将变得毫无用处。例如，若某个患有色盲的浏览者无法看出红色和深棕色或黑色之间的区别，那么我们就不能给出诸如“点击红色按钮”的提示。虽然对正常人来讲区分颜色不过是小菜一碟，但在这类特殊的浏览者看来，很多时候某种颜色将和其背景完全混在了一起，区分二者成为了根本不可能完成的任务。

没有什么方法可以完全模拟出色盲患者看到的世界。将作品转化为灰度图像似乎是个不错的办法，但这也不是作品在大多数色盲患者眼中的真实样子。很多图像处理软件中都提供了各种各样的滤镜，用来模拟不同类型色盲患者眼中图像的样子，但这种模拟也仅仅是近似而已。颜色感知障碍存在着个体差异，每个人的症状都会有所不同。

既然针对颜色感知障碍浏览者的测试不可行，那么又该如何是好呢？“ Web Content Accessibility Guidelines” 中的第2条指导意见（www.w3.org/TR/WCAG10/#gl-color）给出了解答：对于任何依赖于颜色传递的信息，我们都应该提供如下方式中的至少一种来告知用户：蓝色且带有下划线的超链接、包含图标或文本的绿色按钮、带有实线边框的红色警告信息等。

Colorblind Web Page Filter滤镜（http://colorfilter.wickline.org）可以用来模拟色盲患者眼中的图像。

为了让作品的视觉效果趋于统一，在设计时就需要考虑到作品的各个方面。若是翠绿活力没有考虑到材质与色彩、文本与图案之间的相互影响，那么作品将变得过分张扬且拥挤不堪。但由于Laura MacArthur注意到了这些问题并仔细平衡了各种设计元素，作品的整体效果最终远远地超过了其每一个组成部分。

Charlotte Lambert，设计师

www.csszengarden.com/068

用想象创造视觉流向并引导视线

禅意花园的本意就是让人们沉思，Charlotte Lambert的视觉作品叙事曲也正是为了表达这种感受而作。Lambert在她的花园中来了一次精神上的散步。想象在花园中自由飞驰，一路上她遇到了很多具有象征性的东西：一段楼梯、一座小桥、一只闲逛的猫。

从想象回到现实，Lambert创建了几幅草图来帮助自己完善关于作品的想法。她在这些草图上手工绘制出了旅途中的所见，然后用中国的墨水和白色的颜料在纸上，甚至是啤酒包装箱上开始了创作。之后，Lambert在Photoshop中将它们组织起来，最终完成了将用于作品中的图像。

一个良好的作品应该能够引导读者的视线，让读者以合理的逻辑顺序逐一阅读内容中的重点，但同时又不会让读者觉察出来。这一点至关重要，既表达了设计师希望传达的意图，也不会让读者觉得被控制。

为了引导读者的视线，我们必须引出视觉流向的概念。视觉流向是指通过使用图片和内容，让读者的视线从一个重要地点移动至下一个的过程。在叙事曲中，我们就能看到这样一条清晰且相当优雅的视觉流向。

网站配置导航条、作品存档、资源链接等起辅助导航作用的内容都被统一放置在了页面的左边，与主要内容分开（图2-5-1）。大多数人在浏览网页时都习惯于在页面的左边或上边寻找导航条，所以将导航条布置在这些位置上将让浏览者易于发现，进而迅速转向页面的主要内容。

图2-5-1 在叙事曲中，导航和辅助信息与内容区域完全分开。采用这种方式，作品可以很容易地将读者的视线吸引到其内容上

在Lambert的作品中，我们不停地被从一段中带入到另一段，就像真的走在花园小路上一样。我们从门廊（图2-5-2）开始，经过了第一段之后走下台阶（图2-5-3）来到了第二段。花园中的每一段都有着独一无二的样子，并为内容提供了足够的空间。标题部分描述了每一段的概要，让该段的内容与视觉流向融为一体。

图2-5-2 叙事曲中的门廊。这个小插图让整个作品显得生动活泼

图2-5-3 从门口到台阶，以充满技巧性的暗喻方式引导了读者的视线

在引导读者的视线时，还有一个重要之处，即为读者的眼睛提供一些休息的空间。达到这个目的的最常见作法就是在页面中添加足够、适当的空白（图2-5-4）。颜色可以用来将读者引导至页面中的关键部分，而形状和线条则可以为读者的视线移动指明方向。

图2-5-4 每一块内容中都提供了大量的白色空余空间，既让眼睛有休息的余地，也增加了内容的可读性

在叙事曲中，设计师用块状的白色来表示主要内容区域。这在提供足够的、易于阅读的对比度的同时，也给内容区域中保留了足够的空白让眼睛休息。作品的颜色选择极为简单，只使用了棕色、黑色和白色，似乎为我们留下了这样的疑问：这是在冬天的花园中么？还是秋天的？带着这些问题，读者将会饶有兴致地欣赏整个作品并尝试去寻找更多的线索。

最终，树叶（图2-5-5）、小溪、拱桥和脚印（图2-5-6）也为作品增添了一些非同寻常的元素，将我们的视线引至远方，并留给我们无尽的美好遐想。

图2-5-6 一只小猫守望在作品的左上角，让叙事曲充满了令人愉悦、引人入胜的细节，欣赏者也总是能够在不经意之间找到小小的惊喜

最近几年，出现了一大批创新的、不愿按照守旧派的方式使用表格布局的设计师。作为table的替代品，他们认为CSS应该承担起布局并呈现样式的重任。虽然所有禅意花园的作品都力求说服人们使用CSS进行布局，但仍有那么一些守旧的设计师固执己见，坚持使用复杂的table布局。在叙事曲中，设计师完全能够直接用CSS实现预期的设计效果。但若是选择table布局，情况又将如何呢？

让我们来看看守旧派眼中应该如何实现这个作品。你将很容易发现在该作品中使用表格布局将是一次噩梦般的尝试。若是在Macromedia Fireworks中用图片分割工具进行布局，哪怕仅仅是从作品中取出两个主要的小节，你也将得到一个复杂的表格加上其中大量的分割图片：

<table bgcolor="#ffffff" border="0" cellpadding="0"

　　<td rowspan="3"><img name="ballade_r1_c1"

　　src="../Images/ballade_r1_c1.gif" width="30"

　　border="0" alt=""></td>

　　<td><imgname="ballade_r1_c2" src="../Images/

　　ballade_r1_c2.gif"

　　width="537" height="273" border="0" alt=""></td>

　　<td rowspan="3"><img name="ballade_r1_c3"

　　src="../Images/ballade_

　　r1_c3.gif" width="30" height="887" border="0"

　　　alt=""></td>

　　<td><img src="../Images/spacer.gif" width="1"

　　border="0" alt=""></td>

　　<td><img name="ballade_r2_c2" src="../Images/

　　ballade_r2_c2.gif"

　　width="537" height="429" border="0" alt=""></td>

　　<td><img src="../Images/spacer.gif" width="1"

　　border="0" alt=""></td>

　　<td><img name="ballade_r3_c2" src="../Images/

　　ballade_r3_c2.gif"

　　width="537" height="185" border="0" alt=""></td>

　　<td><img src="../Images/spacer.gif" width="1"

　　border="0" alt=""></td>

查看上述代码，很容易发现许多明显的复杂之处，包括：

□ 表格布局添加了大量的不必要标记。

□ 使用间隔图像¹，而不是CSS中的内外边距设定，不必要地增加了页面的文件大小。

注释：¹ 间隔图像是在table布局中常用到的一个技巧，通常是一个1×1大小的透明GIF图像，用在撑大表格等辅助布局中。——译者注

□ 图片是用img标签添加到页面中的，这些额外的img标签增加了页面的文件大小，导致页面加载需要更长时间。

□ 既然选择了表格布局，那么网站中的各个页面也必须统一使用table。每个页面都包含着类似的table和img标记，因此每次页面加载时浏览器都必须重新请求这些内容并进行重绘²。但若是使用CSS，这些布局信息即可缓存于浏览器中。例如在禅意花园的作品中，应用图片的代码只需要加载一次。

注释：² 事实上，浏览器都会自动缓存<img>标签引用的图片。反而有些浏览器（例如IE6）无法缓存定义于CSS中的图片。——译者注

虽然从总体说来，CSS布局的呈现速度以及友好性要强于过度复杂的表格布局，但它也存在着一个常见的问题——FOUC（无样式内容瞬间，Flash of Unstyled Content）。在IE浏览器中，若以import而不是link的形式引入CSS，则将发生FOUC现象。但只要在HTML文档的head部分存在着一个script或link元素，即可避免FOUC。禅意花园选择了用script元素来避免这个问题，让页面加载更为平滑。若想了解更多FOUC的相关内容，请参考http://www.bluerobot.com/web/c ss/fouc.asp。

自然，这些都是表格布局中遇到的常见问题。绝大多数设计师也都了解过度使用表格导致的另外一些问题，包括可访问性——很多为盲人准备的屏幕阅读设备都无法正确理解采用表格布局的页面。再来考虑一下叙事曲中最重要的设计意图——引导读者视线，我们就会发现使用表格将导致的另外一个问题：因为table布局页面的加载过程通常都不会那么平稳自然，所以这种笨拙守旧的布局方式将很有可能扰乱作品的视觉流向。

但若是使用了CSS，那么我们很容易就能想象出让作品平滑加载且对用户友好的方法。设计师不必再陷入复杂的表格、不规则的图像切片或是间隔图像中，而是可以相对独立地为页面元素设置样式。

但这并不是说在基于CSS的设计中就不能使用嵌入到HTML中的img标签。若图像属于“内容”，而不是“样式”的一部分，例如“公司介绍”页面中的一张CEO照片或是软件网站中某个产品的屏幕截图，则显然应该使用img标签。使用CSS的关键之处在于将页面的表现样式从页面结构中分离开来——页面的表现样式属于设计部分，而并不属于内容。

若图片实际上起到了标题的作用，那么将其包围在标题中也就显得恰如其分。禅意花园是用“图像替换”技术来实现的，关于“图像替换”，将在第4章中详细介绍。

Mozilla和Mozilla Firefox的Web Developer工具可以在此免费下载：http://chris pederick.com/work/firefox/webdeveloper。

在下面的代码中，可以看到叙事曲的主要内容段部分是如何将图像以背景的形式应用到段首标题之上的：

　background: url(road.jpg) top left no-repeat;

　background: url(about.jpg) top left no-repeat;

　background: url(particip.jpg) top left no-repeat;

　background: url(benef.jpg) top left no-repeat;

　background: url(req.jpg) top left no-repeat;

在Mozilla和Mozilla Firefox的Web Developer扩展工具中，我们可以让其自动标出页面中的块级（block level）元素，并查看其id与class（图2-5-7）。图中可以看到，这个工具能够帮助我们容易地找到页面元素的精确位置。

图2-5-7 使用Mozilla和Mozilla Firefox的Web Developer扩展工具查看叙事曲的页面。这里标出了每个块级元素的位置，演示了设计师布局和使用背景图片的方法

通过将内容置于HTML页面中并使用背景图像创建样式，作品将能够得到很多极为明显的改善：

□ 通过改进标记方法，降低了页面文件大小。

□ 由于CSS将被浏览器缓存，因此若是将大多数（甚至所有）的样式标记置于CSS中的话，浏览器将不必每次都从服务器端重复取得页面的样式，也自然大大加快了页面的加载速度。

□ 网站的可访问性得到了立竿见影的增强，因为HTML中再没有任何表示样式相关的代码。

□ 网站更加易于管理。比如说春天来了，我们想给叙事曲添加一些绿色和金色的元素，让作品不再是现在这样冷冰冰的感觉。按照现在的设计方式，我们只要修改CSS以及其使用到的图片即可，具有相当的灵活性。修改这种CSS布局的网站要远远简单于表格布局的网站，即降低了管理费用。

寻找一种有效的Web设计方法并不简单。设计师必须全方位地考虑许多问题。在叙事曲中，我们学到了如何让作品充分引导读者的视线，如何用色彩表达某种特定的感觉，以及为什么CSS布局要远强大于表格布局等很多知识。CSS让设计师挣脱了传统技术的桎梏，来到了一个全新的世界。

对于那些正从table布局转向CSS布局的设计师来说，最大的挑战就是如何在这种新技术下找到灵感。虽然CSS让我们从前人设计的限制中解放了出来，但Photoshop、HTML标记和样式仍旧是设计中不可或缺的环节。挑战实际上在于如何找到新旧技术间跨越的桥梁。Charlotte Lambert的叙事曲给出了足够的启发，让作为设计师的我们找到了这座桥梁，展开想象的翅膀，使用最新的技术从传统的Web设计方式中飞跃至最新的CSS设计理念中。

Dave Shea，设计师

www.csszengarden.com/064

将网站设计变为代码，并解决转换中遇到的问题

Dave Shea驾车在夜幕刚刚降临的城市中行进，耳边传来John Coltrane的轻柔的萨克斯曲调，黄色的路灯闪过车窗，外面是深蓝色的天空。很快，他在这纯美的夏夜中找到了Night Drive的创作灵感。

深颜色确定了作品模糊、温暖的基调。文本和图像所使用的深橙色以及零星点缀的亮橙色平衡了作品的色调，让作品不至于显得过于沉闷。散布在作品各处的淡蓝色小块同样起到了很好的补充作用，表现朴素安静的同时也避免显得过于单调。

作品中的照片是根据其色彩和主题选择的——行驶在刚刚日落的街道中，你会看到昏黄模糊的灯光、玻璃一样的水面和朦胧的蓝色地平线。

最初在Adobe Photoshop中设计Night Drive时，Shea几乎没有考虑过如何用CSS实现的问题。设计图首先完成，这样，任何有关实现的问题就只能在编写CSS的过程中解决了。

应该如何将设计图转化为具有交互性的、真正的网站呢？首先，设计图应该分割成片存放，然后再用CSS将其组装起来。图片分割的过程没有什么硬性的规定，当然也没有什么放之四海而皆准的法则，只要把握住最重要的一点——灵活性即可。事先多考虑几种方法，将会让你在作决定时游刃有余。

首先考虑Night Drive的页首标题部分——页首由一系列方框组成，右上方还覆盖着一个闪闪发光的、带有立体效果的黄色徽章（图2-6-1）。这里我们将遇到两个挑战：首先是如何布局这些照片和线条，其次就是如何将背景透明的徽章图片置于最上方。仔细斟酌之后，Shea找到了如下两种方案：

□ 将整个页首部分设计图保存成单独的一张JPG图片。但图片只能轻微压缩，以保证图像的质量。当然，这种方法带来的图像文件势必较大。

□ 将页首部分的图像分割为若干个小图片，然后再将图片添加至#pageHeader中的各种元素，或是结尾部分的#extraDiv元素（使用绝对定位将这些元素放置在页面顶部）上，最后把这些小图片重新组装起来（图2-6-2）。

最终Shea选择了第二种方案，但也采用了一些第一种方案中的想法：Shea没有直接将这一大块图案简单分成几个小块，而是有选择性地将两幅照片图像存为了JPG文件（图2-6-3）。标题文字“css Zen Garden”以GIF格式保存，在这些图片后面、作为布局背景的衬底也被存为一个高度压缩的GIF图像。从设计图到代码的过程竟如此崎岖——我们仅仅是想把页首部分正确显示出来而已，最终结果却是混杂使用了两种布局方案，图像也根据需要分别被保存为GIF和JPG两种格式。

保存完这些图片文件之后，接下来的一个问题就是如何将它们再次组装起来：这些图片都分别应该应用到哪个HTML元素之上呢？在明智地选择使用background-image属性和图像替换技术之后，答案显而易见：#pageHeader中没有足够多的元素，我们还需要使用定义在HTML文档末尾的#extraDiv，并将其放置于页面的顶部。最后，Shea将最大的那张背景图片与h1元素绑定起来，并将标题文字“css Zen Garden”应用到了h2之上。

下面代码中的高亮部分演示了为元素应用背景图像的方法：

　background: #000 url(bg2.gif) top left no-repeat;

　background: #000 url(h1.gif) top left no-repeat;

　position: absolute;

　margin-left: 495px;

上面代码中最下面的一个样式隐藏了span中的文本，因为其内容将被图像所替代。但目前已经不建议再使用这种方法了。

关于图像替换技术的详细使用方法以及使用中的各种问题，请参考这篇文章：“Using Background-Image to Replace Text”（www.stopdesign.com/articles/re place_text）。

从布局角度说，将本来在HTML结尾部分的照片图像定位到页首的确是个不小的挑战，这部分内容则为实现该效果打好了基础。绝对定位在处理居中时并不那么方便。Shea使用了一种非常有用的技巧来处理这个问题：首先将父元素绝对定位于页面的最左边，并将其宽度指定为100%，在水平方向占满整个浏览器窗口。然后将其子元素——这里就是那些span——设置为居中。

考虑到很多浏览器的缺陷，这部分代码如下：

　position: absolute;

　text-align: center;

　background: transparent url(granville.jpg) top left no-

　margin-left: auto;

　margin-right: auto;

若是希望子元素绝对居中的话，那么这样就算大功告成了。但若并不想要其绝对居中，需要加上些偏移量，又该如何处理呢？为子元素添加一定的内边距（padding）能够增加元素的总宽度，这样即可让其偏离原本的绝对中心位置。但这个偏移量的值在指定到内边距上时要加倍计算——因为在给元素添加内边距的同时也增加了元素的总宽度。还有，内边距要添加在与期望偏移方向相反的一侧，例如若要让在正中央图像向左移动，那么应该为图像添加右侧的内边距值（指定padding-right属性），反之亦然。

内边距值需要二倍于期望的偏移量。例如指定了100px的padding-right，在中心坐标系中将只会让元素向左移动50px。

由于元素居中放置，且添加内边距值也同样增加了元素的宽度，所以元素将同时向左右两个方向移动相等的距离。

完成页首部分的布局之后，Shea在把它连接到页面其他内容时又遇到了麻烦。Shea想要用两条平行线将页面的左右两栏分开，但将背景图像垂直重复应用到左栏或右栏的方法却都行不通——左边的一栏（#linkList）的高度不够撑满页面，而右面一栏实际上却是由三个独立的div元素（#quickSummary、#preamble和#supportingText）组成的。

因为右栏中没有一个作为容器的最外层元素，所以Shea将这幅两条平行线的背景图片分别应用到了组成右栏的全部三个div上。Shea假定这三个div元素有着同样的宽度，且水平对齐。

#quickSummary, #preamble, #supportingText {

　background: transparent url(bg4.gif) top left repeat-y;

　margin: 0 0 0 400px;

这三个div元素的确水平对齐，但还是出现了一个意料之外的问题：这些div两两之间都有一条水平缝隙（图2-6-4）。我们并没有为其指定任何的外边距（margin）值，那么这些缝隙又是从何而来的呢？

CSS盒模型（box model）中有一个较为晦涩的概念——外边距重叠（collapsing margin）。外边距重叠是指，若两个元素上下毗邻且都定义了不为0的外边距值，同时又没有任何内边距、边框等设定，那么这两个元素之间的距离将小于二者外边距的和¹。因此，两个都带有20px外边距的元素垂直相接并不会显示出40px的缝隙——两个外边距会重叠在一起，最终元素之间的距离只有20px。

注释：¹ 对于都为正数的两个外边距定义来说，两个元素之间的距离为二者外边距距离中较大的一个，即外边距要尽可能地重合。——译者注

但这和Shea遇到的那个缝隙问题又有什么关系呢？原因在于，重叠效果将同时作用于父元素和子元素之上——由于这三个div都没有设定外边距，因此每个div的底部外边距将与其最后一个子元素（即段落元素p）的底部外边距重叠。因为总共的外边距值并不为零，所以其最后一个子元素的10px外边距值仍然要被计算进去，看上去就像是子元素“戳开”了包含它的div父元素（图2-6-5）。

搞清楚产生原因之后，问题也就非常容易解决。为这三个div元素添加1px的垂直内边距，这样将不再满足形成外边距重叠的条件，div之间的缝隙自然也就消失了：

#quickSummary, #preamble, #supportingText {

　background: transparent url(bg4.gif) top left repeat-y;

　margin: 0 0 0 400px;

外边距重叠定义与CSS 2.1规范中：两个或更多个块级元素（内容必须不为空，且没有内边距或边框的定义，也没有应用清除浮动样式）的相邻（外部相连或内部嵌套）外边距将重叠成一个单一的外边距。（www.w3.org/TR/CSS21/box.html#collapsi ng-margins）

现在页首和正文部分都已经完成，该考虑如何将那个黄色的徽章定位在页面右上角了。在将图片覆盖在其他图片上时，选用带有透明区域（这里是徽章投下的阴影）的图片所带来的好处就是无须考虑被覆盖图片上是什么内容。Shea自然可以选择在Photoshop中将原稿的各图层合并，然后将徽章以及其周围的阴影、被覆盖图片内容一起保存为GIF或JPG格式，这样即可保留住徽章漂亮的阴影（图2-6-6）。当然，Shea也可以抛弃掉那部分周围被覆盖的图片，只是将徽章本身保存为透明的GIF格式，但这样却无法留住徽章周围的阴影（图2-6-7）。

图2-6-7 去掉背景只保留徽章本身，受限于GIF对透明度的支持，阴影部分的效果并不理想

但因为对作品来说，这个徽章并不是“必不可少”的，所以Shea并没有使用上述两种方法中任何一种，而是将其存为了PNG格式，这样也免去了很多不必要的麻烦。因为无论放置于什么地方，带有256级透明度的PNG图像都能完美地显示出阴影效果。图2-6-8和图2-6-9就演示了该PNG图片在两种不同背景上的样子。

PNG格式将在本书稍后部分详细介绍，目前为止需要指出的就是， Windows平台下的IE浏览器并不能显示其透明度信息¹，因此，我们就要想办法在IE中隐藏该徽章。最简单的实现方法是使用IE同样不支持的子孙选择器（child selector）²，这样即可有选择性地只将该徽章呈现在能够正常显示其透明度信息的浏览器中。

注释：¹ IE7.0已经能够正常显示出PNG图像的透明度信息。——译者注

html>body #extraDiv4 span {

　background: transparent url(seal.png) top right no-

但显然，对于那些更为正式的Web项目来说，即使是那些非“必不可少”的图像也必须同样显示于IE中，以保证站点的严肃和统一。虽然GIF格式中简单的“开/关”透明度设置³会带来不少限制，但如果仔细规划的话，仍旧有办法实现所需的功能。禅意花园鼓励这种实验性质的超前尝试，但你的客户或许并不能如此“通情达理”。

注释：³ GIF格式只支持设定某个像素是否完全透明，但并不能够设置其具体的透明度，例如30%透明等。——译者注

在规定期限内，仅仅从设计图开始，直至编写出完全基于CSS布局的Web页面的确是个不小的挑战。成功的关键在于将其合理地分割成一些较小的任务——例如，对于Night Drive的页首部分布局，我们就将其分为了两个步骤进行。

事先多考虑几种可能，将使您在问题到来时更加沉着冷静，并做出最正确的决定。对于任何问题，例如改变页面中元素的位置、调整元素的外边距或是为元素添加某种特效等，这一条都是颠扑不破的真理。

图书在版编目（CIP）数据

CSS禅意花园/（美）谢伊（Shea,D），（美）霍尔茨（Holzschlag,M.E.）著；陈黎夫，山崺颋译.--2版（修订本）.--北京：人民邮电出版社，2012.7

ISBN　978-7-115-28376-4

Ⅰ.①C…　Ⅱ.①谢…②霍…③陈…④山…　Ⅲ.①网页制作工具　Ⅳ.①TP393.092

中国版本图书馆CIP数据核字（2012）第118023号

Dave Shea and Molly E. Holzschlag:The Zen of CSS Design:Visual Enlightenment for the Web

Authorized translation from the English language edition published by New Riders.

本书中文简体字版由美国New Riders出版公司授权人民邮电出版社出版。未经出版者书面许可，对本书任何部分不得以任何方式复制或抄袭。

CSS 禅意花园(修订版)

图书目录:

详情

图书摘要

相关图书

相关文章

相关课程