本书将最有用的CSS技术汇总在一起,在介绍基本的CSS概念和最佳实践之后,讨论了核心的CSS技术,例如图像、链接、列表操纵、表单设计、数据表格设计以及纯CSS布局。每一章内容由浅入深,直到建立比较复杂的示例。之后本书用两章讨论招数、过滤器、bug和bug修复,最后由Simon Collison和Cameron Moll两位杰出的CSS设计人员,将书中讨论的许多技术组合起来,给出了两个实例研究。本书还集中介绍了现实的浏览器问题,是弥补CSS知识欠缺不可或缺的参考书。
本书适合具有(X)HTML和CSS基本知识的任何网页设计人员阅读。
第1章 基础知识
1.1 设计代码的结构
1.1.1 使用有意义的标记
1.1.2 文档类型、DOCTYPE切换和浏览器模式
1.2 为样式找到目标
1.2.1 常用的选择器
1.2.2 通用选择器
1.2.3 高级选择器
1.2.4 层叠和特殊性
1.2.5 继承
1.3 规划、组织和维护样式表
1.3.1 对文档应用样式
1.3.2 对代码进行注释
1.3.3 样式指南
1.3.4 组织样式表以便简化维护
1.4 小结
第2章 可视化格式模型
2.1 框模型概述
2.1.1 IE/Win和框模型
2.1.2 空白边叠加
2.2 定位概述
2.2.1 视觉格式化模型
2.2.2 相对定位
2.2.3 绝对定位
2.2.4 浮动
2.3 小结
第3章 背景图像和图像替换
3.1 背景图像基础
3.2 圆角框
3.2.1 固定宽度的圆角框
3.2.2 山顶角
3.3 阴影
3.3.1 简单的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/Levin方法
3.4.4 IFR与sIFR
3.5 小结
第4章 对链接应用样式
4.1 简单的链接样式
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.1 基本列表样式
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.1 让设计居中
7.1.1 使用自动空白边让设计居中
7.1.2 使用定位和负值空白边让设计居中
7.2 基于浮动的布局
7.2.1 两列的浮动布局
7.2.2 三列的浮动布局
7.3 固定宽度、流体和弹性布局
7.3.1 流体布局
7.3.2 弹性布局
7.3.3 弹性-流体混合布局
7.3.4 流体和弹性图像
7.4 faux列
7.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 IE/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.1 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 IE 6重复字符bug
9.4.4 IE 6躲躲猫bug
9.4.5 相对容器中的绝对定位
9.4.6 停止对IE的批评
9.5 小结
实例研究1 More Than Doodles
CS1.1 关于这个实例研究
CS1.2 用后代选择器控制内容区域
CS1.2.1 XHTML
CS1.2.2 三列布局
CS1.2.3 两列布局
CS1.2.4 单列布局
CS1.2.5 隐藏不需要的列
CS1.3 对列进行浮动
CS1.3.1 计算
CS1.3.2 将列浮动到正确的位置
CS1.4 根据主体类突出显示当前页面
CS1.5 列的drop-in框
CS1.6 直角和圆角——自己决定
CS1.6.1 一般的直角
CS1.6.2 为特殊效果做准备
CS1.7 透明的定制角和边框
CS1.7.1 图像
CS1.7.2 CSS
CS1.8 使用类组合来确定操作目标
CS1.9 使用图像类和例外
CS1.9.1 默认图像
CS1.9.2 拥有的图像
CS1.9.3 比较大的图像
CS1.10 处理链接
CS1.10.1 了解边栏链接
CS1.10.2 带符号的已访问链接
CS1.10.3 突出显示外部链接
CS1.11 浮动的阴影(图库)
CS1.11.1 形成阴影
CS1.11.2 对图像进行浮动
CS1.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、left、right)
CS2.3.2 堆放次序(z-index)
CS2.4 背景图像技术
CS2.4.1 将上半部分分成三份
CS2.4.2 使背景“无懈可击”
CS2.5 图像替换
CS2.5.1 徽标图像替换
CS2.5.2 首字母大写图像替换
CS2.6 流体图像
CS2.7 为多个元素使用一个列表项
CS2.8 小结
Andy Budd国际顶尖的网页设计师,著名的Web标准倡导者。他是网页设计咨询公司Clearleft(www.clearleft.com)的创意总监,曾经组织了英国首届Web2.0会议。他在Web设计方面著述甚丰,除本书外,他还曾经撰写了一本Blog设计方面的图书。
尽管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放在同一个代码示例中。但是在真实的文档中,这些代码需要放在各自的位置上才能正常工作。
最后,对于包含重复数据的(X)HTML示例,并不给出每一行,而是使用省略号(…)表示代码延续:
了解了这些约定之后,我们就可以上路了吧。
致谢
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)的朋友们,你们容忍我近期狂热的写作行为。感谢所有人。
无封面