本书系统、深入地阐释了网站的设计与实现，帮助读者从设计的角度来使用CSS以达到完美的效果。作者通过使用标记和CSS的形象的创造性示例，帮助读者掌握实现创意设计的方法。读者将学会如何使用新的设计流程，创建对包括设计师在内的所有团队成员都很好用的原型，有效地使用网格，设计标记的视觉效果，并了解优秀设计过程的每一个阶段——从使用最新的浏览器到在团队协作中高效地应用CSS3。 \r\n　　本书适合Web设计师和开发人员研读，对那些客户要求高、工作节奏快的设计师有着尤其重要的指导作用。本书也适合有一定基础的Web设计爱好者阅读。

1. 发现　\r\n　1.1　超越CSS简介　\r\n　　1.1.1　需要什么样的工具来开始学习　\r\n　　1.1.2　为什么需要超越CSS　\r\n　　1.1.3　尽情地发挥创造力　\r\n　　1.1.4　辅助功能本身就是设计，而不应仅把它当成一个特性　\r\n　　1.1.5　向超越CSS进发　\r\n　1.2　 超越CSS原则　\r\n　　1.2.1　不是所有的浏览器都显示相同的设计　\r\n　　1.2.2　运用所有有效的CSS选择符　\r\n　　1.2.3　CSS3：展望未来　\r\n　　1.2.4　运用JavaScript和DOM来弥补CSS的不足　\r\n　　1.2.5　避免运用Hacks和滤镜\r\n　　1.2.6　使用富含语义的命名规范和微型格式　\r\n　　1.2.7　分享你的想法，与他人协作　\r\n　1.3　什么使超越CSS变得可能　\r\n　　1.3.1　意想不到的CSS用途　\r\n　　1.3.2　浏览器分级支持　\r\n　　1.3.3　发现，过程，灵感，超越　\r\n　1.4　突出内容的设计　\r\n　　1.4.1　突出内容的途径　\r\n　　1.4.2　一个典型的没经过优化的CSS布局　\r\n　　1.4.3　优化内容顺序而不管有还是没有样式　\r\n　1.5　语义就是含义　\r\n　　1.5.1　“CSS 裸体日”　\r\n　　1.5.2　将含义翻译成标记：这个标记是正确的　\r\n　　1.5.3　内容告诉你了什么　\r\n　　1.5.4　语义的前行　\r\n　1.6　标记这个世界　\r\n　　1.6.1　整个世界是一个列表；每一项都扮演着它自己的角色　\r\n　　1.6.2　环视四座皆列表　\r\n　　1.6.3　给我寄一张旧金山的hCard 　\r\n　　1.6.4　学会拓宽视野　\r\n　　1.6.5　从“内容”开始工作　\r\n　1.7　是时候整理一下你所学的知识了　\r\n2. 过程　\r\n　2.1　寻找最佳工作流程　\r\n　　2.1.1　寻找更好的方式　\r\n　　2.1.2　遵循基于内容的过程　\r\n　2.2　搜集内容　\r\n　2.3　使用框架图来工作　\r\n　　2.3.1　传统的框架图在哪里会失效　\r\n　　2.3.2　框架图有商业价值吗　\r\n　　2.3.3　传统框架图以及交互脚本　\r\n　2.4　使用灰盒方法改进　\r\n　2.5　创建静态设计　\r\n　　2.5.1　更快地通过设计流程　\r\n　　2.5.2　把标签指南加入静态设计　\r\n　2.6　使用交互原型　\r\n　　2.6.1　交互原型使梦想成真　\r\n　　2.6.2　创建可重用的代码　\r\n　　2.6.3　框架图和原型的模型　\r\n　　2.6.4　所见即所得：你看到了什么　\r\n　2.7　遵循交互原型最佳实践　\r\n　　2.7.1　选择用于开发的浏览器　\r\n　　2.7.2　使用浏览器插件　\r\n　　2.7.3　尽可能少地使用 div 元素　\r\n　　2.7.4　确保标签是有效的　\r\n　　2.7.5　选择定位优先于浮动\r\n　　2.7.6　组织CSS　\r\n　2.8　过程的实践　\r\n　　2.8.1　着眼于组成部分　\r\n　　2.8.2　编写分离内容的标签　\r\n　　2.8.3　用CSS实现静态设计　\r\n　　2.8.4　构建布局　\r\n　　2.8.5　从body开始　\r\n　　2.8.6　继续向前还是移交　\r\n　　2.8.7　基本颜色样式　\r\n　　2.8.8　创建商标　\r\n　　2.8.9　加上Logo　\r\n　　2.8.10　导航条样式　\r\n　　2.8.11　设计页脚样式　\r\n　　2.8.12　理解元素的排版样式　\r\n　2.9　汇总　\r\n3. 灵感　\r\n　3.1　引入基于网格的设计　\r\n　　3.1.1　设计师与网格　\r\n　　3.1.2　黄金比例和三分之一规则　\r\n　　3.1.3　纯粹的弹性布局　\r\n　　3.1.4　合理的网格设计　\r\n　3.2　当今Web设计中的网格　\r\n　　3.2.1　减法　\r\n　　3.2.2　Airbag Industries 　\r\n　　3.2.3　Jeff Croft　\r\n　　3.2.4　Veerle的博客　\r\n　3.3　寻找Web之外的网格　\r\n　3.4　为Web设计带来新的网格　\r\n　　3.4.1　打破新闻　\r\n　　3.4.2　以网格作为指导　\r\n　　3.4.3　揭穿小秘密　\r\n　　3.4.4　着迷于新闻手法　\r\n　　3.4.5　保持你的画面　\r\n　3.5　在意想不到的地方发现灵感　\r\n　　3.5.1　把主页改头换面　\r\n　　3.5.2　引入基调板　\r\n　　3.5.3　拥有一个设计剪贴簿　\r\n　　3.5.4　要获得界面灵感去看杂志吧　\r\n　　3.5.5　获得版式灵感　\r\n　　3.5.6　重新审视Flash设计　\r\n　　3.5.7　使用图片与相片　\r\n　3.6　精美的艺术活动　\r\n　　3.6.1　设计不仅仅是创建引人注目的视觉效果　\r\n　　3.6.2　不要把焦点放在技术上　\r\n　　3.6.3　提升基调　\r\n　　3.6.4　寻找不同观点　\r\n　　3.6.5　带着目标剪贴　\r\n　3.7　Web设计的美术　\r\n4. 卓越　\r\n　4.1　卓越的CSS　\r\n　　4.1.1　绝对定位　\r\n　　4.1.2　相对定位　\r\n　　4.1.3　浮动的创意　\r\n　　4.1.4　创建侧边栏　\r\n　　4.1.5　结合多种技术　\r\n　4.2　CSS3（三倍好运） 　\r\n　　4.2.1　各部分的汇总　\r\n　　4.2.2　开发新的标准　\r\n　　4.2.3　回到未来　\r\n　　4.2.4　使用CSS3选择符模块进行设计　\r\n　　4.2.5　使用斑马纹提高可读性　\r\n　　4.2.6　使用背景和边框模块进行设计　\r\n　　4.2.7　使用多幅背景图片进行设计　\r\n　　4.2.8　设计多栏布局　\r\n　　4.2.9　使用多栏布局模块　\r\n　4.3　高级布局　\r\n　　4.3.1　回到网格（Grid） 　\r\n　　4.3.2　使用高级布局模块进行设计　\r\n　4.4　结束语

