第18章　css 3概述

18.1　概要介绍

18.1.1　CSS 3是什么

18.1.2　CSS 3的历史

18.2　使用CSS 3能做什么

18.2.1　模块与模块化结构

18.2.2　一个简单的CSS 3示例

第19章　选择器

19.1　选择器概述

19.2　属性选择器

19.2.1　属性选择器概述

19.2.2　CSS 3中的属性选择器

19.2.3　灵活运用属性选择器

19.3　结构性伪类选择器

19.3.1　CSS中的伪类选择器及伪元素

19.3.2　选择器root、not、empty和target

19.3.3　选择器f irst-child、last-child、nth-child和nth-last-child

19.3.4　选择器nth-of-type和nth-last-of-type

19.3.5　循环使用样式

19.3.6　only-child选择器

19.4　UI元素状态伪类选择器

19.4.1　伪类选择器E:hover、E:active和E:focus

19.4.2　伪类选择器E:enabled与E:disabled

19.4.3　伪类选择器E:read-only与E:read-write

19.4.4　伪类选择器E:checked、E:default和E:indeterminate

19.4.5　伪类选择器E::selection

19.4.6　伪类选择器E:invalid与E:valid

19.4.7　伪类选择器E:required与E:optional

19.4.8　伪类选择器E:in-range与E:out-of-range

19.5　通用兄弟元素选择器

第20章　使用选择器在页面中插入内容

20.1　使用选择器来插入文字

20.1.1　使用选择器来插入内容

20.1.2　指定个别元素不进行插入

20.2　插入图像文件

20.2.1　在标题前插入图像文件

20.2.2　插入图像文件的好处

20.2.3　将alt属性的值作为图像的标题来显示

20.3　使用content属性来插入项目编号

20.3.1　在多个标题前加上连续编号

20.3.2　在项目编号中追加文字

20.3.3　指定编号的样式

20.3.4　指定编号的种类

20.3.5　编号嵌套

20.3.6　中编号中嵌入大编号

20.3.7　在字符串两边添加嵌套文字符号

第21章　文字与字体相关样式

21.1　给文字添加阴影——text-shadow属性

21.1.1　text-shadow属性的使用方法

21.1.2　位移距离

21.1.3　阴影的模糊半径

21.1.4　阴影的颜色

21.1.5　指定多个阴影

21.2　让文本自动换行——word-break属性

21.2.1　依靠浏览器让文本自动换行

21.2.2　指定自动换行的处理方法

21.3　让长单词与URL地址自动换行——word-wrap属性

21.4　使用服务器端字体——web Font与@font-face属性

21.4.1　在网页上显示服务器端字体

21.4.2　定义斜体或粗体字体

21.4.3　显示客户端本地的字体

21.4.4　属性值的指定

21.5　修改字体种类而保持字体尺寸不变——font-size-adjust属性

21.5.1　字体不同导致文字大小的不同

21.5.2　font-size-adjust属性的使用方法

21.5.3　浏览器对于aspect值的计算方法

21.5.4　font-size-adjust属性的使用示例

21.6　使用rem单位定义字体大小

第22章　盒相关样式

22.1　盒的类型

22.1.1　盒的基本类型

22.1.2　inline-block类型

22.1.3　inline-table类型

22.1.4　list-item类型

22.1.5　run-in类型与compact类型

22.1.6　表格相关类型

22.1.7　none类型

22.1.8　各种浏览器对于各种盒类型的支持情况

22.2　对于盒中容纳不下的内容的显示

22.2.1　overf low属性

22.2.2　overf low-x属性与overf low-y属性

22.2.3　text-overf low属性

22.3　对盒使用阴影

22.3.1　box-shadow属性的使用方法

22.3.2　将参数设定为0

22.3.3　创建盒内阴影

22.3.4　对盒内子元素使用阴影

22.3.5　对第一个文字或第一行使用阴影

