CSS禅意花园（Web视觉艺术设计的王者之书）

　　本书作者是世界著名的网站设计师，书中的范例来自网站设计领域最著名的网站——css zen garden（css禅意花园）。全书分为两个主要部分。第1章为第一部分，讨论网站“css禅意花同”及其最基本的主题，包含正确的标记结构和灵活性规划等。第二部分包括6章，占据了本书的大部分篇幅。
　　 每章剖析“css禅意花园”收录的6件设计作品，这些作品围绕一个主要的设计概念展开，如文字的使用等。通过探索36件设计作品面临的挑战和解决的问题，读者将洞悉主要的web设计原则以及它们运用的css布局技巧，理解css设计的精髓，恰当地处理图形和字体来创建界面优美、性能优良且具有强大生命力的网站。
　　 本书原版书自出版以来持续畅销，受到众多网站设计师的推崇。本书适合网站设计人员和网站设计爱好者阅读，更是专业网站设计师必读的经典著作。

第1章 追本溯源
第2章 设计
2.1 atlantis
2.2 zunflower
2.3 springtime
2.4 viridity
2.5 ballade
2.6 night drive
第3章 正文布局
3.1 backyard
3.2 entomology
3.3 white lily
3.4 pret-a-proter
3.5 cs（s）monk
3.6 not so minimal
第4章 图像
4.1 japanese garden
4.2 revolution！
4.3 deco
4.4 no frontiers！

　　“CSS禅意花园”网站（www.csszengarden.com）的超常创意就已经足够让我们唏嘘不已——一张亘古不变的HTML，仅靠着数百个不同的CSS样式表，就成就了数百个风格迥异而又精彩绝伦的网页设计作品！而一本计算机技术著作的书名若是敢包含“禅（Zen）”，那么作者又将会对该技术有怎样的理解，也会对自己有着怎样的自信？
　　而此时此刻，这样一本讲述“CSS禅意花园”网站的、名为《CSS设计禅机》的书就这样静静躺在你手中！毫不夸张地说，它丝毫没有辜负“禅”这个美名的褒扬，加上“CSS禅意花园”在Web标准领域内无可争议的地位，二者相辅相成，交相辉映，让本书当之无愧地站在了Web标准设计领域中旁人难以企及的巅峰。
　　这本书是教我们学习CSS的么？不尽然；这本书是教我们学习Web标准的么？不尽然；这本书是教我们学习网页设计的么？不尽然；那这本书是做什么的呢？为什么要读呢？
　　实际上，这并不是一本用来入门的教科书，它已经跳出了某种技术或是某个主题的限制，涉及的范围异常广泛：从Web技术的发展到用户体验，从简单的模仿到富有灵性的创意，从心理学、人类学和社会学到深层次的艺术理念……无所不包却又大都点到为止，留给我们充分的思考空间——薄薄的300页篇幅、屈指可数的7个章节，寥寥的36个实例无一不体现了作者的精巧与良苦用心。所谓滴水藏海，阅读本书，我们将体会到的是一种开阔、超然的对技术、对美的总体把握能力——这或许也正是“禅”的真谛吧！全书始终围绕在符合Web标准的网页设计的方方面面，但却从没有任何枯燥的说教，抑或是冗长的代码，而是在更高的位置、从一个全新的角度娓娓道来，如涓涓溪流般潜移默化地让你体会到Web标准的好处。正如老子在《道德经》中所说的那样，大音希声，大象无形。
　　100个人眼中有100个哈姆雷特，《CSS设计禅机》一书也是如此。对于CSS、Web标准以及网页设计技术，无论你是初出茅庐的新手，还是渴望更进一步的提高者，抑或是浸淫多年的专家，都能在书中领悟到独一无二的意境，学到适合自己的知识。当然，你最好已经有了丰富的Web设计、开发经验，否则只被本书中那一个个漂亮精致的设计所吸引，而却对其背后隐藏的那片世界望洋兴叹，岂不遗憾？
　　若你只是想要一本CSS语法的快速参考手册，或是一本从头到尾循序渐进讲述Web标准的优势以及实现方法的“传统”技术图书，那么这本《CSS设计禅机》显然不会是一个好的选择——若你正在书店中，那么方圆一米之内就有无数种更“好”的替代品。阅读本书，你需要小资一般的情调——暖暖阳光的午后、安静舒适的房间、一盏弥漫的香茗……仔细领悟其中蕴含的深意，时而沉浸其中，时而掩卷沉思，时而打开电脑记录下最新的灵感，你的心灵将要充盈着沉静、安闲，直至领悟到技术与艺术结合起来的那份超然的意境。
　　正是因为本书的原版如此经典，我们在翻译时倍感诚惶诚恐。原作语言带有强烈的西方文化特色，很多俗语、典故更是让翻译的过程充满了艰辛，加之时间有限，以致一度让我们萌生了退却的念头，深恐一不小心糟蹋了如此的传世之作。虽在翻译的过程中竭力以求信、达、雅，但限于自身水平，译本很多地方仍旧有所不足，还望各位读者不吝指正。您可以通过我的博客（http://dflying.cnblogs.com）或Email（DflyingChen@hotmail.com）与我们联系。本书的更正也将发布到我的博客网站上。
　　在CSS领域，很多术语的翻译颇有争议，也非常值得玩味。这里我们列出翻译中遇到的一些常见的、争议较大的CSS术语对照。选择的标准主要考虑约定俗成的翻译习惯以及更明确的表意。我们还在http://dflying.cnblogs.com/archive/2007/02/04/639837.html中一一列出了选择这些译法的详细原因以及各种译法之间的比较，若有更好的建议，也请至上述地址指出，我们会在再版时作以修订。
　　·box model：盒模型
　　·padding：内边距
　　·margin：外边距
　　·hack：（不译）
　　·liquid layout：流式布局
　　·ancestor element：祖先元素
　　·descendant element：后代元素
　　·filter：滤镜
　　·selector：选择器
　　·accessibility：可访问性
　　在翻译过程中，我们得到了众多家人、朋友和同事的关心与鼓励。感谢Aditya Bansod先生，不厌其烦地为我们解释了很多原著中艰深晦涩的语句；感谢段大为先生为我们解释原著中的日语；感谢人民邮电出版社的谢工女士、李际先生和付飞先生，ajaxcn.org的李锟先生给了我们这宝贵的翻译机会；感谢Cure、xilihwala、sheva.wen、kevin、hax、Cat Chen、琳琳的小狗、THIN、small tiger和liucsoft等博客园网友为本书的术语翻译提出的宝贵意见。没有你们的支持与帮助，我们不可能在如此短的时间之内做到这些！
　　陈黎夫

