第1章　设计模式：简化css使用　

1.1　设计模式——结构化方法　

1.2　使用设计模式　

1.3　使用样式表　

1.4　CSS语法　

1.4.1　CSS语法详解　

1.4.2　在CSS中使用空白字符　

1.4.3　使用属性值　

1.5　使用层叠顺序　

1.6　简化层叠顺序　

1.7　CSS和html链接　

1.8　CSS常用属性　

1.9　CSS属性与值：常用　

1.10　CSS属性与值：内容　

1.11　CSS属性与值：布局　

1.12　CSS属性与值：专用　

1.13　选择器　

1.14　媒体查询　

1.15　灵活尺寸单位　

1.16　固定度量单位　

1.17　96 dpi下度量单位的换算　

1.18　96 dpi下的常用字号　

1.19　过渡、动画与2D变换　

1.20　修复CSS错误　

1.21　样式表的规范化　

第2章　HTML设计模式　

2.1　概述　

2.2　HTML结构　

2.3　HTML结构(续)　

2.4　XHTML　

2.5　DOCTYPE　

2.6　页头元素　

2.7　条件样式表　

2.8　结构块元素　

2.9　终止块元素　

2.10　多功能块元素　

2.11　行内元素　

2.12　类和ID属性　

2.13　HTML空白字符　

第3章　CSS选择器与继承　

3.1　概述　

3.2　类型、类和ID选择器　

3.3　位置选择器和选择器分组　

3.4　属性选择器　

3.5　伪元素选择器　

3.6　伪类选择器　

3.7　子类选择器　

3.8　继承　

3.9　可视化继承　

第4章　框模型　

4.1　概述　

4.2　Display　

4.3　框模型　

4.4　行内框　

4.5　行内块级框　

4.6　块级框　

4.7　表格框　

4.8　绝对框　

4.9　浮动框　

第5章　框模型的范围　

5.1　概述　

5.2　宽度　

5.3　高度　

5.4　设定尺寸　

5.5　收缩适应　

5.6　拉伸　

第6章　框模型属性　

6.1　概述　

6.2　外边距　

6.3　边框　

6.4　内边距　

6.5　背景　

6.6　溢出　

6.7　可见性　

6.8　分页符　

第7章　定位模型　

7.1　概述　

7.2　定位模型　

7.3　设定位置　

7.4　最近定位祖先元素　

7.5　堆叠上下文　

7.6　原子显示　

7.7　静态定位　

7.8　绝对定位　

7.9　固定定位　

7.10　相对定位　

7.11　浮动定位与复位　

7.12　相对浮动定位　

第8章　定位方式：缩进、偏移与对齐　

8.1　概述　

8.2　缩进　

8.3　静态偏移　

8.4　静态表格偏移与缩进　

8.5　浮动偏移　

8.6　绝对偏移与固定偏移　

8.7　相对偏移　

8.8　静态行内对齐　

8.9　静态块级对齐与偏移　

8.10　静态表格对齐与偏移　

8.11　绝对对齐与偏移　

8.12　绝对居中对齐　

8.13　外部对齐　

第9章　高级定位　

9.1　概述　

9.2　左对齐　

9.3　左偏移　

9.4　右对齐　

9.5　右偏移　

9.6　居中对齐　

9.7　居中偏移　

9.8　上对齐　

9.9　上偏移　

9.10　下对齐　

9.11　下偏移　

9.12　垂直居中对齐　

9.13　垂直居中偏移　

第10章　设置文字样式　

10.1　概述　

10.2　字体　

10.3　高亮显示　

10.4　文字修饰　

10.5　文字阴影　

10.6　使用图片替换文字　

10.7　使用Canvas和VML替换文字　

10.8　嵌入字体　

10.9　不可见文字　

10.10　仅供屏幕阅读器读取　

第11章　内容间隔　

11.1　间隔　

11.2　块级化　

11.3　不换行　

11.4　保留空格　

11.5　代码　

11.6　填充内容　

11.7　行内分隔区　

11.8　行内装饰　

11.9　换行　

11.10　行内水平线规则　

第12章　内容对齐　

12.1　文字缩进　

12.2　悬挂缩进　

12.3　水平对齐内容　

12.4　垂直对齐内容　

12.5　垂直偏移内容　

12.6　下标与上标　

12.7　嵌套对齐　

12.8　高级对齐示例　

第13章　块级元素　

13.1　概述　

13.2　结构含义　

13.3　可视化结构　

13.4　节　

13.5　列表　

13.6　项目符号背景　

13.7　行内化　

13.8　合并外边距　

13.9　插入　

13.10　水平线规则　

13.11　块级分隔区　

13.12　块级间隔删除器　

13.13　左旁注　

13.14　右旁注　

第14章　图片　

14.1　概述　

14.2　图片　

14.3　图片地图　

14.4　淡出　

14.5　半透明　

14.6　替换文字　

14.7　内容覆盖图片　

14.8　内容覆盖背景图片　

14.9　CSS精灵图　

14.10　CSS精灵图(续)　

14.11　基本阴影图片　

14.12　阴影图片　

14.13　阴影图片(续)　

14.14　阴影图片(再续)　

14.15　圆角　

14.16　圆角(续)　

14.17　图片示例　

第15章　表格　

15.1　概述　

15.2　表格　

15.3　行组与列组　

15.4　表格选择器　

15.5　拆分边框　

15.6　合并边框　