22.3.6　对表格及单元格使用阴影

22.4　指定针对元素的宽度与高度的计算方法

22.4.1　box-sizing属性

22.4.2　为什么要使用box-sizing属性

第23章　背景与边框相关样式

23.1　与背景相关的新增属性

23.1.1　指定背景的显示范围——background-clip属性

23.1.2　指定背景图像的绘制起点——background-origin属性

23.1.3　指定背景图像的尺寸——background-size属性

23.1.4　新增的用于平铺背景图像的选项——space与round

23.2　在一个元素中显示多个背景图像

23.3　使用渐变色背景

23.3.1　绘制线性渐变

23.3.2　绘制放射性渐变

23.4　圆角边框的绘制

23.4.1　border-radius属性

23.4.2　在border-radius属性中指定两个半径

23.4.3　不显示边框的时候

23.4.4　修改边框种类的时候

23.4.5　绘制四个角不同半径的圆角边框

23.5　使用图像边框

23.5.1　border-image属性

23.5.2　border-image属性的最简单的使用方法

23.5.3　使用border-image属性来指定边框宽度

23.5.4　指定4条边中图像的显示方法

23.5.5　使用背景图像

第24章　CSS 3中的变形处理

24.1　transform功能的基础知识

24.1.1　如何使用transform功能

24.1.2　transform功能的分类

24.2　对一个元素使用多种变形

24.2.1　对一个元素使用多种变形的方法

24.2.2　指定变形的基准点

24.3　使用3D变形功能

24.3.1　3D变形功能概述

24.3.2　实现3D变形功能

24.4　变形矩阵

24.4.1　矩阵概述

24.4.2　变形与坐标系统

24.4.3　计算2D变形

24.4.4　计算3D变形

24.4.5　通过矩阵执行多重变形处理

第25章　CSS 3中的动画功能

25.1　Transitions功能

25.1.1　Transitions功能的使用方法

25.1.2　使用Transitions功能同时平滑过渡多个属性值

25.2　Animations功能

25.2.1　Animations功能的使用方法

25.2.2　实现多个属性值同时改变的动画

25.2.3　实现动画的方法

25.2.4　实现网页的淡入效果

第26章　布局相关样式

26.1　多栏布局

26.1.1　使用f loat属性或position属性的缺点

26.1.2　使用多栏布局方式

26.2　盒布局

26.2.1　使用f loat属性或position属性时的缺点

26.2.2　使用盒布局

26.2.3　盒布局与多栏布局的区别

26.3　弹性盒布局

26.3.1　对多个元素使用f lex属性

26.3.2　改变元素的显示顺序

26.3.3　改变元素的排列方向

26.3.4　元素宽度与高度的自适应

26.3.5　使用弹性盒布局来消除空白

26.3.6　对多个元素使用f lex属性

26.3.7　控制换行方式

26.3.8　指定水平方向与垂直方向的对齐方式

26.4　calc方法

26.4.1　calc方法概述

26.4.2　calc方法使用示例

第27章　Media Queries相关样式

27.1　根据浏览器的窗口大小来选择使用不同的样式

27.2　在iPhone中的显示

27.3　Media Queries的使用方法

第28章　CSS 3的其他重要样式和属性

28.1　颜色相关样式

28.1.1　利用alpha通道来设定颜色

28.1.2　alpha通道与opacity属性的区别

28.1.3　指定颜色值为transparent

28.2　用户界面相关样式

28.2.1　轮廓相关样式

28.2.2　resize属性

28.3　使用initial属性值取消对元素的样式指定

28.3.1　取消对元素的样式指定

28.3.2　使用initial属性值并不等于取消样式设定的特例

28.4　实现CSS 3中的滤镜特效

28.4.1　滤镜特效概述

28.4.2　实现滤镜特效

第29章　综合实例

29.1　实例1：使用html 5中新增结构元素来构建网页

29.1.1　组织网页结构

29.1.2　构建网页标题