　　前言
　　
　　
　　注意：可以前往www.csszengarden.com浏览网站“CSS禅意花园”及本书中的所有设计作品。
　　要查看标记，可使用浏览器的“源文件”功能，它通常位于菜单“查看”中。要查看设计中使用的CSS，可选择设计，然后找到链接View This Design’s CSS。在每项设计中，该链接的目标页面都不同。
　　
　　欢迎阅读本书，它是围绕一个旨在塑造Web未来的项目编写的。
　　《CSS设计禅机》的诞生缘于2003年5月8日创办的一个网站。该网站的初衷是改变人们对Web设计的看法，却始料不及地改变了全球技术发展的趋势。该网站名为“CSS禅意花园”，是来自世界各种的众多天才协力合作的结晶。
　　“CSS禅意花园”在发布宣言和展示作品两方面并重，创建它旨在展示通过基于CSS设计可实现的视觉效果。向设计师征集以样式表和图像的方式提供的原创设计，但规则是所有设计都必须使用相同的HTML文件。每件设计的HTML都完全相同，无一例外。
　　不可思议？甚至有点疯狂？也许兼而有之，但毫无疑问，只要使用得当，CSS比任何设计工具都不逊色。《CSS设计禅机》展示了网站收到的36件最杰出的作品，深入剖析了创作人员的设计历程及他们使用的工具和编码方法。
　　整本书就谈论一个网站？是真的吗？如果这是一个普通的网站，当然有理由这样怀疑。但“CSS禅意花园”的内容如此丰富多彩而又如此实用，并且都由世界各地各怀绝技的设计师撰写，因此最严峻的挑战是如何将其揉合到一本书中。
　　
　　本书介绍的内容
　　
　　本书是介绍和描述该网站的吗？从某种意义上说，是的。本书是有关Web设计最佳实践和技巧的教程吗？显然如此。它是一个令人赏心悦目的设计画廊，设计项目时可从中获取灵感吗？当然没问题。
　　“CSS禅意花园”涉及众多有关如何完成现代Web设计的主题，如果专门探讨设计的某个方面，如版式，那么连展示该网站的冰山一角都谈不上。编写本书时，我们就清楚地认识到了这一点，因此必须涵盖方方面面：文字的使用、彩色理论、版式设计技巧，应有尽有。
　　从《CSS设计禅机》能够学到CSS知识吗？当然，但不是初学者的水平。要侧重于视觉设计技巧，必须跳过入门课程，直接进入中级课程。市面上后有一些不错的技术书籍，可帮助快速掌握有关CSS句法和语法的基础知识。我们建议读者购买其中一本，以快速掌握这些技术，然后阅读本书，学习如何以极具视觉震撼力的方式应用它们。
　　本书只概述CSS技术，将重点放在解决视觉设计问题上，而不详细描述CSS规范的方方面面。在合适的时候，将讨论浏览器的支持情况，以确保课程的实用性。
　　
　　本书针对的读者

