出版时间:2011-5 出版社:机械工业出版社 作者:成林 页数:312
Tag标签:无
内容概要
《CSS
3实战》由国内资深Web前端工程师撰写,权威性毋庸置疑。如果你是一位有前瞻性的Web前端工作者,那么本书也许会让你在即将到来的Web技术革命中领先一步。
本书技术新颖,基于CSS 3的最新版本撰写,所有新功能和新特性尽含其中;内容全面,不仅讲解了CSS
3的方方面面,而且还在一些关键的功能点上与CSS
2.x进行了充分的比较;实战性强,几乎所有知识点都配有案例,全书配有实战案例百余个。本书不仅能满足读者系统学习理论知识的需求,还能满足需要充分实践的需求。
全书一共分为9章,首先从宏观上介绍了CSS
3技术的最新发展现状、新特性,以及现有的主流浏览器对这些新特性的支持情况;然后详细讲解了CSS
3的选择器、文本特性、颜色特性、弹性布局、边框和背景特性、盒模型、UI设计、多列布局、圆角和阴影、渐变、变形、转换、动画、投影、开放字体、设备类型、语音样式等重要的理论知识,这部分内容是本书的基础和核心。不仅每个知识点都配有丰富的、精心设计的实战案例,而且详细介绍了每一种新特性在各种主流浏览器上的兼容性,旨在帮助设计师们提高设计的安全性。
本书全彩印刷,排版、设计和装帧也非常精美,既适合学习参考,也适合收藏。无论你是前端领域的新人,还是有着丰富经验的老手,都能通过本书系统而全面地学习和实践CSS
3的最新技术,为迎接新一轮的Web技术革命打下坚实的基础。
作者简介
成林,资深Web前端工程师,从事Web前端工作多年,精通CSS、HTML、JavaScript、jQuery和Ajax等Web前端技术,在实践中积累了大量的经验。推崇Web技术标准,曾经在多所高等院校和一些线下技术沙龙主讲Web标准和规范相关的课程,曾经还参与过W3C组织的标准化文档的中文编译工作。近两年来,集中精力研究和实践CSS 3和 HTML 5前沿技术,是国内该领域的先驱者之一,已经有较为深入的认识和丰富的实践经验。
书籍目录
前言
第 1 章 预览激动人心的CSS 3
1.1 CSS 3发展概述
1.2 CSS 3模块化简介
1.3 CSS 3新特性概览
1.4 主流浏览器对CSS 3的支持
1.5 CSS 3的未来和思考
第 2 章 CSS 3新增的选择器
2.1 属性选择器
实战体验:文档共享的友善之举
2.2 结构伪类选择器
实战体验1:设计优雅的数据表格
实战体验2:CSS大战保龄球
实战体验3:让枯燥的列表更有趣
实战体验4:清理圆角边框中的垃圾标签
2.3 UI元素状态伪类选择器
实战体验1:设计可用的表单
实战体验2:设计友好、易用的表单
2.4 其他新增选择器
实战体验1:设计层序化的数据表格
实战体验2:改善页内导航的视觉体验
第3章 增强的文本和颜色功能
3.1 文本阴影—text-shadow属性
实战体验:设计超酷的黑猫警长首页
3.2 溢出文本省略—text-over flow属性
实战体验:设计固定区域的新闻列表
3.3 文本换行显示—word-wrop属性
实战体验:防止表格标题行换行
3.4 CSS 3文本模块解析
3.5 CSS 3不同版本之间的文本规范的差异
3.6 HSL色彩模式
实战体验:网页配色解决方案表
3.7 HSLA色彩模式
实战体验:模拟渐变色条
3.8 RGBA色彩模式
实战体验:设计带阴影边框的表单
3.9 不透明度—opacity属性
实战体验:设计灯箱广告背景布
第4章 新增的弹性盒模型
4.1 定义盒子的布局取向—box-orient属性
实战体验:设计多栏布局
4.2 定义盒子的布局顺序—box-direction属性
实战体验:反向布局网页
4.3 定义盒子布局位置—box-ordinal-group属性
实战体验:垂直网页布局
4.4 定义盒子的弹性空间—box-flex属性
实战体验:自适应栏目宽度设计
4.5 管理盒子的空间—box-pack和box-align属性
实战体验:自适应布局居中设计
4.6 空间溢出管理—box-lines属性
实战体验:让子元素分行显示
4.7 弹性布局综合实战—打造新技术含量的博客
4.7.1 构建博客页的基本结构
4.7.2 完善博客页的结构
4.7.3 弹性布局设计
第5章 完善的盒模型和UI设计
5.1 定义多色边框—border-color属性
实战体验:设计立体边框
5.2 定义边框背景图—border-image属性
实战体验:设计各种精巧的边框
5.3 设计圆角—border-radius属性
5.4 设计块阴影—box-shadow属性
5.5 CSS 3边框和背景样式综合实战
5.6 设计多重背景图象—background属性
实战体验:背景图像合成
5.7 定义背景坐标原点—background-origin属性
实战体验:设计信纸背景效果
5.8 定义背景裁剪区域—background-clip属性
实战体验1:设计内容区背景
实战体验2:设计按钮效果
5.9 定义背景图像大小—background-size属性
实战体验:设计自适应模块大小的背景图像
5.10 溢出内容处理—overflow-x和overflow-y属性
5.11 定义盒模型解析模式—box-sizing属性
5.12 自由缩放—resize属性
实战体验:设计能随意调整大小的壁画
5.13 定义外轮廓线—outline属性
实战体验:设计醒目激活和焦点提示框
5.14 定义外轮廓线宽度—outline-width属性
5.15 定义外轮廓线样式—outline-style属性
5.16 定义外轮廓线颜色—outline-color属性
5.17 定义外轮廓线位移—outline-offset属性
实战体验:放大激活和焦点提示框
5.18 定义导航序列号—nav-index属性
实战体验:调整表单输入框的键盘激活顺序
5.19 定义方向键控制顺序
实战体验:正确定义键盘控制键顺序
5.20 为元素添加内容—content属性
第6章 CSS 3多列布局
6.1 定义多列布局—columns属性
实战体验:设计文章多栏显示
6.2 定义列宽度—column-width属性
实战体验:设计固定宽度的栏目版面
6.3 定义列数—column-count属性
实战体验:设计固定列数的版面
6.4 定义列间距—column-gap属性
实战体验:设计疏朗的文档版面
6.5 定义列边框样式—column-rule属性
实战体验:为多列布局版面设计边框效果
6.6 定义跨列显示—column-span属性
实战体验:设计文章标题跨列显示
6.7 定义栏目高度—column-fill属性
实战体验:设计不等高的多列布局效果
6.8 分列打印
6.9 结合案例实战—设计精美的多列网页版式
第7章 CSS 3渐变设计
7.1 Webkit引擎的CSS渐变实现方法
7.1.1 基本语法
7.1.2 直线渐变的基本用法
7.1.3 径向渐变的基本用法
7.1.4 渐变的其他应用
7.2 Gecko引擎的CSS渐变实现方法
7.2.1 直线渐变基本语法
7.2.2 直线渐变的基本用法
7.2.3 径向渐变基本语法
7.2.4 径向渐变的基本用法
7.2.5 渐变的应用
7.3 IE浏览器引擎的CSS渐变实现方法
7.3.1 基本语法
7.3.2 IE渐变滤镜实战应用
7.4 W3C标准化的CSS渐变实现方法
7.5 CSS 3渐变实战
7.5.1 CSS渐变下拉菜单
7.5.2 CSS渐变按钮
第8章 CSS 3动画设计
8.1 CSS变形(Transformation)
8.1.1 变形基础—transform属性
实战体验:设计一个简单的鼠标动画
8.1.2 旋转动画—rotate()函数
8.1.3 缩放动画—scale()函数
8.1.4 移动动画—translate()函数
8.1.5 倾斜动画—skew()函数
8.1.6 矩阵变形动画—matrix()函数
8.1.7 CSS 3实战体验:设计图片墙
8.2 CSS变形原点—transform-origin属性
CSS 3实战体验:定义图片旋转的原点
8.3 CSS过渡—transition属性
8.3.1 设置过渡的CSS属性—transition-property属性
8.3.2 设置过渡的时间—transition-duration属性
8.3.3 设置过渡延迟时间—transition-delay属性
8.3.4 设置过渡效果—transition-timing-function属性
CSS 3实战体验:设计OS X Dock(OS系统的导航码头)
8.4 CSS动画—animation属性
8.4.1 设置CSS动画名称—animation-name属性
8.4.2 设置CSS动画时间—animation-duration属性
8.4.3 设置CSS动画播放方式—animation-timing-function属性
8.4.4 设置CSS动画开始播放的时间—animation-delay属性
8.4.5 设置CSS动画播放次数—animation-iteration-count属性
8.4.6 设置CSS动画播放方向—animation-direction属性
CSS 3实战体验:设计自动翻转的图片效果
8.5 CSS 3动画综合实战
8.5.1 设计动态立体盒子
8.5.2 设计CSS 3手风琴式折叠面板
8.5.3 设计能够旋转背景的易拉罐
8.5.4 设计旋转出仓的光盘动画效果
第9章 CSS 3新增的其他功能
9.1 引用外部字体类型—@font-face规则
9.1.1 @font-face规则的用法
实战体验:设计艺术字体
9.1.2 关于开放字体格式
9.2 定义CSS设备类型—Media Queries
9.2.1 @media规则的用法
实战体验:为不同设备设计不同的盒子框样式
9.2.2 使用Media Queries链接外部CSS文件
9.2.3 测试Media Queries
9.3 定义投影—CSS Reflections
CSS实战体验:应用CSS Reflections
9.4 定义语音样式—CSS 3 Speech
实战体验:体验CSS 3 Speech应用
章节摘录
版权页:插图:CSS 3真可谓十年磨一剑,从10年前开始孕育,到今天逐渐引人瞩目,前端工作者们的确等待了太长的时间。随着用户要求的不断提高、各种新型网络应用的不断出现,以及Web技术自身的高速发展,CSS 2在Web开发中显得越来越力不从心,人们对下一代CSS技术和标准-CSS 3的需求越来越迫切。坦率地讲,CSS 3的部分特性在几年前就已经公布,但是由于各种主流浏览器的“不作为”,特别是IE浏览器的“消极态度”,让很多前端工作者遗忘了CSS 3的存在。目前,CSS 3还在不断完善中,很多功能还处于草稿阶段,但是它展现出来的超强特性和功能已经让人兴奋不已。最近一两年,各种主流浏览器逐渐开始高调支持CSS 3的部分或者全部的功能特性,使得CSS 3又重新进入了广大前端工作者的视野。特别是IE 9对CSS 3的全面支持,更是将网页设计师带入了全新的天地。社区里各种关于CSS 3的讨论、资料和炫酷的应用开始爆炸式增长,广大前端工作者也开始蜂拥而至。对于紧追前沿技术的前端工作者来说,充分了解当前和未来的Web标准和技术是十分必要的,学习和掌握CSS 3更是大势所趋。为了帮助大家在适应趋势和引领趋势的过程中能走得更顺利,受华章公司的盛情邀请,我特意编写了这本CSS 3实战教程,希望能起到抛砖引玉之效,为普及CSS 3尽绵薄之力。《CSS 3实战》面向的读者首先,《CSS 3实战》非常适合具有丰富开发和设计经验的前端工作者,因为这部分读者应该已经对CSS 2了然于胸,通过《CSS 3实战》,他们将能非常迅速而又有针对性地掌握CSS 3技术。其次,《CSS 3实战》也适合尚处于初级阶段的前端工作者,因为书中不仅系统而全面地介绍了CSS 3的各种功能和特性,而且还有大量实战案例和最佳实践,可供他们一边学习理论,一边进行实战演练。
媒体关注与评论
虽然CSS 3的标准制定工作早在10年前就开始了,但直到近一两年才逐渐开始得到各主流浏览器的支持。与CSS 2.x相比,CSS 3在各方面都有非常大的改进,不仅功能更强大,而且也更便于Web前端工作者使用。如果你是一位前端工作者,或将来打算进入前端领域,建议你从现在就开始学习CSS 3。本书不仅全面而系统地讲解了CSS 3的所有新功能和新特性,而且还精心设计了数十个经典的案例,实战性极强。本书将是当下深入而系统学习CSS 3的最佳选择! ——CSS 3研究小组HTML 5和CSS 3是Web开发领域当下最热门的话题之一,二者必定会掀起一场革命,未来的Web世界将由它们来主宰。本书可谓极具前瞻性,而且出版时机也恰到好处,应该能为CSS 3在国内的发展和普及做出一定的贡献。它不仅在与CSS 2.x进行对此的基础上全面讲解了CSS 3的方方面面,而且还包含大量的实战案例和最佳实践。此外,本书全彩印刷,装帧和版式设计都非常精美,不仅有学习价值,而且还有收藏价值。强烈推荐。 ——CSS开发者社区随着各种新型Web应用的出现,以及用户对用户体验的要求的不断提高,各大主流浏览器都开始将CSS 3作为一种事实标准的解决方案,相应地,CSS 3自然而然也将成为Web前端工作者的必修课之一。如果你是一位有远见的前端工作者,那就从现在开始学习和实践CSS 3吧,相信这本书会给你惊喜。——HTML51(www.html51.com)
编辑推荐
《CSS 3实战》是国内首本CSS 3专著,全面而深入讲解CSS 3的最新特性和布局之道。实战性强,全书囊括近百个精心设计的实战案例,理论与实践完美结合。资深Web前端工程师多年实践经验的结晶,3大社区联袂推荐。对于前端设计师来说,虽然CSS3不是全新的技术,但它却重启了一扇奇思妙想的窗口。CSS3全新的功能和特性在赋予了Web设计美好的愿景和无限可能性的同时,也极大地提高了Web设计的效率。例如,设计师们从此不再需要使用蹩脚的JavaScript脚本,或者“偷梁换柱”地使用图片或标签去实现圆角、多背景、自定义字体、3D动画、渐变、阴影、透明度等页面效果。技术本身并没有生命,但是它所折射的光芒却让人看到创新的希望。在选择器上,CSS3支持更复杂的属性选择器和更高级的组合选择器,这些丰富的功能让设计师们可以灵活地控制网页样式,不用担心因为选择了某些元素而破坏文档结构,如随意增加类和lD值等。在样式设计上,CSS3支持圆角效果、阴影效果、透明效果、渐变效果、变换效果、过渡效果、动态效果、动画效果、倒影效果、文本特效、边框特效、真彩色、透明色、渐变色、背景色。等等。在CSS3之前,所有这些效果可能需要设计师们花费大量的时间使用背景图像或者。JavaScript脚本来实现。作为一个Web前端工作者,积极地关注和学习最新的Web标准是很重要的。互联网的发展总是在不断地催生新技术的出现,CSS3技术的应用和普及才刚刚起步,一些新的功能和特性还在不断的尝试和实践中。也许你正被各种关于CSS3的唇枪舌战所困扰,还在为CSS3的兼容性问题而担忧,新技术的普及总会有一个过程,最早的CSS1如此,后来的CSS2也是如此,如今的CSS3同样如此。立足现实。着眼未来,从现在就开始学习并付诸实践。最后微笑的必定是你。
图书封面
图书标签Tags
无
评论、评分、阅读与下载