15.7　合并边框样式　

15.8　隐藏与删除单元格　

15.9　删除与隐藏行和列　

15.10　垂直对齐数据　

15.11　表格条纹　

15.12　表格化、行化和单元格化　

15.13　表格布局　

第16章　表格列布局　

16.1　表格布局模型　

16.2　使用列布局　

16.3　概述　

16.4　列宽　

16.5　收缩适应列　

16.6　设定尺寸列　

16.7　按内容比例划分列　

16.8　按宽度比例划分列　

16.9　按百分比比例划分列　

16.10　按反比例划分列　

16.11　最小等宽列　

16.12　等宽列　

16.13　小尺寸列　

16.14　弹性列　

16.15　混合列布局　

第17章　布局　

17.1　概述　

17.2　流动布局概述　

17.3　由外而内框　

17.4　浮动节　

17.5　浮动分隔区　

17.6　流动布局　

17.7　两侧浮动　

17.8　事件样式　

17.9　卷起　

17.10　选项卡菜单　

17.11　选项卡　

17.12　飞出菜单　

17.13　按钮　

17.14　布局链接　

17.15　多列布局　

17.16　模板布局　

17.17　布局示例　

第18章　首字下沉　

18.1　概述　

18.2　对齐首字下沉　

18.3　首字母下沉　

18.4　悬挂首字下沉　

18.5　嵌入式图片下沉　

18.6　浮动首字下沉　

18.7　浮动图片下沉　

18.8　旁注式首字下沉　

18.9　旁注式图片下沉　

第19章　突出引用与普通引用　

19.1　概述　

19.2　左浮动突出引用　

19.3　右浮动突出引用　

19.4　居中突出引用　

19.5　左旁注突出引用　

19.6　右旁注突出引用　

19.7　块级普通引用　

19.8　行内块级普通引用　

19.9　行内普通引用　

第20章　警告框　

20.1　概述　

20.2　javaScript警告框　

20.3　工具提示警告框　

20.4　弹出式警告框　

20.5　弹出式警告框(续)　

20.6　警告框　

20.7　行内警告框　

20.8　悬挂式警告框　

20.9　图片警告框　

20.10　插入警告框　

20.11　浮动警告框　

20.12　左旁注警告框　

20.13　右旁注警告框　

20.14　表单验证

　　译者序

　　本书的翻译工作从2012年1月至4月初，历时3个多月完成，其中大部分内容是在春节期间完成的。可以说，能够在春节期间阅读和翻译这样一本自己喜爱的好书，真是一种享受！我热爱HTML5技术，作为中国HTML5研究小组成员，能有幸学习和翻译一本优秀的HTML5书籍，内心十分激动！

　　首先谈谈书名。可能许多读者和我一样，看到这样的书名，都会忍不住要阅读书中的内容。HTML5和CSS3是目前Web开发中最炙手可热的新技术，而设计模式则将它们提高到新的层面。本书是一本参考书，讲述如何用HTML(5)和CSS(3)进行Web设计。书中包含350个即时可用的模式，它们都可在主流浏览器中可靠地运行，每个模式都附带HTML和CSS代码片段，读者可以直接复制粘贴某段代码，或者组合使用多个设计模式，构建出各种复杂的解决方案。

　　在结构上，本书借鉴了GoF的《设计模式》，将HTML5与CSS3开发方法总结为设计模式，通过设计模式介绍HTML5和CSS3的开发方法和细节。作者曾经提到，设计模式是指已经在软件编程中得到成功运用的方法。它们能够提高Web应用程序设计和开发的生产率、创造性以及有效性，同时减少代码量和复杂度。对于HTML5和CSS3开发而言，设计模式是指一组常用功能特性的集合，它们能够支持各种不同的浏览器和屏幕阅读器。通过对设计模式的总结，以及与其他设计模式的结合使用，将可以极大地提高创造力和生产力。设计模式能够简化并增强Web开发过程，使得创造本身就像搭乐高积木一样容易。

　　在内容上，本书全面且详细地介绍了HTML与CSS的属性、方法和变化。第1章～第3章主要介绍了HTML与CSS开发的基础设计模式，其中包括设计模式对于HTML与CSS开发过程的促进作用。第4章至第17章是本书的主体内容，非常详尽地介绍了与HTML元素相关的设计模式，其中还包括6种CSS框模型、框的定位方式、行内框的样式设置、块级框的样式设置、表格元素的样式设置和流式布局。第18章～第20章则组合运用了前面所涉及的设计模式，不仅介绍了如何在Web设计中实现首字下沉、标注、引用和警告框等具体的Web设计效果，还说明了如何通过组合使用各种设计模式创建出复杂的效果。

　　本书作者阵容非常强大。Michael Bowers不仅有20多年的从业经验，而且在音乐方面也有极高的造诣，这真令人称奇！Dionysios Synodinos和Victor Sumner也拥有多年的前端开发经验。总之，这是一本由3位前端领域造诣极深的工程师共同完成的好书，值得前端开发者阅读和珍藏！

　　最后，我要衷心感谢人民邮电出版社图灵公司，以及译书过程中给予我帮助和宝贵意见的编辑老师。虽然这不是我第一次翻译图灵引进的IT图书，但这却是本人独立完成的第一本翻译图书，因此非常感谢图灵公司给予我这次机会。书中如有错漏之处，还望读者不吝指出！

　　曾少宁

　　2012年4月17日于广东惠州