界面重不重要？ 我在一次做顾问时，这样跟开发人员阐述，重视界面其实是事半而功倍的事情。 你做了一个很不错的产品，有很强大的功能，代码规范，架构设计堪称典范，唯一的不足在于界面流于庸俗。 为了将产品推向市场，你做了非常详细的说明，一一介绍产品的设计和功能，然后你的业务员手捧宣传材料努力地向客户介绍这款产品。但很多客户都心不在焉地听着，一过打着电话，一边看着手表，最后非常有礼貌地告诉你的业务员，他们还要“研究研究”。好不容易有一个客户比较有兴趣地听完了功能介绍，但后来一看产品的界面，又呶起了嘴—因为他觉得让他的客户看到界面如此落伍的软件，是一件很没面子的事。 后来，你做了一个功能很简单的产品，它专注于一件事情，甚至用一句言简意赅的话就能清楚地说明。但是这个产品有着简单易用的操作方式，界面也美观大方，处处闪动着灵感，显得非常精致。你为这个产品做了一个布满界面截图的精美的使用说明书。你的业务员只是把这个很薄的小册子放在客户的办公桌上，也没有打扰他们的工作，就回家睡大觉了。然而这一次，你反而接到了很多客户打来的订购电话，因为他们觉得这个产品一开始就深深吸引了他们，而且产品功能也一目了然，极具价值。通过这个故事，深陷于逻辑与秩序的代码开发者也许能明白，只注意功能和架构并不能成为“Heros”。Web 2.0思潮的涌动，AJAX技术的炙手可热，让很多人认识到了客户端技术的重要。但恶补了一番Javascript和CSS后，心中仍感觉不到一丝踏实— 因为从一开始就没有了解Web 2.0思想的核心，“为了技术而技术”，照着书本写几个Demo又怎能驾驭这个更加“苛刻”（海量信息时代，用户找信息已经变成了信息主动找用户，如何在众多竞争者中脱颖而出、吸引用户变得困难重重）和“变化 多端”（客户访问终端也在发生很大的变化，拿着手机、PDA或你想都想不到的终端看网页也大有人在）的时代。 从2005年CSS类书籍的热销的情况来看，估计很多人都学会了float和clear，也理解了什么是盒模型。但刚刚学会使用@import指令来使浏览器能够导入高级CSS设计，学会了几个CSS hacks、“山顶角”和“滑动门”的你，不得不马上面对Andy又为我们提出更高的目标的现实。 阅读这本书是很享受的，掠过一幅幅精美的图片，最先进的Web设计思想已深深地印在你的脑海中，开发人员得以理解什么是设计，设计人员也学会了摆脱从视觉的角度去思考设计的旧习，何乐而不为呢？而每每想到我再也不用花费大量口舌去纠正别人“Web标准就是用DIV而不用Table”的论调，则更是心中暗爽。 本书由谭振林、何颍、桂冠、于飞、田少雄合作翻译。由于这本书的语言非常活泼，增加了我们翻译时理解和表达作者本意的难度，但我的合译者们坚强地走过了这段艰难的旅程，相信我们每一个人都在这个过程中成长了。 最后，谢谢你们。 任何语言在这本漂亮的书的面前，都显得那么苍白无力，大家还是赶快翻开书页吧！ 谭振林 2007年5月于深圳罗湖

