图解CSS3

图书标准信息

• 作者 廖伟华 著
• 出版社 机械工业出版社
• 出版时间 2014-07
• 版次 1
• ISBN 9787111469209
• 定价 79.00元
• 装帧 平装
• 开本 16开
• 纸张 胶版纸
• 页数 516页
• 丛书 Web开发技术丛书

【内容简介】

本书是CSS3领域的标准性著作，由资深Web前端工程师根据CSS3的全新技术标准撰写。内容极为全面、丰富和翔实，由浅入深地讲解了CSS3新特性的语法、功能和使用技巧，涵盖选择器、边框、背景、文本、颜色、UI、动画、新型盒模型、媒体查询、响应式设计等各种模块；写作方式创新，有趣且易懂，用图解的方式来描述CSS3的每一个特性甚至每一个步骤都配有实战效果图；包含大量案例，实战性强，每个特性都有作者从实践中精心归纳和挑选出来的案例辅助讲解，同时还包含一个综合性的大案例。无论你是完全没有经验的准前端工程师，还是已经有一定经验的前端工程师，如果你想系统学习CSS3，那么本书将会是你的合适选择；如果你是一位成熟的前端开发工程师，但时常为如何合理地使用某些特性而费时去查阅相关资料，那么本书也是你的不二选择。

【作者简介】

　　廖伟华（网名：大漠）， 资深Web前端工程师，W3cplus创始人，目前就职于Ctrip UED。中国Drupal社区核心成员之一。对HTML5、CSS3、XHTML和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内zui早研究和使用CSS3技术的一批人。现在还关注Web产品策划、交互设计、SEO以及移动端开发。2012年4月刊的《程序员》杂志上发表文章“Twitter Bootstrap：前端框架利器”。

【目录】

