目 录
译者序
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
鄂公网安备 42010302001612号 