全书共分为三大部分,第一部分详尽地讲解了HTML 5的相关知识,包括各主流浏览器对HTML 5的支持情况、HTML 5与HTML 4在语法的区别、HTML 5的结构元素、表单与文件、图形绘制、多媒体播放、本地存储、离线应用、通信API、Web Workers、地理位置信息获取等内容;第二部分仔细地阐述了CSS 3的相关知识,涵盖选择器、文字与字体的相关样式、颜色的相关样式、盒的相关样式、背景与边框的相关样式、布局的相关样式、UI的相关样式、Media Queries的相关样式、变形处理、多媒体和动画等内容。第三部分以迭代的方式逐步展现了两个完整的案例,旨在帮助读者将理论知识贯穿于实践中,迅速成为新一代Web开发技术中的弄潮儿。
软件开发领域从来不缺少新技术和新产品,Web前端领域尤其如此。2005年,Ajax技术的正式出现给沉寂多年的Web前端领域注入了新的活力;紧接着,各种Ajax框架如雨后春笋般涌现出来,又为Web前端领域打了一针兴奋剂;如今,HTML 5和CSS 3的技术和应用环境已经日趋成熟,它们将书写Web前端领域的新历史,一场新的革命即将爆发。
HTML 5将成为新一代的Web技术标准,必定会改变整个Web应用领域的游戏规则(比如实现富 Web 应用的本地化,摆脱对Flash和Silverlight等浏览器插件的依赖),它在给新的Web应用带来无限可能性的同时,还能带来更快、更好、更炫的用户体验。CSS 3也将为Web开发带来革命性的影响,很多以前需要JavaScript和Ajax框架才能实现的复杂效果(如多背景、圆角、3D动画,等等),现在使用CSS 3就能简单地实现,极大地提高了程序的开发效率。
HTML 5和CSS 3已成为全球各大互联网巨头的必争之地,Microsoft、Google、Apple、Mozilla、Opera等浏览器厂商对它们的支持犹如一场竞赛,似乎已经成为衡量它们的浏览器性能优劣的一个重要指标,Adobe和Facebook等公司也纷纷开始发力,似乎谁也不想在这一次变革中失去话语权。
作为前端工作者的你,你甘于在这场变革中落后于人吗?答案一定是否定的,那就请你翻开这本书吧!
内容系统而全面,HTML 5与CSS 3的新功能和新特性尽览无余
注重实战,包含200余设计精巧的示例,可操作性极强
资深专家亲自执笔,3大前端社区一致推荐,权威性毋庸置疑
作为一位前端工作者,如果你想在这场即将到来的Web技术革命中立于不败之地,建议你从现在开始学习和使用HTML 5和CSS 3。如果你想更好、更快、更系统地学习HTML 5和CSS 3,强烈推荐你阅读本书。无论从内容的权威性和全面性,还是案例的实战性和可操作性,这本书都是你当下的最佳选择。
——jQuery中文社区(jquery.org.cn)
HTML 5有两个使命:第一,弥补上一代HTML的不足;第二,实现富Web应用的本地化,使浏览器逃离Flash和Silverlight等富客户端插件的羁绊。它必定成为新一代的Web技术标准。本书基于HTML 5技术的最新发展现状,详尽地介绍了HTML 5的所有新功能和新特性,不仅内容全面,而且实战性强,强烈推荐!
——HTML51(http://www.html51.com/)
CSS 2.1发布至今已有12年的历史,但它已经无法满足当前Web应用日益增长的高性能、高用户体验的需求。CSS 3极大地简化了CSS的编程模型,它不仅对已有的功能进行了扩展和延伸,而且更多的是对Web UI的设计理念的和方法进行了革新。在未来,CSS 3配合HTML 5标准,将掀起一场新的Web应用变革,甚至是整个互联网产业的变革。本书全面而系统、极具针对性地对CSS 3进行了深入浅出地讲解,完整地将CSS 3的所有新功能和新特性呈现给了我们,是学习CSS 3的不二之选。
——CSS 3中文开发者社区
作 者 简 介
陆凌牛 资深Web开发工程师、软件开发工程师和系统设计师。从事Web开发多年,对各种Web开发技术(包括前端和后端)都有非常深入的研究,经验极其丰富。HTML 5和CSS 3等新技术的先驱者和布道者,不仅对HTML 5与CSS 3的理论知识有比较深入的认识,而且已经大量在实践中付诸应用。此外,他还擅长微软与Java的相关技术,在C#、VB.NET、ASP.NET、Java、Struts、Spring、Hibernate、SQL Server、Oracle等方面积累了大量的实战经验。
如果要盘点2010年IT届的十大热门技术,云计算、移动开发、物联网等无疑会在其中,HTML 5肯定也是少不了的。2010年,随着HTML 5的迅猛发展,各大浏览器开发公司如Google、微软、苹果、Mozilla和Opera的浏览器开发业务都变得异常繁忙。在整个2010年度,无论是Mozilla的Firefox、Google的Chrome、苹果的Safari,还是微软的Internet Explorer,以及Opera都处于不断地推陈出新的状态当中。
2010年3月,在微软的MIX2010大会上,微软的工程师在介绍Internet Explorer 9浏览器的同时,从前端技术的角度把互联网的发展分为了三个阶段:
第一阶段:Web 1.0的以内容为主的网络,前端主流技术是HTML和CSS;
第二阶段:Web 2.0的Ajax应用,热门技术是JavaScript/DOM/异步数据请求;
第三阶段:即将迎来的HTML 5时代,亮点是富图形和富媒体内容(Graphically-Rich and Media-Rich)。
前端技术将进入一个崭新的时代,至少已经开启了这扇门。
在这种局势下,学习HTML 5无疑成为Web开发者的一大重要任务,谁先学会HTML 5,谁就掌握了迈向未来Web平台的一把钥匙。因此,我希望能够借助此书帮助国内的Web开发者更好地学习HTML 5以及与之相伴随的CSS 3技术,能够早日运用这些技术开发出一个具有现代水平的、在未来的Web平台上能够正常运行的Web网站或Web应用程序。
本书面向的读者
本书主要适合如下人群阅读:
q 具有一定基础的Web前端开发工程师。
q 具有一定美术功底的Web前端设计师和UI设计师。
q Web项目的项目管理人员。
q 开设了Web开发等相关专业的高等院校和相关培训机构的师生。
如何阅读本书
本书共分为三个部分:
第一部分:对HTML 5中新增的语法与标记方法、新增元素、新增API以及这些元素与API目前为止受到了那些浏览器的支持等进行了详细的介绍。在对它们进行介绍的同时将其与HTML 4中的各种元素与功能进行了对比,以帮助读者更好地理解为什么需要使用HTML 5、使用HTML 5有什么好处、HTML 5中究竟增加了哪些目前HTML 4不具备而在第三代Web平台上将会起到重要作用的功能与API,以及这些功能与API的详细使用方法。
第二部分:详细介绍了CSS 3中的各种新增样式与属性,其中主要包括CSS 3中的各种选择器、文字与字体、背景与边框、各种盒模型、CSS 3中的布局方式、CSS 3中的变形与动画、CSS 3中与媒体类型相关的一些样式与属性等。在介绍的同时也详细讲述了这些样式与属性目前为止受到了那些浏览器的支持,以及针对各种浏览器应该怎样在样式代码中进行各种属性的正确书写。
第三部分:详细讲解了两个实例,第一个实例展示了如何在一个用HTML 5语言编写而成的页面中综合运用HTML 5中新增的各种结构元素,如何对这些结构元素综合使用CSS 3样式;第二个实例展示了如何使用HTML 5中新增的表单元素,以及操作本地数据库的功能来实现一个具有现代风格的Web应用程序,如何在这个由HTML 5语言及其功能编写而成的Web应用程序中综合使用CSS 3样式来完成页面的布局以及视觉效果的美化工作。
全书共有246个示例页面,每个页面都经过笔者上机实践,确保运行结果正确无误。每个页面的详细代码及其使用到的脚本文件、各种资源文件都可在机工新阅读网站(www.cmpreading.com)本书的页面上下载,因为是HTML 5编写而成的网页,所以可直接在各种浏览器中打开该文件并查看运行结果(少量页面需要首先建立网站,然后通过访问网站中该页面的方式来进行查看)。同时,对于HTML 5中的各种元素和各种API,以及CSS 3中的各种属性和样式受到了那些浏览器的支持在书中都进行了详细介绍,读者可以针对不同的页面选择正确的浏览器来查看其正确的运行结果。
致谢
在本书的写作过程中,策划编辑杨福川先生和曾姗女士给予了很大的帮助和支持,并提出了很多中肯的建议,在此表示感谢。同时,还要感谢机械工业出版社的所有编审人员为本书的出版所付出的辛勤劳动。本书的成功出版是大家共同努力的结果,谢谢你们。
另外,在本书的写作过程中,由于时间及水平上的原因,有可能存在一些对HTML 5及CSS 3上认识不全面或疏漏的地方,敬请读者批评更正,作者的QQ为240824399,联系邮箱为240824399@qq.com,谨以最真诚的心希望能与读者共同交流,共同成长。
陆凌牛
2011年2月
计算机\程序设计
作为一位前端工作者,如果你想在这场即将到来的Web技术革命中立于不败之地,建议你从现在开始学习和使用HTML 5和CSS 3。如果你想更好、更快、更系统地学习HTML 5和CSS 3,强烈推荐你阅读这本书。无论是内容的权威性和全面性,还是实战性和可操作性,这本书都是你当下的最佳选择。
——jQuery中文社区(jquery.org.cn)
HTML 5有两个使命:第一,弥补上一代HTML的不足;第二,实现富Web应用的本地化,使浏览器逃离Flash和Silverlight等富客户端插件的羁绊。它必定成为新一代的Web技术标准。本书基于HTML 5的最新发展现状,详尽地介绍了HTML 5的所有新功能和新特性,不仅内容全面,而且实战性强,强烈推荐!
——HTML51(http://www.html51.com/)
CSS 2.1发布至今已有12年的历史,但它已经无法满足当前Web应用日益增长的高性能、高用户体验的需求。CSS 3极大地简化了CSS的编程模型,它不仅对已有的功能进行了扩展和延伸,而且更多的是对Web UI的设计理念的和方法进行了革新。在未来,CSS 3配合HTML 5标准,将掀起一场新的Web应用变革,甚至是整个互联网产业的变革。本书全面而系统地、极具针对性地对CSS 3进行了全面的讲解,完整地将CSS 3的所有新功能和新特性呈现给了我们,是学习CSS 3的不二之选。
——CSS 3中文开发者社区
作者简介
陆凌牛 资深Web开发工程师、软件开发工程师和系统设计师。从事Web开发多年,对各种Web开发技术(包括前端和后端)都有非常深入的研究,经验极其丰富。HTML 5和CSS 3等新技术的先驱者和布道者,不仅对HTML 5与CSS 3的理论知识有比较深入的认识,而且已经大量在实践中付诸应用。此外,他还擅长微软与Java的相关技术,在C#、VB.NET、ASP.NET、SQL Server 、Oracle、Java、Struts、Spring、Hibernate等方面也积累大量的实战经验。
陆凌牛 著:暂无简介
前言
第 1 章 Web时代的变迁 / 1
1.1 迎接新的Web时代 / 2
1.1.1 HTML 5时代即将来临 / 2
1.1.2 HTML 5的目标 / 4
1.2 HTML 5会深受欢迎的理由 / 4
1.2.1 世界知名浏览器厂商对HTML 5的支持 / 4
1.2.2 第一个理由:时代的要求 / 5
1.2.3 第二个理由:Internet Explorer 8 / 6
1.3 可以放心使用HTML 5的三个理由 / 6
1.4 HTML 5要解决的三个问题 / 7
第 2 章 HTML 5与HTML 4的区别 / 9
2.1 语法的改变 / 10
2.1.1 HTML 5的语法变化 / 10
2.1.2 HTML 5中的标记方法 / 11
2.1.3 HTML 5确保了与之前HTML版本的兼容性 / 11
2.1.4 标记示例 / 13
2.2 新增的元素和废除的元素 / 13
2.2.1 新增的结构元素 / 13
2.2.2 新增的其他元素 / 15
2.2.3 新增的input元素的类型 / 19
2.2.4 废除的元素 / 19
2.3 新增的属性和废除的属性 / 20
2.3.1 新增的属性 / 20
2.3.2 废除的属性 / 21
2.4 全局属性 / 23
2.4.1 contentEditable属性 / 23
2.4.2 designMode属性 / 24
2.4.3 hidden属性 / 25
2.4.4 spellcheck属性 / 25
2.4.5 tabindex属性 / 25
第 3 章 HTML 5的结构 / 27
3.1 新增的主体结构元素 / 28
3.1.1 article元素 / 28
3.1.2 section元素 / 30
3.1.3 nav元素 / 32
3.1.4 aside元素 /33
3.1.5 time元素与微格式 / 35
3.1.6 pubdate属性 / 36
3.2 新增的非主体结构元素 / 36
3.2.1 header元素 / 37
3.2.2 hgroup元素 / 38
3.2.3 footer元素 / 38
3.2.4 address元素 / 39
3.3 HTML 5结构 / 40
3.3.1 大纲 / 40
3.3.2 对新的结构元素使用样式 / 43
3.3.3 article元素的样式 / 44
第 4 章 表单与文件 / 45
4.1 新增元素与属性 / 46
4.1.1 新增属性 / 46
4.1.2 大幅度地增加与改良了input元素的种类 / 49
4.1.3 对新的表单元素使用样式 / 54
4.1.4 output元素的追加 / 55
4.2 表单验证 / 55
4.2.1 自动验证 / 55
4.2.2 显式验证 / 57
4.2.3 取消验证 / 58
4.2.4 自定义错误信息 / 58
4.3 增强的页面元素 / 59
4.3.1 新增的figure元素与figcaption元素 / 60
4.3.2 新增的details元素 / 61
4.3.3 新增的mark元素 / 62
4.3.4 新增的progress元素 / 64
4.3.5 新增的meter元素 / 65
4.3.6 新增的menu元素与command元素 / 66
4.3.7 改良的ol列表 / 66
4.3.8 改良的dl列表 / 67
4.3.9 加以严格限制的cite元素 / 68
4.3.10 重新定义的small元素 / 69
4.4 文件API / 69
4.4.1 FileList对象与file对象 / 69
4.4.2 Blob对象 / 70
4.4.3 FileReader接口 / 72
4.5 拖放API / 77
4.5.1 实现拖放的步骤 / 77
4.5.2 DataTransfer对象的属性与方法 / 80
4.5.3 设定拖放时的视觉效果 / 80
4.5.4 自定义拖放图标 / 81
第 5 章 绘制图形 / 82
5.1 canvas元素的基础知识 / 83
5.1.1 在页面中放置canvas元素 / 83
5.1.2 绘制矩形 / 84
5.2 使用路径 / 86
5.2.1 绘制圆形 / 86
5.2.2 如果没有关闭路径会怎么样 / 88
5.2.3 moveTo与lineTo / 90
5.2.4 使用bezierCurveTo绘制贝济埃曲线 / 91
5.3 绘制渐变图形 / 93
5.3.1 绘制线性渐变 / 93
5.3.2 绘制径向渐变 / 95
5.4 绘制变形图形 / 96
5.4.1 坐标变换 / 96
5.4.2 坐标变换与路径的结合使用 / 98
5.4.3 矩阵变换 / 99
5.5 图形组合 / 103
5.6 给图形绘制阴影 / 105
5.7 使用图像 / 107
5.7.1 绘制图像 / 107
5.7.2 图像平铺 / 109
5.7.3 图像裁剪 / 111
5.7.4 像素处理 / 113
5.8 绘制文字 / 115
5.9 补充知识 / 117
5.9.1 保存与恢复状态 / 117
5.9.2 保存文件 / 118
5.9.3 简单动画的制作 / 119
第 6 章 多媒体播放 / 122
6.1 video元素与audio元素的基础知识 / 123
6.1.1 HTML 4页面中播放视频或音频的方法 / 123
6.1.2 HTML 5页面中播放视频或音频的方法 / 124
6.2 属性 / 125
6.3 方法 / 129
6.4 事件 / 132
6.4.1 事件处理方式 / 132
6.4.2 事件介绍 / 132
6.4.3 事件捕捉示例 / 133
第 7 章 本地存储 / 135
7.1 Web Storage / 136
7.1.1 Web Storage是什么 / 136
7.1.2 简单Web留言本 / 139
7.1.3 作为简易数据库来利用 / 141
7.2 本地数据库 / 144
7.2.1 本地数据库的基本概念 / 144
7.2.2 用executeSql来执行查询 / 145
7.2.3 使用数据库实现Web留言本 / 146
7.2.4 transaction方法中的处理 / 149
第 8 章 离线应用程序 / 151
8.1 离线Web应用程序详解 / 152
8.1.1 新增的本地缓存 / 152
8.1.2 本地缓存与浏览器网页缓存的区别 / 152
8.2 manifest文件 / 153
8.3 浏览器与服务器的交互过程 / 155
8.4 applicationCache对象 / 156
8.4.1 swapCache方法 / 157
8.4.2 applicationCache对象的事件 / 158
第 9 章 通信API / 162
9.1 跨文档消息传输 / 163
9.1.1 跨文档消息传输的基本知识 / 163
9.1.2 跨文档消息传输示例 / 163
9.2 Web Sockets通信 / 166
9.2.1 Web Sockets通信的基本知识 / 166
9.2.2 使用Web Sockets API / 166
9.2.3 Web Sockets API使用示例 / 167
9.2.4 发送对象 / 168
第10章 使用Web Workers处理线程 / 170
10.1 基础知识 / 171
10.2 与线程进行数据的交互 / 174
10.3 线程嵌套 / 176
10.3.1 单层嵌套 / 176
10.3.2 在多个子线程中进行数据的交互 / 178
10.4 线程中可用的变量、函数与类 / 180
第11章 获取地理位置信息 / 181
11.1 Geolocation API的基本知识 / 182
11.1.1 取得当前地理位置 / 182
11.1.2 持续监视当前地理位置的信息 / 184
11.1.3 停止获取当前用户的地理位置信息 / 184
11.2 position对象 / 184
11.3 在页面上使用google地图 / 186
第12章 CSS 3概述 / 189
12.1 概要介绍 / 190
12.1.1 CSS 3是什么 / 190
12.1.2 CSS 3的历史 / 190
12.2 使用CSS 3能做什么 / 191
12.2.1 模块与模块化结构 / 191
12.2.2 一个简单的CSS 3示例 / 192
第13章 选择器 / 195
13.1 选择器概述 / 197
13.2 属性选择器 / 197
13.2.1 属性选择器是什么 / 197
13.2.2 CSS 3中的属性选择器 / 199
13.2.3 灵活运用属性选择器 / 200
13.3 结构性伪类选择器 / 201
13.3.1 CSS中的伪类选择器及伪元素 / 201
13.3.2 选择器root、not、empty和target / 205
13.3.3 选择器:first-child、last-child、nth-child和nth-last-child / 210
13.3.4 选择器:nth-of-type和nth-last-of-type / 214
13.3.5 循环使用样式 / 216
13.3.6 only-child选择器 / 218
13.4 UI元素状态伪类选择器 / 219
13.4.1 选择器:E:hover、E:active和E:focus / 220
13.4.2 E:enabled伪类选择器与E:disabled伪类选择器 / 222
13.4.3 E: read-only伪类选择器与E:read-write伪类选择器 / 223
13.4.4 伪类选择器:E:checked、E:default和E: indeterminate / 224
13.4.5 E::selection伪类选择器 / 226
13.5 通用兄弟元素选择器 / 228
第14章 使用选择器在页面中插入内容 / 230
14.1 使用选择器来插入文字 / 231
14.1.1 使用选择器来插入内容 / 231
14.1.2 指定个别元素不进行插入 / 232
14.2 插入图像文件 / 234
14.2.1 在标题前插入图像文件 / 234
14.2.2 插入图像文件的好处 / 234
14.2.3 将alt属性的值作为图像的标题来显示 / 236
14.3 使用content属性来插入项目编号 / 237
14.3.1 在多个标题前加上连续编号 / 237
14.3.2 在项目编号中追加文字 / 238
14.3.3 指定编号的样式 / 238
14.3.4 指定编号的种类 / 238
14.3.5 编号嵌套 / 239
14.3.6 中编号中嵌入大编号 / 240
14.3.7 在字符串两边添加嵌套文字符号 / 242
第15章 文字与字体相关样式 / 244
15.1 给文字添加阴影—text-shadow属性 / 245
15.1.1 text-shadow属性的使用方法 / 245
15.1.2 位移距离 / 247
15.1.3 阴影的模糊半径 / 247
15.1.4 阴影的颜色 / 248
15.1.5 指定多个阴影 / 248
15.2 让文本自动换行—word-break属性 / 249
15.2.1 依靠浏览器让文本自动换行 / 249
15.2.2 指定自动换行的处理方法 / 249
15.3 让长单词与URL地址自动换行—word-wrap属性 / 251
15.4 使用服务器端字体—Web Font与@font-face属性 / 251
15.4.1 在网页上显示服务器端字体 / 252
15.4.2 定义斜体或粗体字体 / 253
15.4.3 显示客户端本地的字体 / 255
15.4.4 属性值的指定 / 256
15.5 修改字体种类而保持字体尺寸不变—font-size-adjust属性 / 257
15.5.1 字体不同导致文字大小的不同 / 257
15.5.2 font-size-adjust属性的使用方法 / 259
15.5.3 浏览器对于aspect值的计算方法 / 259
15.5.4 font-size-adjust属性的使用示例 / 260
第16章 盒相关样式 / 262
16.1 盒的类型 / 263
16.1.1 盒的基本类型 / 263
16.1.2 inline-block类型 / 264
16.1.3 inline-table类型 / 270
16.1.4 list-item类型 / 272
16.1.5 run-in类型与compact类型 / 273
16.1.6 表格相关类型 / 274
16.1.7 none类型 / 276
16.1.8 各种浏览器对于各种盒类型的支持情况 / 277
16.2 对于盒中容纳不下的内容的显示 / 277
16.2.1 overflow属性 / 278
16.2.2 overflow-x属性与overflow-y属性 / 281
16.2.3 text-overflow属性 / 281
16.3 对盒使用阴影 / 283
16.3.1 box-shadow属性的使用方法 / 283
16.3.2 将参数设定为0 / 284
16.3.3 对盒内子元素使用阴影 / 285
16.3.4 对第一个文字或第一行使用阴影 / 286
16.3.5 对表格及单元格使用阴影 / 287
16.4 指定针对元素的宽度与高度的计算方法 / 288
16.4.1 box-sizing属性 / 288
16.4.2 为什么要使用box-sizing属性 / 291
第17章 与背景和边框相关样式 / 293
17.1 与背景相关的新增属性 / 294
17.1.1 指定背景的显示范围—background-clip属性 / 294
17.1.2 指定绘制背景图像的绘制起点—background-origin属性 / 296
17.1.3 指定背景图像的尺寸—background-size属性 / 299
17.1.4 指定内联元素背景图像进行平铺时的循环方式—background-break属性 / 301
17.2 在一个元素中显示多个背景图像 / 302
17.3 圆角边框的绘制 / 303
17.3.1 border-radius属性 / 304
17.3.2 在border-radius属性中指定两个半径 / 305
17.3.3 不显示边框的时候 / 306
17.3.4 修改边框种类的时候 / 306
17.3.5 绘制四个角不同半径的圆角边框 / 306
17.4 使用图像边框 / 307
17.4.1 border-image属性 / 307
17.4.2 border-image属性最简单的使用方法 / 308
17.4.3 使用border-image属性来指定边框宽度 / 310
17.4.4 中央图像的自动拉伸 / 311
17.4.5 指定四条边中图像的显示方法 / 312
17.4.6 使用背景图像 / 315
第18章 CSS 3中的变形处理 / 317
18.1 transform功能的基础知识 / 318
18.1.1 如何使用transform功能 / 318
18.1.2 transform功能的分类 / 319
18.2 对一个元素使用多种变形的方法 / 323
18.2.1 两个变形示例 / 323
18.2.2 指定变形的基准点 / 325
第19章 CSS 3中的动画功能 / 328
19.1 Transitions功能 / 329
19.1.1 Transitions功能的使用方法 / 329
19.1.2 使用Transitions功能同时平滑过渡多个属性值 / 330
19.2 Animations功能 / 333
19.2.1 Animations功能的使用方法 / 333
19.2.2 实现多个属性值同时改变的动画 / 335
19.2.3 实现动画的方法 / 337
19.2.4 实现网页的淡入效果 / 339
第20章 布局相关样式 / 340
20.1 多栏布局 / 341
20.1.1 使用float属性或position属性的缺点 / 341
20.1.2 使用多栏布局方式 / 343
20.2 盒布局 / 346
20.2.1 盒布局的基础知识 / 346
20.2.2 弹性盒布局 / 350
第21章 Media Queries相关样式 / 362
21.1 根据浏览器的窗口大小来选择使用不同的样式 / 363
21.2 在iPhone中的显示 / 367
21.3 Media Queries的使用方法 / 368
第22章 CSS 3的其他重要样式和属性 / 371
22.1 颜色相关样式 / 372
22.1.1 利用alpha通道来设定颜色 / 372
22.1.2 alpha通道与opacity属性的区别 / 374
22.1.3 指定颜色值为transparent / 376
22.2 用户界面相关样式 / 377
22.2.1 轮廓相关样式 / 377
22.2.2 resize属性 / 380
22.3 取消对元素的样式指定—initial属性值 / 381
22.3.1 取消对元素的样式指定 / 381
22.3.2 使用initial属性值并不等于取消样式设定的特例 / 383
第23章 综合实例 / 385
23.1 实例1:使用HTML 5中新增结构元素来构建网页 / 386
23.1.1 组织网页结构 / 386
23.1.2 header元素中的内容 / 388
23.1.3 aside元素中的内容 / 395
23.1.4 section元素中的内容 / 398
23.1.5 footer元素中的内容 / 400
23.2 实例2:使用HTML 5+CSS 3来构建Web应用程序 / 401
23.2.1 HTML 5页面代码分析 / 402
23.2.2 CSS 3样式代码分析 / 405
23.2.3 JavaScript脚本代码分析 / 409