Contents目　录
前　言
第1章　揭开CSS3的面纱1
1.1　什么是CSS31
1.1.1　CSS3的新特性2
1.1.2　CSS3的发展状况4
1.1.3　现在能使用CSS3吗5
1.1.4　使用CSS3有什么好处5
1.2　浏览器对CSS3的支持状况6
1.2.1　经典回顾：图说浏览器大战7
1.2.2　浏览器的市场份额8
1.2.3　主流浏览器对CSS3支持状况9
1.3　渐进增强11
1.3.1　渐进增强与优雅降级11
1.3.2　渐进增强的优点12
1.4　CSS3的现状及未来13
1.4.1　谁在使用CSS313
1.4.2　CSS3的未来14
1.5　本章小结14
第2章　CSS3选择器15
2.1　认识CSS选择器15
2.1.1　CSS3选择器的优势15
2.1.2　CSS3选择器分类16
2.2　基本选择器16
2.2.1　基本选择器语法16
2.2.2　浏览器兼容性17
2.2.3　实战体验：使用基本选择器17
2.2.4　通配选择器18
2.2.5　元素选择器18
2.2.6　ID选择器18
2.2.7　类选择器19
2.2.8　群组选择器20
2.3　层次选择器21
2.3.1　层次选择器语法21
2.3.2　浏览器兼容性21
2.3.3　实战体验：使用层次选择器选择元素21
2.3.4　后代选择器23
2.3.5　子选择器23
2.3.6　相邻兄弟选择器24
2.3.7　通用兄弟选择器25
2.4　动态伪类选择器25
2.4.1　动态伪类选择器语法26
2.4.2　浏览器兼容性26
2.4.3　实战体验：美化按钮27
2.5　目标伪类选择器29
2.5.1　目标伪类选择器语法29
2.5.2　浏览器兼容性30
2.5.3　实战体验：制作手风琴效果30
2.6　语言伪类选择器33
2.6.1　语言伪类选择器语法33
2.6.2　浏览器兼容性34
2.6.3　实战体验：定制不同语言版本引文风格34
2.7　UI元素状态伪类选择器36
2.7.1　UI元素状态伪类选择器语法36
2.7.2　浏览器兼容性36
2.7.3　实战体验：Bootstrap的表单元素UI状态37
2.8　结构伪类选择器41
2.8.1　重温HTML的DOM树41
2.8.2　结构伪类选择器语法42
2.8.3　浏览器兼容性43
2.8.4　结构伪类选择器中的n是什么44
2.8.5　结构伪类选择器的使用方法详解47
2.8.6　实战体验：CSS3美化表格61
2.9　否定伪类选择器66
2.9.1　否定伪类选择器语法66
2.9.2　浏览器兼容性67
2.9.3　实战体验：改变图片效果67
2.10　伪元素69
2.10.1　伪元素::first-letter69
2.10.2　伪元素::first-line70
2.10.3　伪元素::before和::after70
2.10.4　伪元素::selection72
2.11　属性选择器73
2.11.1　属性选择器语法73
2.11.2　浏览器兼容性74
2.11.3　属性选择器的使用方法详解75
2.11.4　实战体验：创建个性化链接样式81
2.12　本章小结84
第3章　CSS3边框85
3.1　CSS3边框简介85
3.1.1　边框的基本属性85
3.1.2　边框的类型86
3.1.3　谁在使用CSS3边框88
3.2　CSS3边框颜色属性88
3.2.1　border-color属性的语法及参数88
3.2.2　浏览器兼容性90
3.2.3　border-color属性的优势90
3.2.4　实战体验：立体渐变边框效果91
3.3　CSS3图片边框属性91
3.3.1　border-image属性的语法及参数92
3.3.2　border-image属性使用方法92
3.3.3　浏览器兼容性99
3.3.4　border-image属性的优势100
3.3.5　实战体验：按钮圆角阴影效果100
3.4　CSS3圆角边框属性105
3.4.1　border-radius属性的语法及参数105
3.4.2　border-radius属性使用方法107
3.4.3　浏览器兼容性114
3.4.4　border-radius属性的优势115
3.4.5　实战体验：制作特殊图形115
3.5　CSS3盒子阴影属性118
3.5.1　box-shadow属性的语法及参数118
3.5.2　box-shadow属性使用方法119
3.5.3　浏览器兼容性129
3.5.4　box-shadow属性的优势130
3.5.5　实战体验：制作3D搜索表单130
3.6　本章小结133
第4章　CSS3背景134
4.1　CSS3背景属性简介134
4.1.1　背景的基本属性134
4.1.2　与背景相关的新增属性137
4.2　CSS3背景原点属性137
4.2.1　background-origin属性的语法及参数137
4.2.2　background-origin属性使用方法138
4.2.3　浏览器兼容性140
4.3　CSS3背景裁切属性141
4.3.1　background-clip属性的语法及参数141
4.3.2　background-clip属性使用方法143
4.3.3　浏览器兼容性147
4.4　CSS3背景尺寸属性148
4.4.1　background-size属性的语法及参数148
4.4.2　background-size属性使用方法149
4.4.3　浏览器兼容性152
4.4.4　实战体验：制作全屏背景153
4.5　内联元素背景图像平铺循环方式154
4.6　CSS3多背景属性154
4.6.1　CSS3多背景语法及参数155
4.6.2　CSS3多背景的优势156
4.6.3　浏览器兼容性156
4.6.4　实战体验：制作花边框157
4.7　本章小结159
第5章　CSS3文本160
5.1　CSS3文本简介160
5.2　CSS3文本阴影属性161
5.2.1　text-shadow属性的语法及参数162
5.2.2　浏览器兼容性162
5.2.3　实战体验：制作立体文本163
5.3　CSS3溢出文本属性166
5.3.1　text-overflow属性的语法及参数166
5.3.2　浏览器兼容性166
5.3.3　text-overflow属性使用方法167
5.3.4　实战体验：制作固定区域的博客列表168
5.4　CSS3文本换行170
5.4.1　word-wrap属性170
5.4.2　word-break属性173
5.4.3　white-space属性177
5.4.4　文本换行技巧179
5.4.5　文本换行技术对比180
5.5　本章小结180
☆第6章　CSS3颜色特性181
6.1　网页中的色彩特性181
6.1.1　网页色彩的表现原理181
6.1.2　Web页面的安全色182
6.1.3　色彩模式183
6.2　CSS3透明属性184
6.2.1　opacity属性的语法及参数184
6.2.2　opacity浏览器兼容性185
6.2.3　实战体验：制作透明过渡色块185
6.3　CSS3颜色模式187
6.3.1　RGBA颜色模式187
6.3.2　HSL颜色模式190
6.3.3　HSLA颜色模式194
6.3.4　RGBA和HSLA颜色模式之间的选择196
6.3.5　RGBA/HSLA的IE兼容方案196
6.3.6　RGBA/HSLA滤镜格式197
6.4　本章小结197
第7章　CSS3盒模型198
7.1　CSS盒模型简介198
7.1.1　什么是盒模型198
7.1.2　重置盒模型解析模式199
7.2　CSS3盒模型属性200
7.2.1　box-sizing属性的语法及参数200
7.2.2　浏览器兼容性201
7.2.3　实战体验：box-sizing拯救了布局202
7.3　CSS3内容溢出属性209
7.3.1　overflow-x和overflow-y属性的语法及参数209
7.3.2　浏览器兼容性209
7.4　CSS3自由缩放属性210
7.4.1　resize属性的语法及参数210
7.4.2　浏览器兼容性210
7.4.3　实战体验：修改文本域随意调整大小的功能210
7.5　CSS3外轮廓属性211
7.5.1　outline属性的语法及参数211
7.5.2　浏览器兼容性212
7.5.3　outline和border的对比212
7.5.4　实战体验：模仿边框效果213
7.6　本章小结213
第8章　CSS3伸缩布局盒模型214
8.1　Flexbox模型基础知识214
8.1.1　CSS中的布局模式214
8.1.2　Flexbox模型的功能215
8.1.3　Flexbox模型中的术语215
8.1.4　Flexbox模型规范状态218
8.1.5　Flexbox模型浏览器兼容性218
8.1.6　Flexbox模型语法变更219
8.2　旧版本Flexbox模型的基本使用221
8.2.1　伸缩容器设置display222
8.2.2　伸缩流方向box-orient224
8.2.3　布局顺序box-direction226
8.2.4　伸缩换行box-lines229
8.2.5　主轴对齐box-pack232
8.2.6　侧轴对齐box-align237
8.2.7　伸缩性box-flex242
8.2.8　显示顺序box-ordinal-group246
8.2.9　实战体验：box制作自适应的三列等高布局249
8.3　混合版本Flexbox模型的基本使用253
8.3.1　伸缩容器设置display253
8.3.2　伸缩流方向flex-direction254
8.3.3　伸缩换行flex-wrap257
8.3.4　伸缩流方向与换行flex-flow259
8.3.5　主轴对齐flex-pack259
8.3.6　侧轴对齐flex-align262
8.3.7　堆栈伸缩行flex-line-pack266
8.3.8　伸缩性flex271
8.3.9　显示顺序flex-order273
8.4　新版本Flexbox模型的基本使用275
8.4.1　伸缩容器display275
8.4.2　伸缩流方向flex-direction276
8.4.3　伸缩换行flex-wrap276
8.4.4　伸缩流方向与换行flex-flow277
8.4.5　主轴对齐justify-content277
8.4.6　侧轴对齐align-items和align-self278
8.4.7　堆栈伸缩行align-content280
8.4.8　伸缩性flex281
8.4.9　显示顺序order285
8.5　综合案例：跨浏览器的三列布局288
8.6　本章小结292
第9章　CSS3多列布局293
9.1　CSS3多列布局简介293
9.1.1　浏览器兼容性293
9.1.2　CSS3多列布局的属性294
9.2　CSS3多列布局基本属性295
9.2.1　columns属性的语法及参数295
9.2.2　浏览器兼容性295
9.2.3　实战体验：Web页面的多列布局296
9.3　CSS3多列布局列宽属性297
9.3.1　column-width属性的语法及参数297
9.3.2　实战体验：浏览器根据窗口宽度变化调整列数298
9.4　CSS3多列布局列数属性302
9.4.1　column-count属性的语法及参数302
9.4.2　实战体验：显示固定列数302
9.5　CSS3多列布局列间距属性303
9.5.1　column-gap属性的语法及参数304
9.5.2　实战体验：设置列间距304
9.6　CSS3多列布局列边框样式属性306
9.6.1　column-rule属性的语法及参数306
9.6.2　实战体验：设置列边框307
9.7　CSS3多列布局跨列属性309
9.7.1　column-span属性的语法及参数310
9.7.2　实战体验：文章标题跨列显示310
9.8　CSS3多列布局列高度属性311
9.9　本章小结311
☆第10章　CSS3渐变312
10.1　CSS3渐变简介312
10.1.1　什么是色标312
10.1.2　浏览器兼容性313
10.2　CSS3线性渐变314
10.2.1　CSS3线性渐变语法与参数315
10.2.2　CSS3线性渐变的基本用法317
10.2.3　自定义CSS3线性渐变324
10.2.4　实战体验：CSS3制作渐变按钮325
10.3　CSS3径向渐变333
10.3.1　CSS3径向渐变语法333
10.3.2　CSS3径向渐变的属性参数334
10.3.3　CSS3径向渐变的基本用法335
10.3.4　实战体验：CSS3径向渐变制作圆形图标按钮350
10.4　CSS3重复渐变353
10.4.1　CSS3重复线性渐变353
10.4.2　CSS3重复径向渐变354
10.4.3　实战体验：制作记事本纸张效果354
10.5　综合案例：CSS3渐变制作纹理背景355
10.6　本章小结357
第11章　CSS3变形358
11.1　CSS3变形简介358
11.1.1　CSS变形属性及函数358
11.1.2　浏览器兼容性359
11.2　CSS变形属性详解360
11.2.1　transform属性360
11.2.2　transform-origin属性363
11.2.3　transform-style属性370
11.2.4　perspective属性372
11.2.5　perspective-origin属性377
11.2.6　backface-visibility属性380
11.3　CSS32D变形385
11.3.1　2D位移385
11.3.2　2D缩放390