Andy Clarke，近十年来一直从事Web工作。他是英国的一个Web平面设计师。从1998年开始，从事设计顾问工作，提供设计的素材和创意（www.stuffandnonsence.co.uk）。
　 作为首席设计师和创意总监，他涉及的工作领域包括本地与全国性企业、慈善团体与政府机构。此外，他还为英国心脏基金会，英国迪斯尼商店，英国拯救儿童组织和世界野生动物基金会做过设计。
　 他也是Web标准项目的成员之一，正是他在2006年重构了这个组织的网站。作为Web设计师和开发人员的代表，他是W3C的CSS工作组特邀专家。
Andy定期培训Web设计人员的动手能力，Web标准的创意应用，以及如何创建美观、易用的网站。他曾在各种工作室和全球性的会议上发表演说。
走出工作室，Andy用他收藏的mod与ska音乐放肆骚扰他的邻居以及周围的人，并梦想着与Paul Weller一起品茶。

为了介绍这本书，我建议您先不要去阅读它，而是花点时间好好欣赏它。 希望通过粗略地翻阅书页，您已经在某种意义上领会了它的设计风格。它太漂亮了， 不是吗？图片和截屏俯拾皆是。亮点在于它巧妙地利用图像而不是一行接一行沉闷的标 记和CSS。引入真实的例子说明具体的Web议题。太不可思议了，关于代码的书居然可以 看上去这样漂亮！ 这就是我要提醒您的。正如您可能已经从书名中推断出来的，这不仅仅是另一本代码书籍，它的内容远远不止于此。它阐述了代码和设计的精妙配合、代码如何很好地支持设计创意以及如何打破枷锁，让我们不必过于顾忌实现。正如您将从这些页面中学到的那样，庞大的在线空间，比如Yahoo，已经开始使用向下兼容老浏览器的技术，但更重要的是，很多公司正在使用新的技术充分发挥新型浏览器的优势。而这些技术全都是我们需要实践并应用到自己的项目中产生效果的。Andy Clarke向我们展示如何做到这些。 某种意义上，这本书让我想起了2005年早期的一些事情。也许您读过《CSS禅意花园》（已由人民邮电出版社翻译出版），一本我有幸和MollyHolzschlag合著的书，她也是本书的 编辑。 在《CSS禅意花园》中，我们首次讨论CSS不仅放在面向结构化代码的风格中讨论，还应结合设计理论和精心设计的例子来解释、说明和启发。而本书让我想到了一个很好的下一步。完成了《CSS禅意花园》，然后呢？Clarke先生走过来，告诉了我们所有的答案。 在《CSS禅意花园》中我们领会到基于CSS的设计并不一定丑，在技艺高超的视觉设计师的手中，CSS可创造无限可能。现在我们通过学习本书明白Web现在的情形仅是一个起点，是时候展望未来了。 更重要的是理解。本书不仅仅是一本指南，只介绍那些众多技术手册已经讲解得很充分的内容。您面临这本书的理念的挑战，启发您把Web从现在的情况带入一个新的高度。本书不仅是一本解决问题的手册，更是一份宣言：超越今日之Web。不要只是关注过去，把您的目光转向更广阔的未来。Clarke先生告诉了您如何去做。 Dave Shea 2006年10月 专家评书： 《超越CSS》，我听到这本书名时充满了无限期待，由于标准化WEB页面制作的热捧，市面上关于CSS的书籍也雨后春笋般的热销开来。《超越css》到底如何超越呢？ 当W3C提出结构与表现分离的思想开始，CSS这项技术就开始在WEB领域得到了广泛应用,页面设计师开始尝试使用CSS来控制页面的展示效果，使用符合标准的XHTML标签来构架网页基本结构，设计师们也逐渐发现在页面结构标准化框架下，使用CSS可以随心所欲控制页面中内容的布局、定位、字体大小及所有内容展现的表现形式，也帮助我们更好的协调页面内容组织与关系。CSS+DIV的排版布局方式可以说推动了网页发展的一场革命，web中越来越多页面结构更加合理化，页面中数据可以更好的被搜索引擎检索到，合理的页面框架也很好的被程序开发人员认可。CSS广泛应用从2001年到现在，已经不再单纯是一种技术，而更加带有了艺术气息。WEB页面可以由CSS控制其所展现的样式，通过改变某个CSS文件来做到页面在瞬间发生结构和颜色的变化而满足不同环境的需求。 《超越CSS》这本书中，作者向我们介绍了如何将CSS技术与艺术美妙结合起来,使用大量范例来论证如何更加艺术化展示CSS技术,而不再单单是纯粹CSS技术应用的知识推广。 它不仅教会我们如何更好的使用CSS来控制页面布局和页面表现效果，并且它引导我们如何去使用合理的XHTML标签。XHTML作为一种优秀的结构化语言，更好的使用XHTML标签，页面的结构才更加合理、规范。合理化选择XHTML标签加之CSS及CSS高级技巧的灵活运用，我们的WEB页面才会更加的完善。在本书中，作者以Cookr项目为主题，用结构和表现分离的手法，逐步去实现Cookr项目的制作过程。对于Cookr项目首页，合理的使用

-

标签，然后配合使用

及

标签，完成了首页的结构布局，没有冗余的不必要的标签，作者还应用了类似及

辅助标签来配合使用以控制实现预先设计的效果，启发我们对辅助标签应用的灵感。如果能灵活使用等标签，会带来事半功倍的效果。页面主体结构之后就是使用CSS完成表现层的制作。作者详细声明浏览器默认样式的定义，可以说对于默认的样式定义考虑非常充分，涵盖了常用的标签的全局定义，为之后使用这些标签做好了铺垫。通过Cookr项目的实战，作者介绍了布局、定位、字体弹性控制、颜色控制等CSS技巧，在CSS的使用中，作者应用z-index,position等技巧处理版式表现效果，值得我们效仿、思考。最后作者为我们展示了排版样式的定义，使其Cookr项目的交互原形的最终完成。在《超越CSS》中，学习CSS不再枯燥，因为艺术与技术得到了结合。 没有最好、只有更好，《超越CSS》值得拥有。 ——CSDN UI组组长,首席页面架构师武悦