　　国内的Web开发技术与美国相比大约相差3年左右，应用Web标准的差距也大约是3年左右。今天，在积累了很多开发经验和教训之后，国内的一些网站已经认识到基于table的布局的严重缺点，并且已经在尝试摒弃这种旧的方法，转向完全的CSS布局。
　　
　　作为一个老的Web开发者，我还记得浏览器大战的混乱年代所遗留下来的恶果。在2001年，我在德国的一家小型软件公司工作过半年，公司位于德国黑森州一个风景如画的小镇。我的主要工作之一是做DHTML开发。在国外做Web开发，老板的要求要苛刻的多。我所开发的各种动态页面效果必需要支持多种浏览器，在多种浏览器中要获得几乎完全相同的表现效果。在当时来说，主要要支持的浏览器就是IE4和Netscape4，这是我们当时的客户群使用的最多的两种浏览器（当时的德国人还在广泛使用这两种老旧的浏览器）。
　　
　　有一天，老板让我实现一个常见的“走马灯”的页面效果。老板可能觉得这是一件非常容易的工作，然而它却耗费了我两个深夜的加班。IE4和Netscape4各自有一套不同的页面模型，实现相同的功能，必需要开发两套不同的代码，分别进行测试。因此支持两种浏览器，就意味着双倍的工作量。IE4和Netscape4都不支持CSS，布局完全使用table套table，页面代码搞的相当复杂。
　　这样类似的事情在当时做过很多次，最后我的DHTML开发水平放在国内也能算是个高手了。然而我却没有多少自豪感，我感觉自己的大量时间似乎并不应该浪费在与IE4和Netscape4这两个怪物的搏斗上，还有很多更加有趣的事情等着我去做。
　　
　　俱往矣，忆苦之后再来思甜。今天，主流的浏览器都已经能够很好地支持Web标准，主要就是XHTML/CSS/DOM这三大标准。今天做Web前端（即浏览器端）的开发，在大多数场合，都只需要写一套html、一套css、一套JavaScript就可以正常地运行在所有主流的浏览器中。随着浏览器新版本对于Web标准支持的改善，少数必需要编写特定于某种浏览器代码的场合会越来越少。
　　
　　在这三个标准中，国内的Web开发者掌握的最差的就是CSS。基于table的布局的惯性思维严重阻碍了Web开发者对于CSS的接受。不过另外一个原因也跟国内缺乏能反映出CSS标准最新发展成果的高水平著作有关。大多数国内的Web开发者学习CSS的主要方法是通过试错法，而且很多人只在一种浏览器的某一特定版本（通常是IE6）上测试页面的表现。试错法是一种效率最低的学习方法，而且很多时候得到的经验和结论有可能是错误的。有鉴于此，人民邮电出版社适时出版了《精通CSS》和《CSS设计禅机》两本代表国外CSS应用最高水平的著作。这两本书对于国内的Web开发者而言，正是他们当前所急需的书籍。
　　
　　虽然W3C的CSS2规范（http://www.w3.org/TR/REC-CSS2/）在1998年就成为了正式的规范，但是因为主流的浏览器对于CSS的支持实现的非常缓慢，实际上CSS被广泛应用是在2001年之后的事情。那个时候，至少两大市场占有率最高的浏览器IE和Mozilla的最新版本（IE6和Mozilla1.0）对于CSS都已经有了不错的支持。能够完全支持CSS1，并且部分支持CSS2。2003年，Web标准项目（WaSP）的核心成员Dave Shea创建了CSS禅意花园网站，很快就成为了普及Web标准的指标性网站，成为了广大Web设计师学习模仿的目标。直到今天，CSS禅意花园网站仍代表着应用CSS的最高水平，而《CSS设计禅机》则是CSS禅意花园网站设计师多年心血的结晶。
　　
　　毫无疑问，CSS是一种伟大的技术，它使得对于HTML的应用回到了它的本原——表达页面的结构含义而非表现含义。CSS也是目前Web开发中最为成熟和可靠的表现技术。XHTML/CSS/DOM三大标准清晰地划分出了页面中的结构/表现/行为，将三部分分别放在html、css、js文件中。清晰地划分出页面的这三个部分，现在成为了对于DHTML组件设计优劣的一个判断标准，这个标准被称作Unobtrusive。通过应用CSS来完全控制页面的表现，可以完全将页面的结构和表现分离开，实现页面的结构和表现最大限度的重用。最终带来的好处有这些：
　　1. html文件和css文件达到了最简化，文件尺寸相比基于table布局实现相同的表现效果会小很多。
　　2. 实现了高度重用的单个css文件可以控制多个html文件的布局和表现，维护和改版起来非常容易，也非常容易做到换肤等效果。
　　3. 这样的页面更能受到搜索引擎的青睐。因为这样的页面标签达到了最简化，搜索引擎最喜欢这样的页面，因此可以预见这样的页面会得到更好的搜索引擎排位。
　　
　　 全面转向基于CSS的页面布局，这是国内Web开发领域一场很大的变革。这场变革将会改善Web应用的可用性，并且使得Web开发团队更加敏捷。尤其对于Web 2.0网站的开发者而言，CSS是他们必需精通的技术。让我们共同努力，促使这场变革尽快顺利完成。CSS禅意花园网站和《CSS设计禅机》已经充分展示了其设计师的智慧、创意和艺术修养。接下来呢，是不是该轮到您露一手了？
　　

　　本书是我读过的同类图书里唯一带有设计理念的ＣＳＳ书籍，它在内容上侧重于趋于完美的理念设计web页面．然后告诉你如何应用ＣＳＳ来布局。作者向我们传达了“设计理念”为主，“技术”为辅的网页设计思路。书中有很多难以描述的巧妙设计思路，使得设计效果富有生命力，这种生命力不是用技术来实现的，而是完整的由作者的脑海中传达给读者，告诉读者他思考的设计理念。比如我看了第二章的设计方面，作者点缀贝壳，因为贝壳藏身海底，设计者在贝壳上点缀了些海洋锈迹，这个效果看起来相当舒服，富有层次感。真是让我受益匪浅。
　　就我个人感觉来说，这本书绝对是web设计领域的经典之作。妙就妙在不是教你如何设计，而是引导你的设计理念，没有理念，再高的技术做出来的东西也不过如此。一个人的能力是多方面的，技术只不过是其中的一环；绚丽的效果并不代表一切，就好像能做漂亮衣服的裁缝不一定会选衣服和搭配服饰。在设计领域内，设计理念永远走在技术前面。
　　——中国最大IT技术社区CSDN网站 首席网页设计师 武悦