CSS 3实战 PDF 高质量版

内容简介

全书一共分为9章，首先从宏观上介绍了CSS 3技术的最新发展现状、新特性，以及现有的主流浏览器对这些新特性的支持情况；然后详细讲解了CSS 3的选择器、文本特性、颜色特性、弹性布局、边框和背景特性、盒模型、UI设计、多列布局、圆角和阴影、渐变、变形、转换、动画、投影、开放字体、设备类型、语音样式等重要的理论知识，这部分内容是本书的基础和核心。不仅每个知识点都配有丰富的、精心设计的实战案例，而且详细介绍了每一种新特性在各种主流浏览器上的兼容性，旨在帮助设计师们提高设计的安全性。

本书全彩印刷，排版、设计和装帧也非常精美，既适合学习参考，也适合收藏。无论你是前端领域的新人，还是有着丰富经验的老手，都能通过本书系统而全面地学习和实践CSS 3的最新技术，为迎接新一轮的Web技术革命打下坚实的基础。

目录

• 前言
• 第1章预览激动人心的CSS31
• 1.1CSS3发展概述1
• 1.2CSS3模块化简介2
• 1.3CSS3新特性概览4
• 1.4主流浏览器对CSS3的支持8
• 1.5CSS3的未来和思考9
• 第2章CSS3新增的选择器11
• 2.1属性选择器13
• 实战体验：文档共享的友善之举14
• 2.2结构伪类选择器17
• 实战体验1：设计优雅的数据表格19
• 实战体验2：CSS大战保龄球21
• 实战体验3：让枯燥的列表更有趣27
• 实战体验4：清理圆角边框中的垃圾标签29
• 2.3UI元素状态伪类选择器33
• 实战体验1：设计可用的表单36
• 实战体验2：设计友好、易用的表单40
• 2.4其他新增选择器45
• 实战体验1：设计层序化的数据表格47
• 实战体验2：改善页内导航的视觉体验50
• 第3章增强的文本和颜色功能54
• 3.1文本阴影—text-shadow属性56
• 实战体验：设计超酷的黑猫警长首页62
• 3.2溢出文本省略—text-overflow属性64
• 实战体验：设计固定区域的新闻列表66
• 3.3文本换行显示—word-wrop属性67
• 实战体验：防止表格标题行换行71
• 3.4CSS3文本模块解析73
• 3.5CSS3不同版本之间的文本规范的差异79
• 3.6HSL色彩模式80
• 实战体验：网页配色解决方案表81
• 3.7HSLA色彩模式86
• 实战体验：模拟渐变色条87
• 3.8RGBA色彩模式88
• 实战体验：设计带阴影边框的表单88
• 3.9不透明度—opacity属性90
• 实战体验：设计灯箱广告背景布91
• 第4章新增的弹性盒模型93
• 4.1定义盒子的布局取向—box-orient属性95
• 实战体验：设计多栏布局96
• 4.2定义盒子的布局顺序—box-direction属性99
• 实战体验：反向布局网页100
• 4.3定义盒子布局位置—box-ordinal-group属性101
• 实战体验：垂直网页布局102
• 4.4定义盒子的弹性空间—box-flex属性104
• 实战体验：自适应栏目宽度设计105
• 4.5管理盒子的空间—box-pack和box-align属性109
• 实战体验：自适应布局居中设计111
• 4.6空间溢出管理—box-lines属性115
• 实战体验：让子元素分行显示115
• 4.7弹性布局综合实战—打造新技术含量的博客117
• 4.7.1构建博客页的基本结构117
• 4.7.2完善博客页的结构118
• 4.7.3弹性布局设计119
• 第5章完善的盒模型和UI设计124
• 5.1定义多色边框—border-color属性124
• 实战体验：设计立体边框127
• 5.2定义边框背景图—border-image属性128
• 实战体验：设计各种精巧的边框138
• 5.3设计圆角—border-radius属性140
• 5.4设计块阴影—box-shadow属性147
• 5.5CSS3边框和背景样式综合实战151
• 5.6设计多重背景图象—background属性155
• 实战体验：背景图像合成157
• 5.7定义背景坐标原点—background-origin属性158
• 实战体验：设计信纸背景效果159
• 5.8定义背景裁剪区域—background-clip属性160
• 实战体验1：设计内容区背景163
• 实战体验2：设计按钮效果163
• 5.9定义背景图像大小—background-size属性164
• 实战体验：设计自适应模块大小的背景图像165
• 5.10溢出内容处理—overflow-x和overflow-y属性166
• 5.11定义盒模型解析模式—box-sizing属性170
• 5.12自由缩放—resize属性171
• 实战体验：设计能随意调整大小的壁画172
• 5.13定义外轮廓线—outline属性173
• 实战体验：设计醒目激活和焦点提示框175
• 5.14定义外轮廓线宽度—outline-width属性177
• 5.15定义外轮廓线样式—outline-style属性178
• 5.16定义外轮廓线颜色—outline-color属性179
• 5.17定义外轮廓线位移—outline-offset属性179
• 实战体验：放大激活和焦点提示框180
• 5.18定义导航序列号—nav-index属性181
• 实战体验：调整表单输入框的键盘激活顺序182
• 5.19定义方向键控制顺序184
• 实战体验：正确定义键盘控制键顺序185
• 5.20为元素添加内容—content属性187
• 第6章CSS3多列布局190
• 6.1定义多列布局—columns属性190
• 实战体验：设计文章多栏显示191
• 6.2定义列宽度—column-width属性192
• 实战体验：设计固定宽度的栏目版面193
• 6.3定义列数—column-count属性194
• 实战体验：设计固定列数的版面195
• 6.4定义列间距—column-gap属性196
• 实战体验：设计疏朗的文档版面197
• 6.5定义列边框样式—column-rule属性198
• 实战体验：为多列布局版面设计边框效果200
• 6.6定义跨列显示—column-span属性201
• 实战体验：设计文章标题跨列显示202
• 6.7定义栏目高度—column-fill属性203
• 实战体验：设计不等高的多列布局效果204
• 6.8分列打印206
• 6.9结合案例实战—设计精美的多列网页版式207
• 第7章CSS3渐变设计217
• 7.1Webkit引擎的CSS渐变实现方法217
• 7.1.1基本语法218
• 7.1.2直线渐变的基本用法218
• 7.1.3径向渐变的基本用法220
• 7.1.4渐变的其他应用225
• 7.2Gecko引擎的CSS渐变实现方法227
• 7.2.1直线渐变基本语法227
• 7.2.2直线渐变的基本用法227
• 7.2.3径向渐变基本语法230
• 7.2.4径向渐变的基本用法231
• 7.2.5渐变的应用234
• 7.3IE浏览器引擎的CSS渐变实现方法235
• 7.3.1基本语法235
• 7.3.2IE渐变滤镜实战应用236
• 7.4W3C标准化的CSS渐变实现方法238
• 7.5CSS3渐变实战239
• 7.5.1CSS渐变下拉菜单239
• 7.5.2CSS渐变按钮243
• 第8章CSS3动画设计248
• 8.1CSS变形（Transformation）248
• 8.1.1变形基础—transform属性249
• 实战体验：设计一个简单的鼠标动画250
• 8.1.2旋转动画—rotate()函数251
• 8.1.3缩放动画—scale()函数253
• 8.1.4移动动画—translate()函数255
• 8.1.5倾斜动画—skew()函数258
• 8.1.6矩阵变形动画—matrix()函数260
• 8.1.7CSS3实战体验：设计图片墙262
• 8.2CSS变形原点—transform-origin属性265
• CSS3实战体验：定义图片旋转的原点265
• 8.3CSS过渡—transition属性268
• 8.3.1设置过渡的CSS属性—transition-property属性269
• 8.3.2设置过渡的时间—transition-duration属性270
• 8.3.3设置过渡延迟时间—transition-delay属性271
• 8.3.4设置过渡效果—transition-timing-function属性272
• CSS3实战体验：设计OSXDock（OS系统的导航码头）274
• 8.4CSS动画—animation属性276
• 8.4.1设置CSS动画名称—animation-name属性277
• 8.4.2设置CSS动画时间—animation-duration属性278
• 8.4.3设置CSS动画播放方式—animation-timing-function属性278
• 8.4.4设置CSS动画开始播放的时间—animation-delay属性279
• 8.4.5设置CSS动画播放次数—animation-iteration-count属性279
• 8.4.6设置CSS动画播放方向—animation-direction属性280
• CSS3实战体验：设计自动翻转的图片效果280
• 8.5CSS3动画综合实战282
• 8.5.1设计动态立体盒子282
• 8.5.2设计CSS3手风琴式折叠面板285
• 8.5.3设计能够旋转背景的易拉罐287
• 8.5.4设计旋转出仓的光盘动画效果290
• 第9章CSS3新增的其他功能295
• 9.1引用外部字体类型—@font-face规则296
• 9.1.1@font-face规则的用法296
• 实战体验：设计艺术字体297
• 9.1.2关于开放字体格式298
• 9.2定义CSS设备类型—MediaQueries299
• 9.2.1@media规则的用法300
• 实战体验：为不同设备设计不同的盒子框样式302
• 9.2.2使用MediaQueries链接外部CSS文件304
• 9.2.3测试MediaQueries305
• 9.3定义投影—CSSReflections305
• CSS实战体验：应用CSSReflections306
• 9.4定义语音样式—CSS3Speech310
• 实战体验：体验CSS3Speech应用311