CSS 基础教程 (2009 年度畅销榜NO.4353 )

本书是优秀的CSS 入门书，重点讲述了如何使用CSS 实现基于Web 标准的网站开发，实现网站内容和表现相分离。\r\n　　本书包括两部分。第一部分介绍了CSS 的基础知识和基本概念，再利用CSS 分别对网页创建中的一些基本元素加上样式，包括：文本、图像、列表、链接、表格、表单等。第二部分主要讨论了基于CSS 来实现网页基本布局的相关概念与技术，包括浮动、流体布局等。本书最后还给出了一个真实的案例，将本书的所有内容进行了综合讨论。\r\n　　本书适合于各层次Web 开发人员、设计人员和测试人员学习参考。

第一部分　了解CSS\r\n　第1章　入门　\r\n　　1.1　将CSS应用到（X）HTML　\r\n　　1.2　维护和组织样式表\r\n　　1.3　高效的CSS语法　\r\n　　1.4　准备好继续进行\r\n　第2章　CSS核心概念\r\n　　2.1　ID与类\r\n　　2.2　使用层叠\r\n　　2.3　分组\r\n　　2.4　继承\r\n　　2.5　上下文选度量\r\n　　2.6　CSS度量\r\n　　2.7　小结\r\n　第3章　CSS构造块\r\n　　3.1　div\r\n　　3.2　维度：宽度和高度\r\n　　3.3　外边距\r\n　　3.4　内边距\r\n　　3.5　外边距、内边距和主体\r\n　　3.6　边框\r\n　　3.7　小结\r\n　第4章　文本\r\n　　4.1　为什么文本如此重要\r\n　　4.2　基本字体属性\r\n　　4.3　可用字体\r\n　　4.4　默认的浏览器显示\r\n　　4.5　应用样式\r\n　　4.6　请务必使用Tine-height属性\r\n　　4.7　Tine-height属性\r\n　　4.8　其他的关键字体属性\r\n　　4.9　灵活处理文本\r\n　　4.10　愿字体与你同在\r\n　第5章　颜色、背景与图像\r\n　第6章　列表\r\n　第7章　链接\r\n　第8章　表格和定义列表　\r\n　第9章　表单\r\n第二部分　逻辑布局\r\n附录　CSS参考\r\n索引