29.1.3　构建侧边栏

29.1.4　构建主体内容

29.1.5　构建版权信息

29.2　实例2：使用HTML 5+CSS 3来构建Web应用程序

29.2.1　HTML 5页面代码分析

29.2.2　CSS 3样式代码分析

29.2.3　javaScript脚本代码分析

附录A　截至2015年5月五大浏览器最新版对HTML 5的支持情况

　　2014年10月28日，W3C的HTML工作组正式发布了HTML5的正式推荐标准（W3CRecommendation），这一消息是W3C在美国圣克拉拉举行的W3C技术大会及顾问委员会会议（TPAC2014）上宣布的。HTML5在这一版本中增加了支持Web应用开发者的许多新特性，以及更符合开发者使用习惯的新元素，并重点关注定义清晰的、一致的准则，以确保Web应用和内容在不同用户代理（浏览器）中的互操作性。HTML5是构建开放Web平台的核心。

　　2015年4月9日，W3C的CSS工作组发布CSS基本用户接口模块（CSSBasicUserInterfaceModuleLevel3，CSS3UI）的标准工作草案。该文档描述了CSS3中对HTML、XML（包括XHTML）进行样式处理所需的与用户界面相关的CSS选择器（selectors）、属性及属性值。它包含并扩展了在CSSLevel2及Selector规范中定义的与用户接口有关的特性。

　　HTML5带来了一组新的用户体验，如Web的音频和视频不再需要插件，通过Canvas更灵活地完成图像绘制，而不必考虑屏幕的分辨率，浏览器对可扩展矢量图（SVG）和数学标记语言（MathML）的本地支持，通过引入新的注释信息以增强对东亚文字呈现（Ruby）的支持，对富Web应用信息无障碍新特性的支持，等等。

　　前端技术将进入一个崭新的时代，至少已经开启了这扇门。

　　在这种局势下，学习HTML5无疑成为Web开发者的一大重要任务，谁先学会HTML5，谁就掌握了开启未来Web平台的一把钥匙。因此，笔者希望借助此书帮助国内的Web开发者更好地学习HTML5以及与之相伴的CSS3技术，早日运用这些技术开发出一个具有现代水平的、在未来的Web平台上正常运行的Web网站或Web应用程序。

　　第3版与第2版的区别

　　自2013年上半年本书第2版出版以来，一直受到广大读者的欢迎，笔者在这里首先感谢广大读者的支持。自本书第2版出版之后，HTML5与CSS3标准处于不断发展中，各主流浏览器也以最快的速度对HTML5中各种最新公布的API提供了支持，其中包括各种新增元素、WebRTC通信API、鼠标指针锁定API、JavaScriptPromise等。因此，本书以第2版的内容为基础，添加对2013上半年到2015年5月之间HTML5中新增的各种元素及API的介绍，同时更新各主流浏览器对CSS3的最新支持情况，以使读者能够学到2015年5月为止关于HTML5与CSS3标准的各种知识，了解各种最新浏览器对HTML5与CSS3标准的支持情况，能够早日通过这些新知识打造一个HTML5时代功能强大的Web网站或Web应用程序。

　　具体来说，本书在第2版的基础上做出了如下主要修改：

　　第2章中新增部分HTML5属性。

　　第3章中新增对main元素的介绍，移除第2版中对hgroup元素（HTML5标准中已废除该元素）的介绍。

　　第4章中新增对dialog元素的介绍。

　　第5章（第2版中第6章）中新增“使用Path2D对象绘制路径”和“图形、图像的组合与混合”的内容。

　　第6章（第2版中的第15章）中新增“对音频或视频添加字幕”内容。

　　第10章中新增“在IndexedDB数据库中保存Blob对象”内容。

　　新增第12章对WebRTC通信的介绍。

　　第17章（第2版中的第16章）中新增“鼠标指针锁定API”、“requestAnimationFrame”、“MutationObserver”、“JavaScriptPromise”、“BeaconAPI”内容。

