Ne图灵程序设计丛Wb川发系列 Apress CSS Mastery Advanced Web Standards solutions 精通CSS 高级Web标准解决方案 Andy Budd 英] Cameron Mo‖著 Simon Collison 陈剑瓯译 Amazon第一Css畅销书 CSS Mastery ■最有用的CSS技术汇总 ■解密业界大师绝技 人民邮电出版社 POSIS& ItLECOM PRISS
精通 CSS： 高级 WEB 标准解决方案 前言 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原版书。 作者：Andy Budd、Cameron Mool、Simon Collson 1 起点网络提供 webttt.com
精通CSS:高级WEB标准解决方案 前言 序 在网页设计的精彩世界里,实现同一个目标有无数的方法,而且新的方法还在不断地出现。对于特定的 问题没有唯一正确的解决方法,丰富的选择使我们这些网页设计人员受益良多,同时也困扰着我们。这些选 择虽然能使网页设计变得有趣。但同时也带来了很大的麻烦。本书将帮助你减少麻烦,理清头绪。 Andy budd多年来一直在编写、设计和宣讲基于标准的网页设计,我们现在有幸在本书中看到他以简洁 清晰的方式讲授最重要的CSS技术。本书提供了一套网页设计人员不可或缺的解决方案、技巧和经验 有些图书中仅仅提出一种实现某一目标的正确方法,我很不喜欢这样的做法,Andy所做的正好相反,他 为各种任务(如对链接应用样式、创建标签页式导航和创建多列布局等)提供了多种方法。掌握了常见设计元 素的这些时髦漂亮的设计方法,你就可以更好地做出选择。 不只如此,Andy还邀请两位出色的设计人员将这些技术组合在一起,通过两个实例研究向我们展示了这 些基本技术如何组合在一起。我长期以来一直是 Cameron和 Simon的崇拜者,看到这两位分别讨论流体布局 无懈可击的布局和灵活的样式解决方案的实例研究,真的是受益匪浅 好了,现在开始深入研究各种设计方法,祝你早日成为精通CSS的高手 Dan Cederholm 于马萨诸塞州 Salem市 (Dan是 web Standards solutions一书的作者) 作者: Andy Budd、 Cameron Mool、 Simon collison 起点网络提供webttt.com
精通 CSS： 高级 WEB 标准解决方案 前言 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原版书。 作者：Andy Budd、Cameron Mool、Simon Collson 起点网络提供 webttt.com 序 在网页设计的精彩世界里，实现同一个目标有无数的方法，而且新的方法还在不断地出现。对于特定的 问题没有唯一正确的解决方法，丰富的选择使我们这些网页设计人员受益良多，同时也困扰着我们。这些选 择虽然能使网页设计变得有趣。但同时也带来了很大的麻烦。本书将帮助你减少麻烦，理清头绪。 Andy Budd 多年来一直在编写、设计和宣讲基于标准的网页设计，我们现在有幸在本书中看到他以简洁 清晰的方式讲授最重要的 CSS 技术。本书提供了一套网页设计人员不可或缺的解决方案、技巧和经验。 有些图书中仅仅提出一种实现某一目标的正确方法，我很不喜欢这样的做法，Andy 所做的正好相反，他 为各种任务(如对链接应用样式、创建标签页式导航和创建多列布局等)提供了多种方法。掌握了常见设计元 素的这些时髦漂亮的设计方法，你就可以更好地做出选择。 不只如此，Andy 还邀请两位出色的设计人员将这些技术组合在一起，通过两个实例研究向我们展示了这 些基本技术如何组合在一起。我长期以来一直是 Cameron 和 Simon 的崇拜者，看到这两位分别讨论流体布局、 无懈可击的布局和灵活的样式解决方案的实例研究，真的是受益匪浅。 好了，现在开始深入研究各种设计方法，祝你早日成为精通 CSS 的高手。 Dan Cederholm 于马萨诸塞州 Salem 市 (Dan 是 web Standards Solutions 一书的作者) 2
精通CSS:高级WEB标准解决方案 前言 前言 尽管CSS资源的数量越来越多,但是在CSS邮件列表上仍然反复看到同样的问题:如何让设计居中?最 好的圆角框技术是什么?如何创建三列布局?如果你熟悉CSS设计社区,那么往往会想起提供了某篇文章或 某种技术的网站。但是,如果你是CSS的初学者,或者没有时间阅读所有博客,那么这些信息可能并不好找 在CSS的某些比较晦涩的方面(比如定位模型和特殊性),即使是有经验的CSS开发人员也会遇到问题。这 是因为大多数CSS开发人员是靠自学的,他们从文章和别人的代码中学习经验,而没有全面理解规范。而且 许多人认为,CSS规范是复杂的并且常常自相矛盾,是为浏览器厂商而不是为网页开发人员编写的。 此外,还有浏览器问题。浏览器的bug和不一致性是现代CSS开发人员面对的最大问题之一。不幸的是, 许多bug都没有良好的文档记录,它们的修复方法基本上只是在开发人员之间口口相传。你必须知道以某种 方式做某件事,否则在某种浏览器中就会出问题。但是,你记不住是哪种浏览器以及为什么会出问题 所以,就需要有一本书将最有用的CSS技术汇总在一起,并且集中介绍现实的浏览器问题,从而弥补人们CSS 知识中的欠缺。本书会帮助你加快学习CSS的过程,使你的代码很快达到CSS专家的水平。 读者对象 本书适合具有(X)HTML和CSS基本知识的任何人。无论你是刚刚接触CSS设计,还是已经开发纯CSS站 点好几年了,本书中都有适合你的内容。如果你已经使用CSS一段时间了,但还不是专家,那么你能够从本 书获得最大的收益。本书充满了实用的现实建议和示例,可以帮助你精通现代CSS设计。 本书结构 本书的前两章讨论基本的CSS概念和最佳实践,帮助你轻松地入门。你将学习如何建立代码结构和加注 释、CS定位模型的细节以及浮动和清理的工作原理。你可能已经掌握了其中的许多内容,但是可能会发现 自己有遗漏或理解不充分的地方。因此,前两章是不错的CSS入门材料,也可以帮助你回顾已经知道的知识 介绍了基本知识之后,后面五章讨论核心CSS技术,比如图像、链接、列表操纵、表单设计、数据表格 设计以及纯CSS布局。每一章都由浅入深,直到建立比较复杂的示例。在这些章节中,你将学习如何创建圆 角框、带透明阴影的图像、标签页式导航条和 flickr风格的翻转。如果你想硏究本书中的示例,可以从 ww.turingbook.com或ww.friendsofed.com下载所有示例代码 浏览器bug是许多CSS开发人员最头疼的问题,所以本书中的所有示例都关注创建跨浏览器的技术。不 只如此,本书还用两章讨论招数(hack)、过滤器、bug和bug修复。在这两章中,你将学习一些最常用的 过滤器,什么时候应该使用它们以及什么时候应该避免使用它们。还要学习bug捕捉技术,以及如何在bug 造成问题之前发现并修复它们。甚至还会学习是什么造成了 Microsoft ie中许多看似无规律的 CSS bug 最后两章是真正的“大餐”。 Simon collison和 Cameron moll是两位最杰出的CSS设计人员,他们将 本书讨论的许多技术组合成两个实例研究。所以你不但将学习这些技术的工作原理,而且要学习如何将它们 用在实际项目中 本书可以从头到尾地阅读,也可以放在计算机旁边作为提示、技巧和技术的参考资料。这由你决定 本书约定 本书使用几个需要注意的约定。本书采用以下术语: (X)HTML指HTML和XHML这两种语言。 除非特别声明,CSS是指CSS2.1规范。 IE5.x/win指 Windows的IE5.0和IE5.5。 Windows的IE6和更低版本指 Windows的IE5.0~6.0。 为了方便,假设本书中的所有(X)HTM示例都嵌套在一个有效文档的中,同时,CSS包含在文档的 head>中。有时候为了简短,(X)HML和CSS放在同一个代码示例中。但是在真实的文档中,这些代码需要 放在各自的位置上才能正常工作。 pcolor: red] I’mred</p 作者: Andy Budd、 Cameron Mool、 Simon collison 起点网络提供webttt.com
精通 CSS： 高级 WEB 标准解决方案 前言 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原版书。 作者：Andy Budd、Cameron Mool、Simon Collson 起点网络提供 webttt.com 前 言 尽管 CSS 资源的数量越来越多，但是在 CSS 邮件列表上仍然反复看到同样的问题：如何让设计居中？最 好的圆角框技术是什么？如何创建三列布局？如果你熟悉 CSS 设计社区，那么往往会想起提供了某篇文章或 某种技术的网站。但是，如果你是 CSS 的初学者，或者没有时间阅读所有博客，那么这些信息可能并不好找。 在 CSS 的某些比较晦涩的方面（比如定位模型和特殊性），即使是有经验的 CSS 开发人员也会遇到问题。这 是因为大多数 CSS 开发人员是靠自学的，他们从文章和别人的代码中学习经验，而没有全面理解规范。而且 许多人认为，CSS 规范是复杂的并且常常自相矛盾，是为浏览器厂商而不是为网页开发人员编写的。 此外，还有浏览器问题。浏览器的 bug 和不一致性是现代 CSS 开发人员面对的最大问题之一。不幸的是， 许多 bug 都没有良好的文档记录，它们的修复方法基本上只是在开发人员之间口口相传。你必须知道以某种 方式做某件事，否则在某种浏览器中就会出问题。但是，你记不住是哪种浏览器以及为什么会出问题。 所以，就需要有一本书将最有用的 CSS 技术汇总在一起，并且集中介绍现实的浏览器问题，从而弥补人们 CSS 知识中的欠缺。本书会帮助你加快学习 CSS 的过程，使你的代码很快达到 CSS 专家的水平。 读者对象 本书适合具有(X)HTML 和 CSS 基本知识的任何人。无论你是刚刚接触 CSS 设计，还是已经开发纯 CSS 站 点好几年了，本书中都有适合你的内容。如果你已经使用 CSS 一段时间了，但还不是专家，那么你能够从本 书获得最大的收益。本书充满了实用的现实建议和示例，可以帮助你精通现代 CSS 设计。 本书结构 本书的前两章讨论基本的 CSS 概念和最佳实践，帮助你轻松地入门。你将学习如何建立代码结构和加注 释、CSS 定位模型的细节以及浮动和清理的工作原理。你可能已经掌握了其中的许多内容，但是可能会发现 自己有遗漏或理解不充分的地方。因此，前两章是不错的 CSS 入门材料，也可以帮助你回顾已经知道的知识。 介绍了基本知识之后，后面五章讨论核心 CSS 技术，比如图像、链接、列表操纵、表单设计、数据表格 设计以及纯 CSS 布局。每一章都由浅入深，直到建立比较复杂的示例。在这些章节中，你将学习如何创建圆 角框、带透明阴影的图像、标签页式导航条和 flickr 风格的翻转。如果你想研究本书中的示例，可以从 www．turingbook．com 或 www．friendsofed．com 下载所有示例代码。 浏览器 bug 是许多 CSS 开发人员最头疼的问题，所以本书中的所有示例都关注创建跨浏览器的技术。不 只如此，本书还用两章讨论招数（hack）、过滤器、bug 和 bug 修复。在这两章中，你将学习一些最常用的 过滤器，什么时候应该使用它们以及什么时候应该避免使用它们。还要学习 bug 捕捉技术，以及如何在 bug 造成问题之前发现并修复它们。甚至还会学习是什么造成了 Microsoft IE 中许多看似无规律的 CSS bug。 最后两章是真正的“大餐”。Simon Collison 和 Cameron Moll 是两位最杰出的 CSS 设计人员，他们将 本书讨论的许多技术组合成两个实例研究。所以你不但将学习这些技术的工作原理，而且要学习如何将它们 用在实际项目中。 本书可以从头到尾地阅读，也可以放在计算机旁边作为提示、技巧和技术的参考资料。这由你决定。 本书约定 本书使用几个需要注意的约定。本书采用以下术语： (X)HTML 指 HTML 和 XHTML 这两种语言。 除非特别声明，CSS 是指 CSS 2．1 规范。 IE 5．x/Win 指 Windows 的 IE 5．0 和 IE 5．5。 Windows 的 IE 6 和更低版本指 Windows 的 IE 5．0～6．0。 为了方便，假设本书中的所有(X)HTML 示例都嵌套在一个有效文档的中，同时，CSS 包含在文档的 中。有时候为了简短，(X)HTML 和 CSS 放在同一个代码示例中。但是在真实的文档中，这些代码需要 放在各自的位置上才能正常工作。 p{color:red} I’m red 3
精通CSS:高级WB标准解决方案 前言 最后,对于包含重复数据的( X) HTML示例,并不给出每一行,而是使用省略号(…)表示代码延续: Kul> Kli>red yellow 〈1i>pink li>green 了解了这些约定之后,我们就可以上路了吧 致谢 Andy budd 感谢所有直接或间接地帮助我们撰写本书的人。 感谢 Chris在我撰写本书的过程中一直引导着我,帮助我将想法变成现实。感谢所有不知疲倦地帮助本 书按时出版的 Apress工作人员。你们的奉献精神和专业精神令人敬佩。 感谢我在Clearleft(ww.clearleft.com)、JeremyKeith(w.abactio.com)和Richardrutter (www.clagnut.com)的朋友和同事,他们在我撰写本书的过程中提供了鼓励和反馈意见。 感谢 Molly e. Holzschlag允许我在本书中借用你的知识和经验。你的支持和指导是无价的,真不知道你是 如何管理时间的 感谢 Jamie Freeman和 Jo Acres为提高我的技能提供了完美的环境。我随时都有茶点可以享用。还要感 谢布莱顿网页开发社区,尤其是BM和Ski1 SWap邮件列表上的所有人。 感谢我的同事与我分享他们的网页开发经验和知识。如果没有下面各位以前的工作,本书是不可能完成 的: Cameron Adams、 John Allsopp、 Nathan Barley、 Holly bergevin、 Douglas bowman、 The britPack Dan cederholm、 Tantek Celik、 Joe Clark、 Andy clarke、 Simon collison、 Mike davidson、 Garrett dimon、 Derek featherstone、 Nick fink、 Patrick griffiths、 Jon Hicks、 Shaun inman、 Roger Johansson、 Ian lloyd Ethan marcotte、 Drew Mclellan、 Eric Meyer、 Cameron moll、 Dunstan orchard、 Veerle pieters、D. Keith Robinson、 Jason Andrew Andrew Santa Maria、 Dave shea、 Ryan Sims、 Virtual stan、 Jeffrey Veen、Russ Weakley、 Simon willison和 Jeffrey Zeldman 感谢我的博客的所有读者和过去一年中我在各种会议、讨论会和培训活动中遇到的所有人。你们的意见 和思想丰富了本书的内容。 特别感谢Mel校对了每一章,而且在过去9个月里一直容忍着我的反复修改 最后,感谢你阅读本书,希望本书能够帮助你将CSS技能提升到新的层次。 Cameron Moll 我想感谢所有帮助我编写实例研究的人。尤其感谢 Ryan Parman, Tuscany布局的右上角使用了他的 TIMEDATE脚本生成日期。可以从ww.skyzyx.com/scripts/下载他的脚本。 感谢Veer提供了这个布局中使用的精美图像。如果没有他们的帮助, Tuscany Luxury Resorts就会单 调多了。不知道为什么,veer总是能够提供独特的视觉元素——照片、字型等,这真是不同寻常。可以在 wWW.veer.com/访问他们的收藏。 Simon collison 我必须感谢JonBurgerman(w.jonburgerman.com)、RichardMay(ww.richard-may.com)和我在 BlackConvoy(www.blackconvoy.com)的所有朋友,他们允许我使用他们的图像和名称,并且为我的实例研 究贡献了他们的才能。还要特别感谢瑞典的RogerJohansson(ww.456bereastreet.com),他允许我使用 他的圆角框并且在去年夏天款待了我。 More than doodles设计能够如此迅速高效地完成要感谢 ExpressionEngine(ww.expressionengine.com)出版平台中的模板系统,这是我离不开的一个工具。最后, 感谢 Agenzia(w. agenzia.co.uk)的朋友们,你们容忍我近期狂热的写作行为。感谢所有人 作者: Andy Budd、 Cameron Mool、 Simon collison 起点网络提供webttt.com
精通 CSS： 高级 WEB 标准解决方案 前言 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原版书。 作者：Andy Budd、Cameron Mool、Simon Collson 起点网络提供 webttt.com 最后，对于包含重复数据的(X)HTML 示例，并不给出每一行，而是使用省略号（…）表示代码延续： red yellow pink green ……… 了解了这些约定之后，我们就可以上路了吧。 致谢 Andy Budd 感谢所有直接或间接地帮助我们撰写本书的人。 感谢 Chris 在我撰写本书的过程中一直引导着我，帮助我将想法变成现实。感谢所有不知疲倦地帮助本 书按时出版的 Apress 工作人员。你们的奉献精神和专业精神令人敬佩。 感谢我在 Clearleft（www．clearleft．com）、Jeremy Keith（www．adactio．com）和 Richard Rutter （www．clagnut．com）的朋友和同事，他们在我撰写本书的过程中提供了鼓励和反馈意见。 感谢 Molly E． Holzschlag 允许我在本书中借用你的知识和经验。你的支持和指导是无价的，真不知道你是 如何管理时间的。 感谢 Jamie Freeman 和 Jo Acres 为提高我的技能提供了完美的环境。我随时都有茶点可以享用。还要感 谢布莱顿网页开发社区，尤其是 BNM 和 SkillSwap 邮件列表上的所有人。 感谢我的同事与我分享他们的网页开发经验和知识。如果没有下面各位以前的工作，本书是不可能完成 的：Cameron Adams、John Allsopp、Nathan Barley、Holly Bergevin、Douglas Bowman、The BritPack、 Dan Cederholm、Tantek Çelik、Joe Clark、Andy Clarke、Simon Collison、Mike Davidson、Garrett Dimon、 Derek Featherstone、Nick Fink、Patrick Griffiths、Jon Hicks、Shaun Inman、Roger Johansson、Ian Lloyd、 Ethan Marcotte、Drew McLellan、Eric Meyer、Cameron Moll、Dunstan Orchard、Veerle Pieters、D． Keith Robinson、Jason Andrew Andrew Santa Maria、Dave Shea、Ryan Sims、Virtual Stan、Jeffrey Veen、Russ Weakley、Simon Willison 和 Jeffrey Zeldman。 感谢我的博客的所有读者和过去一年中我在各种会议、讨论会和培训活动中遇到的所有人。你们的意见 和思想丰富了本书的内容。 特别感谢 Mel 校对了每一章，而且在过去 9 个月里一直容忍着我的反复修改。 最后，感谢你阅读本书，希望本书能够帮助你将 CSS 技能提升到新的层次。 Cameron Moll 我想感谢所有帮助我编写实例研究的人。尤其感谢 Ryan Parman，Tuscany 布局的右上角使用了他的 TIMEDATE 脚本生成日期。可以从 www.skyzyx.com/scripts/下载他的脚本。 感谢 Veer 提供了这个布局中使用的精美图像。如果没有他们的帮助，Tuscany Luxury Resorts 就会单 调多了。不知道为什么，Veer 总是能够提供独特的视觉元素——照片、字型等，这真是不同寻常。可以在 www.veer.com/访问他们的收藏。 Simon Collison 我必须感谢 Jon Burgerman（www.jonburgerman.com）、Richard May（www.richard-may.com）和我在 Black Convoy（www.blackconvoy.com）的所有朋友，他们允许我使用他们的图像和名称，并且为我的实例研 究贡献了他们的才能。还要特别感谢瑞典的 Roger Johansson（www.456bereastreet.com），他允许我使用 他的圆角框并且在去年夏天款待了我。More Than Doodles 设计能够如此迅速高效地完成要感谢 ExpressionEngine（www.expressionengine.com）出版平台中的模板系统，这是我离不开的一个工具。最后， 感谢 Agenzia（www.agenzia.co.uk）的朋友们，你们容忍我近期狂热的写作行为。感谢所有人。 4
精通CSS:高级WEB标准解决方案 前言 第1章基础知识 第8章招数和过滤器 1.1设计代码的结构 8.1招数和过滤器简介 1.1.1使用有意义的标记 8 关于招数和过滤器的一个警告 2文档类型、 DOCTYPE切换和浏览器模式8.1.2明智地使用招数 1.2为样式找到目标 8.2过滤单独的样式表 2.1常用的选择器 8.2.1IE的有条件注释 1.2.2通用选择器 8.2.2带通过滤器 1.2.3高级选择器 8.3过滤单独的规则和声明 1.2.4层叠和特殊性 8.3.1子选择器招数 1.2.5继承 8.3.2属性选择器招数 1.3规划、组织和维护样式表 8.3.3星号HTML招数 3.1对文档应用样式 8.3.4m/Mac注释反斜线招数 1.3.2对代码进行注释 8.3.5转义属性招数 1.3.3样式指南 8.3.6 Tantek的框模型招数 1.3.4组织样式表以便简化维护 8.3.7修改后的简化框模型招数 小结 8.3.8! Important和下划线招数 第2章可视化格式模型 8.3.90wen招数 2.1框模型概述 8.4小结 2.1.1IE/Win和框模型 第9章bug和bug修复 2.1.2空白边叠加 9.1bug捕捉 2.2定位概述 9.2bug捕捉的基本知识 2.2.1视觉格式化模型 9.2.1隔离问题 2.2.2相对定位 创建基本测试案例 2.3绝对定位 9.2.3修复问题,而不是修复症状 浮动 9.2.4请求帮助 2.3小结 9.3拥有布局 第3章背景图像和图像替换 9.3.1什么是布局 3.1背景图像基础 9.3.2布局有什么效果? 3.2圆角框 4常见bug及其修复方法 3.2.1固定宽度的圆角框 4.1空白边浮动bug 2.2山顶角 9.4.23像素文本偏移bug 9.4.3IE6重复字符bu 3.3.1简单的css阴影 9.4.41E6躲躲猫bug 3.3.2来自 clague的阴影方法 9.4.5相对容器中的绝对定位 3.3.3模糊阴影 9.4.6停止对IE的批评 3.3.4洋葱皮阴影 9.5小结 3.4图像替换 3.4.1FIR 实例研究1 More than doodles 3.4.2 Hark CSI.1关于这个实例研究 3.4.3 Gilder/ LevIn方法 CSL.2用后代选择器控制内容区域 3.4.4IFR与sIFR CSI. 2.1 XHTML 3.5小结 CS1.2.2三列布局 作者: Andy Budd、 Cameron Mool、 Simon collison 起点网络提供webttt.com
精通 CSS： 高级 WEB 标准解决方案 前言 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原版书。 作者：Andy Budd、Cameron Mool、Simon Collson 起点网络提供 webttt.com 目 录 第 l 章基础知识 l. 1 设计代码的结构 l．l．l 使用有意义的标记 l．1．2 文档类型、DOCTYPE 切换和浏览器模式 1. 2 为样式找到目标 1．2．l 常用的选择器 1．2．2 通用选择器 1．2．3 高级选择器 l．2．4 层叠和特殊性 1．2．5 继承 l．3 规划、组织和维护样式表 1．3．1 对文档应用样式 1．3．2 对代码进行注释 1．3．3 样式指南 1．3．4 组织样式表以便简化维护 1．4 小结 第 2 章可视化格式模型 2．1 框模型概述 2．1．1 IE／Win 和框模型 2．l．2 空白边叠加 2．2 定位概述 2．2．1 视觉格式化模型 2．2． 2 相对定位 2．2．3 绝对定位 2．2．4 浮动 2．3 小结 第 3 章背景图像和图像替换 3．l 背景图像基础 3．2 圆角框 3．2．1 固定宽度的圆角框 3．2．2 山顶角 3．3 阴影 3．3．l 简单的 css 阴影 3．3．2 来自 clagnut 的阴影方法 3．3．3 模糊阴影 3．3．4 洋葱皮阴影 3．4 图像替换 3．4．1 FIR 3．4．2 Phark 3．4．3 Gilder/Levln 方法 3．4．4 IFR 与 sIFR 3．5 小结 第 8 章招数和过滤器 8．1 招数和过滤器简介 8．1．1 关于招数和过滤器的一个警告 8．1．2 明智地使用招数 8．2 过滤单独的样式表 8．2．1 IE 的有条件注释 8．2．2 带通过滤器 8．3 过滤单独的规则和声明 8．3．1 子选择器招数 8．3．2 属性选择器招数 8．3．3 星号 HTML 招数 8．3．4 m/Mac 注释反斜线招数 8．3．5 转义属性招数 8．3．6 Tantek 的框模型招数 8．3．7 修改后的简化框模型招数 8．3．8 !important 和下划线招数 8．3．9 Owen 招数 8．4 小结 第 9 章 bug 和 bug 修复 9．l bug 捕捉 9．2 bug 捕捉的基本知识 9．2．1 隔离问题 9．2．2 创建基本测试案例 9．2．3 修复问题，而不是修复症状 9．2．4 请求帮助 9．3 拥有布局 9．3．1 什么是布局 9．3．2 布局有什么效果? 9．4 常见 bug 及其修复方法 9．4．1 空白边浮动 bug 9．4．2 3 像素文本偏移 bug 9．4．3 IE6 重复字符 bug 9．4．4 1E 6 躲躲猫 bug 9．4．5 相对容器中的绝对定位 9．4．6 停止对 IE 的批评 9．5 小结 实例研究 1 More Than Doodles CSI．1 关于这个实例研究 CSl．2 用后代选择器控制内容区域 CSl．2．1 XHTML CSl．2．2 三列布局 5
精通CSS:高级WEB标准解决方案 前言 第4章对链接应用样式 CS1.2.3两列布局 4.1简单的链接样式 CSI.2.4单列布局 4.2让下划线更有趣 CS1.2.5隐藏不需要的列 4.3突出显示不同类型的链接 CS1.3对列进行浮动 4.4创建按钮和翻转 CS1.3.1计算 4.4.1简单的翻转 CS1.3.2将列浮动到正确的位置 4.4.2具有图像的翻转 CS1.4根据主体类突出显示当前页面 4.4.3Pixy样式的翻转 CSI.5列的drop-in框 4.5已访问链接样式 CS1.6直角和圆角一—自己决定 4.6纯CSS工具提示 CS1.6.1一般的直角 4.7小结 CS1.6.2为特殊效果做准备 第5章对列表应用样式和创建导航条 CS1.7透明的定制角和边框 5.1基本列表样式 CS1.7.1图像 5.2创建垂直导航条 5.3在导航条中突出显示当前页面 CS1.8使用类组合来确定操作目标 5.4创建水平导航条 CS1.9使用图像类和例外 简化的“滑动门”标签页式导航 CS1.9.1默认图像 5.6CSS图像映射 CS1.9.2拥有的图像 5.7远距离翻转 CSL.9.3比较大的图像 5.8对于定义列表的简短说明 CS1.10处理链接 5.9小结 CS1.10.1了解边栏链接 第6章对表单和数据表格应用样式 CS1.10.2带符号的己访问链接 6.1对数据表格应用样式 CS1.10.3突出显示外部链接 6.1.1表格特有的元素 浮动的阴影(图库) 6.1.2数据表格标记 CS1.11.1形成阴影 6.1.3对表格应用样式 CS1.11.2对图像进行浮动 6.1.4添加视觉样式 CS1.12小结 6.1.5添加其他样式 6.2简单的表单布局 实例研究2 Tuscany Luxury Resorts 6.2.1有用的表单元素 CS2.1关于这个实例研究 6.2.2基本布局 CS2.2流体布局 6.2.3其他元素 CS2.2.1主体和容器 6.2.4修饰 CS2.2.2报头 3复杂的表单布局 内容和边栏 6.3.1可访问的数据输入元素 CS2.2.4页脚 6.3.2多列复选框 CS2.2.5解决流体布局的问题 6.3.3表单反馈 CS2.3使用绝对定位刘准元素 6.4小结 CS2.3.1位置属性(top、 bottom、left、 right) 第7章布局 CS2.3.2堆放次序(z. index) 7.1让设计居中 CS2.4背景图像技术 7.1.1使用自动空白边让设计居中 CS2.4.1将上半部分分成三份 7.1.2使用定位和负值空白边让设计居中 CS2.4.2使背景“无懈可击 7.2基于浮动的布局 图像替换 7.2.1两列的浮动布局 CS2.5.1徽标图像替换 作者: Andy Budd、 Cameron Mool、 Simon collison 起点网络提供webttt.com
精通 CSS： 高级 WEB 标准解决方案 前言 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原版书。 作者：Andy Budd、Cameron Mool、Simon Collson 起点网络提供 webttt.com 第 4 章对链接应用样式 4．l 简单的链接样式 4．2 让下划线更有趣 4．3 突出显示不同类型的链接 4．4 创建按钮和翻转 4．4．1 简单的翻转 4．4．2 具有图像的翻转 4．4．3 Pixy 样式的翻转 4．5 已访问链接样式 4．6 纯 CSS 工具提示 4．7 小结 第 5 章对列表应用样式和创建导航条 5．l 基本列表样式 5．2 创建垂直导航条 5．3 在导航条中突出显示当前页面 5．4 创建水平导航条 5．5 简化的“滑动门”标签页式导航 5．6 CSS 图像映射 5．7 远距离翻转 5．8 对于定义列表的简短说明 5．9 小结 第 6 章对表单和数据表格应用样式 6．1 对数据表格应用样式 6．1．1 表格特有的元素 6．1．2 数据表格标记 6．1．3 对表格应用样式 6．1．4 添加视觉样式 6．1．5 添加其他样式 6．2 简单的表单布局 6．2．1 有用的表单元素 6．2．2 基本布局 6．2．3 其他元素 6．2．4 修饰 6．3 复杂的表单布局 6．3．1 可访问的数据输入元素 6．3．2 多列复选框 6．3．3 表单反馈 6．4 小结 第 7 章布局 7．l 让设计居中 7．1．1 使用自动空白边让设计居中 7．1．2 使用定位和负值空白边让设计居中 7．2 基于浮动的布局 7．2．1 两列的浮动布局 CSl．2．3 两列布局 CSI．2．4 单列布局 CSl．2．5 隐藏不需要的列 CSl．3 对列进行浮动 CSl．3．1 计算 CSl．3．2 将列浮动到正确的位置 CSl．4 根据主体类突出显示当前页面 CSI．5 列的 drop—in 框 CSl．6 直角和圆角——自己决定 CSl．6．1 一般的直角 CSl．6．2 为特殊效果做准备 CSl．7 透明的定制角和边框 CSl．7． 1 图像 CSl．7． 2 CSS CSl．8 使用类组合来确定操作目标 CSl．9 使用图像类和例外 CSl．9． 1 默认图像 CSl．9．2 拥有的图像 CSl．9．3 比较大的图像 CSl．l0 处理链接 CSl．10．1 了解边栏链接 CSl．10．2 带符号的己访问链接 CSl．10．3 突出显示外部链接 CSl．11 浮动的阴影(图库) CSl．11．l 形成阴影 CSl．1l．2 对图像进行浮动 CSl．12 小结 实例研究 2 Tuscany Luxury Resorts CS2．1 关于这个实例研究 CS2．2 流体布局 CS2．2．1 主体和容器 CS2．2．2 报头 CS2．2．3 内容和边栏 CS2．2．4 页脚 CS2．2．5 解决流体布局的问题 CS2．3 使用绝对定位刘准元素 CS2． 3． 1 位置属性(top、bottom、1eft、right) CS2． 3． 2 堆放次序(z．index) CS2．4 背景图像技术 CS2．4．1 将上半部分分成三份 CS2．4．2 使背景“无懈可击” CS2．5 图像替换 CS2．5．1 徽标图像替换 6
精通CSS:高级WEB标准解决方案 前言 7.2.2三列的浮动布局 CS2.5.2首字母大写图像替换 3固定宽度、流体和弹性布局 CS2.6流体图像 7.3.1流体布局 CS2.7为多个元素使用一个列表项 7.3.2弹性布局 CS2.8小结 7.3.3弹性一流体混合布局 7.3.4流体和弹性图像 7.5小结 作者: Andy Budd、 Cameron Mool、 Simon collison 起点网络提供webttt.com
精通 CSS： 高级 WEB 标准解决方案 前言 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原版书。 作者：Andy Budd、Cameron Mool、Simon Collson 起点网络提供 webttt.com 7．2．2 三列的浮动布局 7．3 固定宽度、流体和弹性布局 7．3．1 流体布局 7．3．2 弹性布局 7．3．3 弹性一流体混合布局 7．3．4 流体和弹性图像 7．4 faux 列 7．5 小结 CS2．5．2 首字母大写图像替换 CS2．6 流体图像 CS2．7 为多个元素使用一个列表项 CS2．8 小结 7
精通CSs:高级睏B标准解决方案 前言 CSS Mastery Advanced Web Standards Solutions 精通CSS高级W标准解决方案 Andy Budd对CSs设计的底层技术和当代方法有着深刻的理解,而且他更善于将这些知识蝇娓道来。在跨测览器支持问题 上,无人可以望其项背。 Molly E. Holzschlag,Web标准项目负责人,W3 C HTML工作组专家 Andy Budd多年来一直在编写,设计和宣传基于标准的网页设计,我们现在有幸在本书中看到他以简洁清晰的方式讲授最 重要的CSS技术。本书提供了一套网页设计人员不可或块的解决方案、技巧和经验。 Dan cederholm, Web standards soLutions的作者 ss作为Web标准的一部分,已经成为现代网页设计中必不可少的关键要素。CSS是一种简单的语言,但是由于种种原 因,真正精通CSS却绝非易事。在使用CSS开发网站时,会遇到形形色色的浏览器bug和不一致问题,而解决方案又五花八 门,往往让使用者感觉千头万绪、不知从何着手。 本书将最有用的CSs技术汇总在一起,还总结了CSS设计中的最佳实践,讨论了解决各种实际问题的技术,弥补了一直以 来CSS图书的空白。正因如此,英文版出版后,一时洛阳纸贵,多次重印,并迅速登上 Amazon图书排行榜前列,最高时甚至 与哈里·波特并驾齐驱,创造了计算机图书的销售奇迹 本书最后的两个实例研究将书中讨论的许多技术组合起来,使读者不仅理解工作原理,而且能够学到如何将它们应用在实际 项目中,迅速精通CSS,成为CSS专家 Andy Budd国际顶尖的网页设计师,著名的web标准倡导者。他是网页设计咨询公司 Clearest clearest cun)的创意总监,曾经组织了英国首届web20会议。他在web设计力面著述甚上,除本书外,他还曾 经撰写了一本Blog设计方面的图书 Cameron moll杰出的网页设计师,曾经设计了大量网站,赢得了世界范围内同行的尊敬他的个人网 站CameronMoll.com提供大量设计资源,深受设计界欢迎 Simoncollison杰出的网页设计师,Agcm(www.agenzia.co.uk)的首席设计师。他参与过许多艺术 类网站项目开发。他撰写的一本CSS基础教程最近刚刚出版 本书相关信息请访问:图灵网站http://www.turingbook.com 读者/作者热线:(01088590802 反馈/投稿/推荐信箱: contactuturngbook. com 上期计算机/网络开发/程序设计 ISBN 7 5316-7 Apress ISBN7-115-15316-7/TP·5722 定价:39.00元 9787115153166> 人民邮电出版社网址www.ptpress.com.cn 作者: Andy Budd、 Cameron Mool、 Simon collison 起点网络提供webttt.com
精通 CSS： 高级 WEB 标准解决方案 前言 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原版书。 作者：Andy Budd、Cameron Mool、Simon Collson 起点网络提供 webttt.com 8
精通CSS:高级WB标准解决方案 基础知识 第一章基础知识 ee eview-source:- Source of, h II MAIN C 4 AA C L EstIll and continuing development of the IGe maintain the life span dd this se. it is impe cbr> Velopment, maintenance and updating 人类天生就是一种好奇的动物。我们都很喜欢摆弄事物。这不,最近我得到了一台新的 iMac G5,还没 看说明书呢,自己就先把它摆弄了一番。我们喜欢自己摆弄东西,对它的作用和使用方式形成自己的看法。 我们会自己胡乱设想一阵子,直到有什么东西出了错或者出乎我们的预料,才会去查阅手册。 学习CSS(层叠样式表)最好的方式之一是直接开始使用它。但是,如果不小心的话,那么就可能误解 重要的概念,或者在日后造成问题。在本章中,将讲解一些基本但常常被误解的概念,并讨论如何让(X)HTML 和CSS保持清晰且结构良好 当使用 XHTML这个术语时,指的是 Extensible Hypertext Markup language;当使用(X)HML这个术语 时,指的是ⅫHTML和HTM。 在本章中,你将学习 口文档结构良好且有意义的重要性。 口编码的最佳实践 口常见的编码错误。 口文档类型、 DOCTYPE切换和浏览器模式。 口调整样式的方式。 口层叠、特殊性和继承。 1.1设计代码的结构 大多数人不关心建筑物的地基。但是,如果没有坚固的地基,建筑物的主体也就不会存在了。虽然本书 讨论的是高级的CSS技术,但是如果没有结构良好且有效的(X)HML文档,那么我们要做的许多事情都是不 可能实现的(或者说实现起来是非常困难的) 在本节中,你将明白为什么结构良好且有意义的(XHTM文档在CSS开发中非常重要,还将学习如何在 文档中增加更多的意义,从而让自己的开发工作更轻松 1.1.1使用有意义的标记 早期的Web仅仅是一系列相互链接的研究文档,并使用HTM添加基本的格式和结构。但是,随着万维 网的流行,HML开始用来表现页面。人们使用字体和粗体标签的组合来创建所需的视觉效果,而不只是用 标题元素突出显示页面的标题。表格成了一种布局工具而不是显示数据的方式,人们使用块( block quote) 来添加空白而不是表示引用。Web很快就失去了意义,成了字体和表格标签的大杂烩(见图1-1) 互联网的一些图片,在转换的过程 可避免地存在一些文字错误,仅供大家学习时参考,请头原版书 起点网络提供webttt.com 作者: Andy bude 9
精通 CSS : 高级 WEB 标准解决方案 第一章 基础知识 第一章 基础知识 人类天生就是一种好奇的动物。我们都很喜欢摆弄事物。这不，最近我得到了一台新的 iMac G5，还没 看说明书呢，自己就先把它摆弄了一番。我们喜欢自己摆弄东西，对它的作用和使用方式形成自己的看法。 我们会自己胡乱设想一阵子，直到有什么东西出了错或者出乎我们的预料，才会去查阅手册。 学习 CSS（层叠样式表）最好的方式之一是直接开始使用它。但是，如果不小心的话，那么就可能误解 重要的概念，或者在日后造成问题。在本章中，将讲解一些基本但常常被误解的概念，并讨论如何让(X)HTML 和 CSS 保持清晰且结构良好。 当使用 XHTML 这个术语时，指的是 Extensible Hypertext Markup Language；当使用(X)HTML 这个术语 时，指的是 XHTML 和 HTML。 在本章中，你将学习： 文档结构良好且有意义的重要性。 编码的最佳实践。 常见的编码错误。 文档类型、DOCTYPE 切换和浏览器模式。 调整样式的方式。 层叠、特殊性和继承。 1.1 设计代码的结构 大多数人不关心建筑物的地基。但是，如果没有坚固的地基，建筑物的主体也就不会存在了。虽然本书 讨论的是高级的 CSS 技术，但是如果没有结构良好且有效的(X)HTML 文档，那么我们要做的许多事情都是不 可能实现的（或者说实现起来是非常困难的）。 在本节中，你将明白为什么结构良好且有意义的(X)HTML 文档在 CSS 开发中非常重要，还将学习如何在 文档中增加更多的意义，从而让自己的开发工作更轻松。 1.1.1 使用有意义的标记 早期的 Web 仅仅是一系列相互链接的研究文档，并使用 HTML 添加基本的格式和结构。但是，随着万维 网的流行，HTML 开始用来表现页面。人们使用字体和粗体标签的组合来创建所需的视觉效果，而不只是用 标题元素突出显示页面的标题。表格成了一种布局工具而不是显示数据的方式，人们使用块（block quote） 来添加空白而不是表示引用。Web 很快就失去了意义，成了字体和表格标签的大杂烩（见图 1-1）。 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原版书。 起点网络提供 webttt.com 作者： Andy Budd 9
级WB标准解决方案 基础知识 e00vew-source-sourceofhttp://web.archive.org/web/20000815052646/abcnews.ga.com/o dth=417°ce11 spacing"0·ee11p tr> sret 2tp beadle- aka astec- 0 b spa46. bordeabonelt: 9 t m okdna fact page/ ss⊥ ng the Torch > defen eace gen va ht weare yet off se end touted tht a gave capons ted vice president, Al Core, who wants to take clintons/0146;B place in thala white House full coverage and rnational/wirestory?id"> h2 class"replace"> ref-"/International/wirestory ?id-947057">Iraq Bomb Toll Grows: New ckn kill 22 a fiery </d⊥v E 图1-2今年早些时候从abcnews.com获得的新闻头条页面的标记。 它具有良好的结构,容易理解。虽然它仍然包含一些表现标记,但是与图1-1中的代码相比有了显著的 改进。 有意义的标记为开发人员提供了几个重要的好处。与表现性的页面相比,有意义的页面更容易处理。例 如,假设需要修改页面中的一个引用。如果这个引用加上了正确的标记,那么很容易搜索代码,找到第一个 互联网的一些图片,在转换的过程中,不可避免地存在一些文字错误,仅供大家学习时参考,请购买原版书。 起点网络提供webttt.com 作者: Andy bude
精通 CSS : 高级 WEB 标准解决方案 第一章 基础知识 图 1-1 来自 abcnews.com（2000 年 8 月 14 日）的新闻头条页面的标记。 它使用表格进行布局，对标题使用大的粗体字。代码缺乏结构，很难理解 HTML 原本是一种简单且容易理解的标记语言。但是，随着网页变得越来越复杂，代码变得几乎不可能 理解了。因此，需要使用复杂的 WYSIWYG（所见即所得）工具来处理大量的无意义标签。不幸的是，这些工 具并没有使事情简化，反而添加了它们自己的复杂标记。新千年开始以来，即使普通的网页也变得非常复杂， 以至于几乎不可能进行手工编辑而不破坏代码。看起来不能这样下去了。 就在这种情况下，CSS 出现了。有了 CSS，就可以控制页面的外观并且将文档的表现部分与内容分隔开。 表现标签（比如字体标签）可以去掉，而且可以使用 CSS 而不是表格来控制布局。标记重新变得简单了，人 们又开始对底层代码感兴趣了。 意义重新回到了文档中。浏览器的默认样式可以被覆盖，所以可以将某些内容标为标题，而不需要为它 指定大的、加粗的、难看的字体。可以创建列表，而这些列表不一定显示为一系列带黑点的列表项，可以使 用没有相关联样式的块引用。开发人员开始按照(X)HTML 元素的原义使用它们，无需去管它们的外观（见图 1-2）。 图 1-2 今年早些时候从 abcnews.com 获得的新闻头条页面的标记。 它具有良好的结构，容易理解。虽然它仍然包含一些表现标记，但是与图 1-1 中的代码相比有了显著的 改进。 有意义的标记为开发人员提供了几个重要的好处。与表现性的页面相比，有意义的页面更容易处理。例 如，假设需要修改页面中的一个引用。如果这个引用加上了正确的标记，那么很容易搜索代码，找到第一个 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原版书。 起点网络提供 webttt.com 作者： Andy Budd 10