你现在一定很兴奋吧？将要成为专业的CSS天才的前景是不是已经让你跃跃欲试呢？读过本书之后，你就有充分的资格成为Web奇才，可以利用CSS来为你和你的客户节约时间、金钱，并减少压力。 在你搭上CSS启蒙巴士之前，有必要熟悉一些Web设计者和开发者常用的术语，尤其是作者使用的特定术语。 Web 标准和可访问性 这需要先简单地回顾一下历史。1994年，万维网联盟（www.w3.org）成立了，它主要为了进一步提升因特网的通用实现方式和互操作性。他们的一部分工作是制定一些Web标准，例如(X)HTML和CSS，并使这些标准与Web开发者和使用者的需要相一致，使Web对于每个人来说都更加美好。 多年以来，Web标准对浏览器厂商的影响力不够，厂商往往很晚才意识到Web标准的重要性。因此，基于标准设计的网站在不同的用户浏览器上表现不一致，以至于整个设计不管对于设计者本身来说还是对用户来说都一样糟糕。如果你没有经历过Web设计的这些艰苦的日子，你真的很幸运。 从1998年开始，为帮助网站设计走出困境成立了Web标准项目（WaSP）。它为标准而战，增强了Web上发布站点的可访问性和长期生存能力，同时还降低了开发的成本和复杂程度。WaSP团队与浏览器厂商、网页制作工具厂商和网站设计者一起努力制定更好的标准。在许多具有责任心的Web宣传者的充满激情的血汗和泪水的努力下，Web标准项目成为了一个联盟，它为标准而奋斗，努力使每个人都能够学习Web技术。访http://Webstandards.org，可以获得更多的信息，图0-1所示为该网站首页。 2003年，Jeffrey Zeldman（www.zeldman.com）写了一本书，名为Designing with Web Standards1（New Riders），从而彻底改变了很多人设计网页的方法。这本书被称为真正变革的开始，它让很多人重新思考如何构建网站，坚决使用CSS以提高网站的可访问性和可用性。 优点 Web标准给我们带来了很多好处。网页的大小减小了，所以下载时间也缩短了，这样占用的带宽也减少了。与用户代理（浏览器、移动电话、PDA、辅助性软件 2）的兼容性增强，也使得站点的可访问性增强。更重要的是，基于Web标准的站点是面向未来的——不管Web下一步怎么发展，它都能未雨绸缪。而且，标准是非常重要的，因为它允许内容和表现分离，并且提高站点的可访问性。我们先看看这些术语的意义吧。 内容和表现相分离 Web标准最基本的规则可能就是内容应当和表现分离了——采用外部样式表来实现所有装饰性的丰富表现，但是核心的内容（(X)HTML）仍然保持简明扼要。将所用的表现成分与标记分离，站点范围的样式改变可以通过修改简单的CSS文件轻松实现，而不需要在站点上更新每个页面，这样大批量的重新设计工作将变成小菜一碟。同样重要的是当用户觉得有必要时，可以在别人的网站上应用他们自己的样式表，从而很轻松地控制网页内容。 可访问性 基于Web标准精心设计中非常重要的一点就是可访问性是与生俱来的。当然，还有一些其他的方法可以提高网页的可访问性并为用户提供更多的方便。但是将内容和表现分离，并使用正确的标记来实现相应的功能可以提高所有访问者访问网站的可能性，而与访问者的能力无关。可访问性的重要原则非常简单：任何人在任何地方不管是使用什么平台，也不管他具有什么样的技术、经验或者能力都能够访问你的内容。只要内容遵守Web标准，你就可以自由地使用CSS来应用一些特殊的表现信息，而不用担心内容会受到影响，即使是视力有问题的人通过屏幕阅读器也能正确地使用你的网站。当然，Web的可访问性并不是仅仅考虑视觉上的残疾 ——认知上等一些其他方面的残疾也需要考虑。想了解更多关于Web可访问性的知识，可以阅读一本专著WebAccessibility:Web Standards and Regulatory Compliance（friends of ED, 2006）以及一些重要的在线资源，如www.accessify.comhttp://diveintoaccessibility.org。 本书的第14章将专门讨论CSS中的可访问性。 向标准靠拢 到现在为止你应该能够理解将Web设计转变成基于标准的Web的一些争论了……可能在阅读本书以前你已经知道了。但是，为什么还有人不使用CSS来为 Web加上样式并实施布局呢？许多人认为CSS非常难以实现，它只是针对某些浏览器的，并且它的学习难度太大。其实，最大的问题是大量比较守旧的设计人员没有全部采用Web标准。很多设计人员还使用一些老的标记来实现Web样式，从而把一个生动的网站变得非常庞大。他们通常依赖表格来实施布局，他们还将大量的字体标签和一些废弃了的方法散布在代码中。他们按照现在的方式做也能赚到钱，因此，他们认为不需要改变。这些人是非常危险的，别学他们。 当然，因特网中还是优秀并且负责任的人更多，因此Web标准的优点还是不容忽视的。自从Zeldman写了那本书以后，成千上万的人已经开始采用基于 CSS的设计了，并且很少有人走回头路。可访问性好的网站没有吸引力的说法已经一去不复返了。很多可访问性非常好并且非常有用的网站同样做得非常漂亮。这主要归功于那些聪明并且具有经验的CSS设计人员为其加上了样式（图0-2就是一个例子）。 我希望在读完本书后，你也可以实现这样的设计。基于CSS的设计充满挑战，但是非常刺激和令人兴奋。未来就在你的手中。 关于本书 我常想，如果在我开始探索CSS时能够有这样一本书就好了。那样，我就可以节约大量的时间。本书假定你对(X)HTML有非常完整的了解，但是对CSS所知不多甚至一无所知。对于后者，本书从零开始。 很多CSS图书都会绕很大的圈子，然后再慢慢引你登堂入室。本书则不同，上来前三章就直接探讨了CSS的一些核心概念，从而为后续的章节打下坚实的基础。 CSS本身是一项比较简单的技术，它的强大在于处在规范核心的一些复杂方法和技巧。因此，前三章为本书后续部分提供了基础。你一开始可以不阅读这三章，但是你必须熟悉这三章所介绍的主题。这样，当后续的章节中提到某些技术时，你可以迅速在前三章中找到。比如说，我在第14章提到“层叠”，但是你不知道它的具体含义，你可以很快地翻到前面搞清楚它的含义。 之后，本书第一部分的每一后续章节都为某个特定的标记组添加样式，包括表格、链接、文本等，并提供了为这些标记加样式的组织有序的参考。 本书的第二部分则主要关注布局以及在一些Web设计过程中会碰到的问题。从这一部分开始，你将从一个专业Web设计人员的角度来考虑Web设计，并在 Web的可访问性、简洁以及美观等方面综合应用你所学到的一切知识。这一部分还专门介绍了比较复杂的但非常有用的hack、滤镜以及提高网站可访问性的一些技术，从而可以让你更好地驾驭CSS。 最后，本书给出了一个案例分析，将本书的大部分技术综合到一起。该案例详细给出了如何用纯正地道的CSS来为一个网站加上生动的样式。它将使你大开眼界！本书还给出了一个CSS的语法参考，详细给出了所有的属性和属性的可能值。因此，你可以非常快捷地查看这些参考来解决一些和属性相关的问题。 如果你愿意，你可以逐页阅读本书，因为本书具有比较好的逻辑性。另外，它也可以作为一个参考指南，因为它涉及CSS的不同方面和主题，能够在设计人员需要的时候提供相应的参考。不管怎么样，我希望你会喜欢本书。 本书约定 大部分情况下，本书出现的所有新概念都已在前面的章节中有所介绍。因此，在开始阅读本书之前，有一些约定你需要注意： □(X)HTML指HTML和XHTML这两种语言。 □如果不作特殊说明，所有的CSS都遵守CSS 2.1规范。 □如果不作特殊说明，本书中所涉及的 (X)HTML示例都假定在一个合法的(X)HTML文档的 body 中，而CSS则在由(X)HTML文档的 head 所链接的外部样式表中。 □在大多数情况下，如果文本中涉及某个(X)HTML标签，后面跟着“元素”两字，那么它表示整个元素。例如， strong 元素指整个元素，包括从起始标签 strong 到结束标签 /strong 中的所有内容。 致谢 冰岛人有一个词叫trúnó，当希望向朋友、家人和同事表达爱意却又难以启齿时就用这个词来表达。我现在就准备向你们表达一些真诚的trúnó。 我将永远感谢我在Agenzia的朋友和同事，Lee Hickman、Simon Rudkin、Maxwell Harrison和Alun Edwards。如果没有在Agenzia工作的这些年中所学到的东西，我就没有资格写这本书。你们对我的帮助非常大，谢谢你们。 还要将我的爱、拥抱和感激献给非常宽容的、我亲密的朋友Oliver Wood、Emma Crosby、Michael Armstrong、Jamie Craven、Jon Burgerman、Lee Walker、Si、Cass、Ben、Sally、Sarah、Rick、Josh和Rob——我很快又可以和你们一起游玩了！ 非常感谢我的母亲和父亲，还有我的祖父和外公（他们不知道我多尊敬他们）。还要谢谢Auntie Christine在我还是个少年时就鼓励我要有创新。还应该谢谢我的宠物猫——Ziggy、Bear-Face和Mute-Puss。 对Apress团队更是感激不尽。对Chris Mills（一位传奇人物）、Beth Christmas、Ami Knox和Laura Esterman（以及所有幕后人员）心存感激。非常高兴有Richard Rutter和Dan Rubin来为本书做技术审稿，非常荣幸尊敬的Andy Clarke给本书写序。因为有了你们，本书的完成才能如此轻松。 非常感谢我的英国朋友和让我获得灵感（或提供免费素材）的外国朋友，尤其是RogerJohansson、Cameron Moll、Veerle Pieters、Shaun Inman、Jason Santa Maria、Ryan Carson——还有所有采用或促进了Web标准的人。 感谢ExpressionEngine团队，并对我在本书写作中用到的其他工具的发明者深表敬意，这些工具包括MAMP、DropSend、 Basecamp、TextMate、Transmit、好的浏览器、我信任的Powerbook、iTune和奶茶的发明者。 最后，我必须要谢谢Colly Logic网站和本书的所有读者，是你们让我更有信心和希望！

无封面