CSS3实战：开发与设计

目　　录
译者序
CSS3欢迎你
致　谢
第1章　CSS3和现代Web设计 / 1
1.1　为什么要使用CSS3 / 2
1.2　现代Web设计理念 / 3
1.2.1　可访问性第一 / 3
1.2.2　可用性其次 / 5
1.2.3　优雅降级和渐进增强 / 5
1.3　对内容的思考过程 / 6
1.4　本书中的CSS3模块 / 7
1.5　常用CSS3特性 / 9
1.5.1　厂商前缀 / 9
1.5.2　CSS3颜色 / 11
1.5.3　用rem调整文本大小 / 13
1.5.4　CSS3选择器 / 15
小结 / 24
第2章　利用HTML5与JavaScript构建坚实的跨浏览器模板 / 25
2.1　从HTML5语义开始 / 26
2.1.1　为什么用HTML5 / 26
2.1.2　HTML5错误处理 / 27
2.2　建立模板 / 28
2.2.1　HTML5的DOCTYPE / 28
2.2.2　语言和基本文档纲要 / 29
2.2.3　定义文档字符集 / 29
2.2.4　XHTML5和代码风格 / 30
2.2.5　为HTML5语义元素添加跨浏览器支持性 / 30
2.3　校验HTML5 / 32
2.4　探索HTML5元素 / 33
2.4.1　<audio>与<video> / 34
2.4.2　<article>与<section> / 36
2.4.3　<header>与<footer> / 38
2.4.4　<aside> / 38
2.4.5　<nav> / 39
2.4.6　<hgroup> / 39
2.4.7　<figure>与<figcaption> / 40
2.4.8　<time> / 40
2.4.9　<mark> / 42
2.4.10　HTML5表单元素 / 42
2.4.11　<canvas> / 44
2.5　CSS重置和normalize.css / 45
2.6　JavaScript库综述 / 46
2.6.1　css3-mediaqueries-js / 46
2.6.2　CSS3PIE / 47
2.6.3　Modernizr / 48
2.6.4　Selectivizr / 48
2.7　IE条件注释 / 48
小结 / 50
第3章　让字体和文本变得有趣 / 51
3.1　蟒蛇来啦 / 52
3.2　使用Web字体 / 53
3.2.1　给示例使用Web字体 / 54
3.2.2　Web-Font问题 / 56
3.2.3　Windows渲染问题 / 59
3.2.4　商用字体服务 / 62
3.3　CSS3文本争执 / 64
3.3.1　文本阴影 / 65
3.3.2　控制文本溢出 / 67
3.3.3　word-wrap打破长单词 / 68
3.3.4　控制断字 / 69
3.4　CSS3排版 / 70
3.4.1　基于Web的连写和文本渲染优化 / 71
3.4.2　启用Web高级的字体特性font-feature-settings / 72
3.4.3　连写和自由连写 / 73
3.4.4　数字、分数和序数 / 73
3.4.5　小型大写字母和小号大写字母 / 75
3.4.6　字距调整 / 76
3.4.7　样式集和其他组合效果 / 76
3.4.8　font-feature用途的小贴士 / 77
小结 / 78
第4章　CSS3修饰的增强盒子 / 79
4.1　CSS3修饰的光明前景 / 80
4.2　border-radius：圆角的福音 / 82
4.3　使用box-shadow添加立体效果 / 85
4.4　用CSS渐变来修饰 / 88
4.4.1　线性渐变 / 88
4.4.2　径向渐变 / 92
4.4.3　为旧版IE提供渐变支持 / 98
4.5　多重背景 / 99
4.6　构思巧妙的盒子：border-image / 101
4.7　box-decoration-break / 106
4.8　给横幅广告添加修饰 / 107
4.8.1　构建基础 / 107
4.8.2　添加CSS3火花 / 109
4.8.3　支持旧版浏览器 / 110
4.8.4　改进广告 / 110
小结 / 111
第5章　用CSS3制作动画效果 / 112
5.1　CSS动画 / 113
5.2　变形 / 114
5.2.1　2D变形 / 115
5.2.2　3D变形 / 121
5.3　过渡 / 134
5.3.1　选择过渡的元素 / 135
5.3.2　选择过渡持续时间 / 136
5.3.3　过渡延迟时间 / 136
5.3.4　过渡的速率变化 / 136
5.3.5　过渡简写及多重过渡 / 141
5.4　动画 / 142
5.4.1　建立基本动画 / 142
5.4.2　给元素应用动画 / 144
5.4.3　设置动画持续时间 / 145
5.4.4　调整动画的速率 / 146
5.4.5　增加延迟时间 / 147
5.4.6　选择animation-direction:back还是forth / 147
5.4.7　animation-fill-mode / 148
5.4.8　简写和多重动画 / 148
5.5　用动画提升横幅广告 / 149
5.6　用Modernizr提供备选方案 / 153
5.6.1　给页面添加Modernizr / 154
5.6.2　提供替换样式 / 155
5.6.3　动画和脚本 / 157
小结 / 163
第6章　使用CSS生成图标 / 164
6.1　翻滚吧，图标 / 165
6.2　在页面上使用图标 / 165
6.3　何时使用图标 / 167
6.4　生成图标的基础 / 168
6.4.1　内容生成图标 / 170
6.4.2　CSS Sprite图 / 170
6.4.3　更“防弹式”的图标 / 171
6.4.4　多背景图片的修饰图标 / 172
6.5　Web字体作为图标 / 173
6.6　独特的纯CSS图标 / 176
小结 / 179
第7章　CSS3布局排版 / 180
7.1　CSS3布局模块简介 / 181
7.2　多栏布局 / 182
7.2.1　设置分栏的数量 / 183
7.2.2　根据宽度分栏而非数量 / 184
7.2.3　定义分栏空隙 / 185
7.2.4　定义分栏内容的填充方式 / 185
7.2.5　内容的跨栏目布置 / 187
7.2.6　控制栏目的划分 / 188
7.2.7　实战多栏布局 / 189
7.2.8　多栏布局的问题 / 189
7.3　使用Flexbox / 191
7.3.1　控制Flexbox的子项伸缩流的方向 / 192
7.3.2　自定义子元素的显示顺序 / 195
7.3.3　对齐Flexbox子项 / 195
7.3.4　弹性的Flexbox / 197
7.3.5　用Modernizr实现跨浏览器Flexbox / 201
7.4　探索网格 / 201
7.4.1　定义网格结构 / 202
7.4.2　将内容嵌套在网格上 / 203
7.4.3　一个真实的网格例子 / 204
7.4.4　网格问题 / 205
7.5　值得一提的其他布局模块 / 206
7.5.1　区域 / 206
7.5.2　排除 / 208
7.5.3　GCPM / 210
小结 / 211
第8章　响应式和自适应设计 / 212
8.1　网络浏览器简史 / 213
8.2　响应式设计策略 / 214
8.2.1　不做任何特殊处理 / 215
8.2.2　不同的设备提供不同的内容 / 215
8.2.3　为不同浏览器/设备优化网站 / 218
8.3　弹性布局技术 / 219
8.3.1　可伸缩的容器 / 219
8.3.2　响应式媒体布局 / 220
8.4　媒介查询 / 223
8.4.1　一些媒介查询的例子 / 225
8.4.2　移动设备优先 / 230
8.5　媒介查询补丁 / 231
8.6　提供响应式图片 / 232
8.7　移动浏览器是个骗子 / 233
8.8　高保真设备 / 237
8.9　一个响应式的重金属横幅广告 / 239
8.9.1　第一种选择：800px或者更小 / 239
8.9.2　第二种选择：480px或者更小 / 239
小结 / 241