　　第21章中新增“使用rem单位定义字体大小”内容。

　　第22章中新增“创建盒内阴影”内容。

　　第23章中新增“新增的用于平铺背景图像的选项—space与round”和“使用渐变色背景”内容。

　　第24章中新增“使用3D变形功能”及“变形矩阵”内容。

　　第26章中根据CSS3最新标准的内容重新编写“弹性盒布局”并新增“calc方法”内容。

　　第28章中新增“实现CSS3中的滤镜特效”内容。

　　本书面向的读者

　　本书主要适合如下人群阅读：

　　具有一定基础的Web前端开发工程师。

　　具有一定美术功底的Web前端设计师和UI设计师。

　　Web项目的项目管理人员。

　　开设Web开发等相关专业的高等院校的师生和相关培训机构的学员及教师。

　　如何阅读本书

　　本书共分为上下两册。

　　上册对HTML5中新增的语法、标记方法、元素、API，以及这些元素与API到目前为止受到了哪些浏览器支持等进行详细介绍。在对它们进行介绍的同时将其与

　　HTML4中的各种元素与功能进行对比，以帮助读者更好地理解为什么需要使用HTML5、使用HTML5有什么好处、HTML5中究竟增加了哪些目前HTML4不具备而在第三代Web平台上将会起到重要作用的功能与API，以及这些功能与API的详细使用方法。

　　下册详细介绍了CSS3中各种新增样式与属性，其中主要包括CSS3中的各种选择器、文字与字体、背景与边框、各种盒模型、CSS3中的布局方式、CSS3中的变形与动画、CSS3中与媒体类型相关的一些样式与属性等。同时详细讲述了这些样式与属性到目前为止受到了哪些浏览器支持，以及针对不同浏览器应该怎样在样式代码中正确使用各种属性。最后详细讲解了两个实例，第一个实例展示了如何在一个用HTML5语言编写而成的页面中综合运用HTML5中新增的各种结构元素，如何对这些结构元素综合使用CSS3样式；第二个实例展示了如何使用HTML5中新增的表单元素以及操作本地数据库的功能来实现一个具有现代风格的Web应用程序，如何在这个由HTML5语言编写而成的Web应用程序中综合使用CSS3样式来完成页面的布局以及视觉效果的美化工作。

　　全书一共包含389个代码示例，每个代码示例都经过笔者上机实践，确保运行结果正确无误。每个代码示例的详细代码及其用到的脚本文件、各种资源文件都可在华章公司的官方网站（www.hzbook.com）的本书页面上下载，因为是用HTML5编写而成的网页，所以可直接在各种浏览器中打开并查看运行结果（少量页面需要先建立网站，然后通过访问网站中该页面的方式进行查看；少量页面使用服务器端PHP脚本语言，可在Apache服务器中运行；少量页面使用服务器端Node.js脚本语言，可以通过安装运行Node.js来运行服务器并查看示例页面）。同时，对于HTML5中的各种元素和各种API，以及CSS3中的各种属性与样式受到了哪些浏览器的支持在书中都进行了详细介绍，读者可以针对不同的页面选择正确的浏览器来查看其正确的运行结果。

　　致谢

　　在本书的写作过程中，机械工业出版社华章公司的编辑杨福川先生和姜影女士给予了很大的帮助和支持，并提出了很多中肯的建议，在此表示感谢。同时，还要感谢机械工业出版社的所有编审人员为本书的出版所付出的辛勤劳动。本书的成功出版是大家共同努力的结果，谢谢他们。

　　另外，在本书的写作过程当中，由于时间及个人水平上的原因，有可能存在一些对HTML5及CSS3认识不全面或疏漏的地方，敬请读者批评指正，作者的联系QQ为240824399，联系邮箱为240824399@qq.com，谨以最真诚的心希望能与读者共同交流、共同成长。