HTML5与CSS3权威指南

浏览数：29 / 时间：2015年06月09日

第一章：Web时代的变迁

HTML5放心使用的理由：

兼容性：HTML5在老板本的浏览器上也可以正常运行；

实用性：HTML5内部并没有封装什么很复杂的，不切实际的功能，而只是封装了简单实用的功能；

非革命性的发展：HTML5的内部功能不是革命性的，只是发展性的。

第二章：HTML5与HTML4的区别

1.DOCTYPE声明：

<！DOCTYPE html>

2.指定字符i编码：

3.不允许写结束标记的元素有：area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr.

可以省略结束标记的元素有：li, dt, dd, p, rt, rp, optgroup, potion, colgroup, thead, tbody, tfoot, tr, td, th.

可以省略全部标记的元素有：html, head, body, colgroup, tbody.

4.对于具有boolean值的属性，例如disabled与readonly等，当只写属性而不指定属性值时，表示属性值为true，如果想要将属性值设为false，可以不使用该属性。另外，要想将属性值设定为true时，也可以将属性名设定为属性值，或将空字符串设定为属性值。

5.指定属性值的时候，属性值两边既可以用双引号，也可以用单引号。HTML5在此基础上做了一些改进，当属性值不包括空字符串，“<”, “>”, “=”, 单引号，双引号等字符时，属性值两边的引号可以省略。

6.canvas元素表示图形，比如图表和其他图像。这个元素本身没有行为，仅提供一块画布，但它把一个绘图API展现给客户端JavaScript，以使脚本能够把想绘制的东西绘制到这块画布上。

7.contentEditable属性的主要功能是允许用户编辑元素中的内容，所以该元素必须是可以获得鼠标焦点的元素，而且在点击鼠标后要向用户提供一个插入符号，提示用户该元素中的内容允许编辑。contentEditable属性是一个布尔值属性，可以被指定为true或false。

8.designMode属性用来指定整个页面是否可编辑，当页面可编辑时，页面中任何支持上文所述的contentEditable属性的元素都变成了可编辑状态。designMode属性只能在JavaScript脚本里被编辑修改。该属性有两个值——“on”与“off”。属性指定为“on”时，页面可编辑；否则不可编辑。如：document.designMode = "on"

第三章：HTML5的结构

1.在HTML5中，article元素可以看成是一种特殊种类的section元素，它比section元素更强调独立性。即section元素强调分段或分块，而article强调独立性。具体来说，如果一块内容相对来说比较独立，完整的时候，应该使用article元素，但是如果你想要将一块内容分成几段的时候，应该使用section元素。

2.section元素的使用禁忌：

不要将section元素用作设置样式的页面容器，那是div元素的工作；

如果article元素，aside元素或nav元素更符合使用条件，不要使用section元素；

不要为没有标题的内容区块使用section元素。

3.header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他内容，例如数据表格，搜索表单或相关的logo图片。一个网页并未限制header元素的个数，可以拥有多个，可以为每个内容区块加一个header元素。

4.hgroup元素是将标题及其子标题进行分组的元素。

第四章：表单与文件

1.placeholder属性是指文本框处于未输入状态并且未获取光标焦点时，模糊显示输入提示文字。

2.url类型的input元素是一种专门用来输入url地址的文本框。

3.email类型的input元素是一种专门用来输入email地址的文本框。提交时如果该文本框中的内容不是email地址格式的文字则不允许提交，但是它并不检查该email地址是否存在。提交时该文本框可以为空，除非加上了required属性。

4.date类型的input元素的使用方法：<input name = "date1" type = "date" value = "2013- 11-2 ">

5.time类型的input元素是一种专门用来输入时间的文本框，并且在提交时会对输入时间的有效性进行检查。

6.datetime类型的input元素是一种专门用来输入UTC日期的文本框，并且在提交时会对输入的日期和时间进行有效性检查。

7.datetime-local类型的input元素是一种专门用来输入本地日期和时间的文本框，并且在提交时会对输入的日期和时间进行有效性检查。

8.number类型的input元素是一种专门用来输入数字的文本框，并且在提交时会检查其中的内容是否为数字。它有min, max, step属性。

< input name = "number1" type = "number" value = "25" min = "10" max = "100" step = "5">

9.range类型的input元素是一种只允许输入一段范围内数值的文本框，它有min, max, step属性。

< input name = "range1" type = "range" value = "25" min = "0" max = "100" step = "5">

10.search类型的input元素是一种专门用来输入搜索关键词的文本框。

11.tel类型的input元素被设计为用来输入电话号码的专用文本框。它没有特殊的校验规则，不强制输入数字，譬如：86-0519-8888888.但是开发者可以通过pattern属性来指定对于输入的电话号码格式的验证。

12.required属性可以应用在大多数输入元素上（除了隐藏元素，图片元素按钮上）。在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字，提示用户这个元素中必须输入内容。

13.对input元素使用pattern属性，并且将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式。

14.在HTML5中，可以使用JavaScript调用各input元素的setCustomValidity方法来自定义错误信息。

15.mark元素表示页面中需要突出显示或高亮显示的，对于当前用户具有参考作用的一段文字。

16.在HTML4中，你可能已经习惯于用em元素或strong元素来突出显示文字，但请记住mark元素的的作用与这两个元素的作用是有区别的，不能混合使用。mark元素的标示目的与原文作者无关，或者说它不是原文作者用来标示文字的，而是在后来引用时添加上去的，它的目的是吸引当前用户的注意力，提供给用户作参考，希望能够对用户有帮助。而strong是原文作者用来强调一段文字的重要性的，譬如：警告信息，错误信息等等，em元素是作者为了突出文章重点而使用的。

17.在HTML5中，将ol列表进行了改良，为它添加了start与reversed属性。

18.在HTML5中，重新定义后的dl列表包含多个带名字的列表项。每一项包含一条或多条带名字的dt元素，用来表示术语，dt元素后面紧跟一个或多个dd元素，用来表示定义。在一个元素内，不允许有相同名字的dt元素，不允许有重复的术语。

第五章：绘制图形

1.canvas元素只是一块无色透明的区域。需要利用JavaScript编写在其中进行绘画的脚本。

2.进行图形绘制时，需要用到图形上下文，图形上下文是一个封装了很多绘图功能的对象。需要使用canvas对象的getContext方法来获得图形上下文。在draw函数中，将参数设为“2d”。如： var context = canvas.getContext(‘2d‘)；

3.通过getContext来取得图形上下文，通过fillStyle属性与strokeStyle属性来指定颜色，通过fillRect方法与strokeRect方法来绘制图形，就可以绘制出简单的图形了。

4.在创建路径时，需要使用moveTo方法将光标移动到指定的直线起点，然后使用lineTo方法在直线起点与直线终点之间创建路径，然后将光标移动到直线终点。

5.使用Canvas元素可以给图形添加阴影效果。

shadowOffsetX——阴影的横向位移量；

shadowOffsetY——阴影的纵向位移量；

shadowColor——阴影的颜色；

shadowBlur——阴影的模糊范围。

6.事实上，即使设定好Image对象的src属性后，也不一定立刻就能把图像绘制完毕，譬如有时该图像文件是一个来源于网络的比较大的图像文件，这时用户就得耐心等待图像全部装载完毕才能看见该图像了。这时，可以使用如下方法：image.onload = fuction() {绘制图像的函数}

7.图形的平铺：context.createPattern（image, type）；type参数的值必须是以下的字符串之一：

no-repeat：不平铺；

repeat-x：横方向平铺；

repeat-y：纵方向平铺；

repeat：全方向平铺。

8.图形上下文对象的measureText方法来得到文字的宽度，如：metrics = context.measureText(text).

9.Canvas API使用toDataURL方法把绘画状态输出到一个data URL中，然后重新装载，客户可直接把装载后的文件进行保存。如：canvas.toDataURL(type);

10.setInterval方法设置动画的间隔时间。setInterval方法为HTML中固有方法，该方法接受两个参数，第一个参数表示执行动画的函数，第二个参数为时间间隔，单位为毫秒。

第六章：多媒体播放

1.在HTML5中，新增了两个元素——video元素与audio元素，其中video元素专门用来播放网络上的视频或电影，而audio元素专门用来播放网络上的音频数据。

您的浏览器不支持audio元素

</audio>

您的浏览器不支持video元素

</video>

其中“您的浏览器不支持audio元素”为在不支持audio元素的浏览器中所显示的代替的文字。

src:该属性指定媒体数据的URL地址；

autoplay:该属性中指定媒体是否在页面加载后自动播放；

preload:该属性中指定视频或音频数据是否预加载。如果使用预加载的话，浏览器会预先将视频或音频数据进行缓冲，这样可以加快播放的速度，因为播放时数据已经预先缓冲完毕。

poster(video元素独有属性):当视频不可用时，可以使用该属性向用户展示一幅代替用的图片；

loop:该属性中指定是否循环播放视频或音频；

controls:该属性中指定是否为视频或音频添加浏览器自带的播放用的控制条。如：<video src = "sample.mov" controls> </video>

2.对于事件的捕捉及其处理，可以按两种方式来进行。

第一种是监听的方式。使用video元素或audio元素的addEventListener方法来对事件的发生进行监听，如：videoElement.addEventListener(type, listener, useCapture)；

第二种事件处理方式为JavaScript脚本中常见的获取事件句柄的方式，如：<video id = "video1" src = "sample.mov" onplay = "begin_playing();"> </video>

function begin_playing()

{

......

};

第七章：本地存储

1.cookies储存永久数据存在以下问题：

大小：cookies的大小被限制在4KB；

带宽：cookies是随HTTP事务一起被发送的，因此会浪费一部分发送cookies时使用的带宽；

复杂性：要正确地操纵cookies是很困难的。

2.sessionStorage为临时保存，而localStorage为永久保存。

第八章：离线应用程序

1.Web应用程序的本地缓存是通过每个页面的manifest文件来管理的。

2.在manifest文件中，第一行必须是“CACHE MANIFEST”文字，以把本文件的作用告知给浏览器，即对本地缓存中的资源文件进行具体设置。

3.在manifest文件中，可以加上注释来进行一些必须的说明或解释，注释行以“#”文字开头。

4.在指定资源文件的时候，可以把资源文件分为三类，分别是CACHE, NETWORK, FALLBACK.

在CACHE类别中指定需要被缓存在本地的资源文件；

NETWORK类别为显示指定不进行本地缓存的资源文件，这些资源文件只有当客户端与服务器端建立连接的时候才能访问；

FALLBACK类别中的每行中指定两个资源文件，每一个资源文件为能够在线访问时使用的资源文件，第二个资源文件为不能在线访问时使用的备用资源文件。

每个类别都是可选的。但是如果文件开头没有指定类别而直接书写资源文件的时候，浏览器把这些资源文件视为CACHE类别，直到看到文件中第一个被书写出来的类别为止。

5.为了让浏览器能够正常阅读，需要在Web应用程序页面上的html标签的manifest属性中指定manifest文件的URL地址。如：<html manifest = "global.manifest">...</html>

第九章：通信API

1.发送源与网站的URL地址不是同一概念，发送源只包括域名与端口号。

第十章：使用Web Workers处理线程

1.通过Web Workers，你将可以创建一个不会影响前台处理的后台线程，并且在这个后台线程中创建多个子线程。

2.创建后台线程的步骤十分简单。只要在Worker类的构造器中，将需要在后台线程中执行的脚本文件的URL地址作为参数，然后创建Worker对象就可以了。

如： var worker = new Worker( "worker.js" )；

但是，要注意在后台线程中是不能访问页面或窗口对象的。如果在后台线程的脚本文件中使用到window对象或document对象，则会引起错误的发生。

3.使用后台线程时不能访问页面或窗口对象，但是并不代表后台线程不能与页面之间进行数据交互。

4.实现子线程与子线程之间的数据交互，要以下步骤：

先创建发送数据的子线程；

执行子线程中的任务，然后把要传递的数据发送给主线程；

在主线程接受到子线程传回来的消息时，创建接收数据的子线程，然后把发送数据的子线程中返回的消息传递给接收数据的子线程；

执行接收数据子线程中的代码。

第十一章：获取地理位置的信息

第十二章：CSS 3概述

1.当div区域中的文字高度处于不断变化的状态时，使用CSS 2样式表添加边框图像的操作相对来说就比较麻烦。在CSS 3中考虑到了这种情况，添加了允许边框图像自动拉伸的属性，从而解决了这个问题。

第十三章：选择器

1.在CSS 3中，提倡使用选择器来将样式与元素直接绑定起来，这样的话，在样式表中什么样式与什么元素相匹配变得一目了然，修改起来也很方便。不仅如此，通过选择器，我们还可以实现各种复杂的指定，同时也能大量减少样式表的代码书写量，最终书写出来的样式表也会变得简洁明了。

2.我们还可以在指定样式的时候使用“^”通配符（开头字符匹配），“？”通配符（结尾字符匹配）与“*”通配符（包含字符匹配）。譬如：指定id末尾字母为“t”的div元素的背景色为蓝色：div[ id$ = "t" ] { background: red；}

3.[ att* = val ]属性选择器的含义是：如果元素用att表示的属性之属性值中包含用val指定的字符的话，则该元素使用这个样式。

[ att^ = val]属性选择器的含义是：如果元素使用att表示的属性之属性值的开头字符为用val指定的字符的话，则该元素使用这个样式。

[ att$ = val]属性选择器的含义是：如果元素用att表示的属性之属性值的结尾字符为用val指定的字符的话，则该元素使用这个样式。另外请注意该属性选择器中必须在指定匹配字符前加上“\”这个转义字符。[id$ =\-1] { background-color: yellow; }

4.在CSS中，还有一种伪类选择器，这种伪类选择器与类选择器的区别是，类选择器可以随便起名，譬如上面的“p.class”与"p.center",你也可以命名为“p.class1”与“p.class2”，然后在页面上使用“class = ‘class1‘”与“class = ‘class2‘”,但是伪类选择器是CSS中以定义好的选择器，不能随便起名。

5.所谓伪元素选择器，是指并不是针对真正的元素使用的选择器，而是针对CSS中已定义还的伪元素使用的选择器，如：选择器：伪元素｛属性：值｝

伪元素选择器也可以与类配合使用，如：选择器类名：伪元素｛属性：值｝

6.first-line伪元素选择器用于为某个元素中的第一行文字使用样式。

7.first-letter伪元素选择器用于为某个元素中的文字的首字母（欧美文字）或第一个字（中文或日文等汉字）使用样式。

8.before伪元素选择器用于在某个元素之前插入一些内容。

9.after伪元素选择器用于在某个元素之后插入一些内容，如：<元素>：after { content : url( test.wav )}

10.结构性伪类选择器的共同特征是允许开发者根据文档树中的结构来指定元素的样式。

11.root选择器将样式绑定到页面的根元素中。所谓根元素，是指位于文档树中最顶层结构的元素，在HTML页面中就是指包含着整个页面的“<html>”部分。

12.如果想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式时，可以使用not选择器。

13.使用empty选择器来指定当元素内容为空白时使用的样式。

14.使用target选择器来对页面中的某个target元素（该元素的id被当做页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。

15.采用nth-child选择器，只要在“nth-child(n)”语句处，把参数n改成可循环的an+b的形式就可以。a表示每次循环中共包括几种样式，b表示指定的样式在循环中所片的位置。

16.结合运用nth-child与nth-last-child的话，可以指定当某个父元素中只有一个子元素时才使用的样式。如：<子元素>：nth-child(1):nth-last-child(1) { //指定样式 }

17.在CSS 3的选择器中，处理结构性伪类选择器外，还有一种UI元素状态伪类选择器。这些选择器的共同特征是：指定的样式只有当元素处于某种状态下时才起作用，在默认状态下不起作用。

在CSS 3中，共有11仲UI元素状态伪类选择器：E:hover, E:active, E:focus, E:enabled, E:disabled, E:read-only, E:read-write, E:checked, E:default, E:indeterminate及E:selection.

第十四章：使用选择器在页面中插入内容

1.在content属性中追加了一个none属性值。

2.从CSS 2.1开始，只有当使用before选择器与after选择器的时候，normal属性值的作用才与none属性值相同，都是不让选择器在个别元素的前面或后面插入内容。但是none属性值只能应用在这两个选择器中，而normal属性值还可以应用在其他用来插入内容的选择器中。

3.在content属性中使用counter属性值来针对多个项目追加连续编号，如：<元素>：before { content: counter( 计数器名 )；} 使用计数器来计算编号，计数器可任意命名。另外，还需要在元素的样式中追加对元素的counter-increment属性的指定，为了使用连续编号，需要将counter-increment属性的属性值设定为before选择器或after选择器的counter属性值中所指定的计数器名。如：<元素> { counter-increment : before选择器或after选择器中指定的计数器名 }

4.使用content属性的open-quote属性值与close-quote属性值在字符串两边添加诸如括号，单引号，双引号之类的嵌套文字符号。open-quote属性值用于添加开始的嵌套文字符号，close-quote属性值用于添加结尾的嵌套文字符号。另外，在元素的样式中使用quotes属性来指定使用什么样式嵌套文字符号。如：h1{ quotes: "(" ")" }

第十五章：文字与字体相关样式

1.text-shadow属性给文字添加阴影，如：text-shadow: length length length color

2.CSS 3中，使用word-break属性来让文字自动换行。

3.浏览器本身也自带着让文本自动换行的功能。对于西方文字来说，浏览器会在半角空格或连字符的地方自动换行，而不会在单词的当中突然换行。对于中文来说，可以在任何一个中文字后面进行换行。

4.当中文当中含有标点符号的时候，浏览器总是不可能让标点符号位于一行文字的行首，通常将标点符号以及它前面的一个文字作为一个整体来统一换行。

5.在CSS 3中，可以使用work-break属性来自己决定自动换行的处理方法。

6.在CSS 3中，使用word-wrap属性来实现长单词与URL地址的自动换行。如： div { word-wrap: braek-word; }

7.在CSS 3中，可以使用@font-face属性来利用服务器端文字。如：@font-face {

font-family: WebFont;

src: url( ‘font/Fontin_Sans_R_45b.otf‘ ) format (" opentype ");

font-weight: normal;

}

使用@font-face属性显示客户端本地的字体时，需要将字体文件路径的URL属性值修改为“local()”形式的属性值，并且在“local”后面的括号中写入使用的字体。

8.font-size-adjust属性修改字体种类而保持字体尺寸不变。但是它需要使用每个字体种类自带的一个aspect值，aspect值可以用来在将字体修改为其他字体时保持字体大小基本不变。

第十六章：盒相关样式

1.在CSS中，使用display属性来定义盒了类型。总体上来说，CSS中的盒分为block类型与inline类型。例如：div元素与p元素属于block类型，span元素与a元素属于inline类型。

2.如果样式代码使用display属性，可以将div属性与span元素的类型进行互换，将div元素变成inline类型的元素，将span元素变成block类型的元素。

3.inline-block类型盒属于block类型盒的一种，但是在显示时它具有inline类型盒的特点。

4.width属性与height属性只能使用在block类型的元素上。

5.使用float类型将前两个div元素并列显示。

6.默认情况下，使用inline-block类型时并列显示的元素的垂直对齐方式是底部对齐，为了将垂直对齐方式改为顶部对齐，还需要在div元素的样式中加入vertical-align属性。另外，如果要让两个div元素的当中没有缝隙，还需要去除代码中两个div元素之间的换行符。

7.使用inline-block类型同样可以实现代码的水平菜单。同时可以去除列表项目中的“●”标记。

8.将元素指定为run-in类型或compact类型的时候，如果元素后面还有block类型的元素，run-in类型的元素将被包含在block类型的元素内部，而compact类型的元素将被放置在block类型的元素左边。

9.将元素的类型指定为none类型后，改元素将不会被显示。

10.在CSS 3中，可以使用box-shadow属性让盒在显示时产生阴影效果。

11.可以使用first-letter选择器或first-line选择器来只让第一个文字或第一行具有阴影效果。

12.可以使用box-shadow属性让表格及表格内的单元格产生阴影效果。

13.在CSS 3中，使用box-sizing属性来指定针对元素的宽度与高度的计算方法。

14.可以给box-sizing属性指定的属性值为content-box属性值与border-box属性值。content-box属性值表示元素的宽度与高度不包括内部补白区域，以及边框的宽度与高度，border-box属性值表示元素的宽度与高度包括内部补白区域，以及边框的宽度与高度，在没有使用box-sizing属性的时候，默认使用content-box属性值。

第十七章：与背景和边框相关样式

1.在HTML中，一个具有背景的元素通常由元素的内容，内部补白（padding），边框，外部补白（margin）构成。

2.在使用background-clip来修改背景的显示范围，如果将background-clip的属性值设定为border，则背景范围包括边框区域，如果设定为padding，则不包括边框区域。

如：div {border: dashed 15px green;}

3.background-origin属性指定绘制背景图像的绘制起点，属性值为border, padding, content，分别代表从边框的左上角，内部补白区域的左上角或内容的左上角开始绘制。另外，将三个div元素的background-repeat属性均指定为no-repeat，表示不使用平铺方式。

4.在CSS 3中，可以使用background-size属性来指定背景图像的尺寸。

5.如果要维持图像纵横比例的话，可以在设定图像宽度与高度的同时，将另一个参数设定为“auto”。

6.在CSS 3中，可以使用background-break属性来指定平铺内联元素图像时的循环方式，值为bounding-box, each-box, continuous.属性为bounding-box时，背景图像在整个内联元素中进行平铺。指定为each-box的时候，背景图像在每一行中进行平铺，指定为continuous的时候，下一行中的图像紧跟着上一行中的图像继续平铺。

7.在使用background-image属性来指定图像文件的时候，是按在浏览器中显示时图像叠放的顺序从上往下指定的，第一个图像文件是放在最上面的，最后指定的文件是放在最下面的。另外，通过多个background-repeat属性与background-position属性的指定，可以单独指定背景图像中某个图像文件的平铺方式与放置位置。

8.在CSS 3中，只要使用border-radius属性指定好圆角的半径，就可以绘制圆角边框了。可以指定两个半径，如：border-radius: 40px 20px; 如果使用了这个属性，的是把边框设定为不显示的时候，浏览器将把背景的四个角绘制为圆角。

9.在CSS 3中增加了一个border-image属性，可以让处于随时变化状态的元素的长或宽的边框统一使用一个图像文件来绘制。

10.在CSS 3中，除了使用border或border-width属性来指定边框的宽度外，使用border-image属性同样可以指定边框的宽度。如：border-image: url(图像路径) A B C D / border-width topbottom leftright ，其中，topbottom表示元素的上下两条边中图像的显示方法，leftright表示元素的左右两条边的显示方法。在显示时可以指定的值为repeat, stretch, round.将显示方法指定为round时与将显示方法指定为repeat时类似，都是将图像进行平铺显示，区别在于如果最后显示的一幅图像不能被完全显示，且能够显示的部分不到图像的一半，就不显示最后的图像，然后扩大前面的图像，使显示区域正好完整平铺全部图像；如果能够显示的部分超过图像的一半，就显示图像最后的图像，但是将全部显示的图像缩小，使显示区域正好完整平铺全部图像。

第十八章：CSS 3中的变形处理

1.在CSS 3中，可以利用transform功能来实现文字或图像的旋转，缩放，倾斜，移动这四种类型的变形处理。

2.“transform: rotate( 45deg )”语句使该div元素顺时针旋转45度。

3..“scale（"0.5"）”表示缩小50%。 transform: scale( 0.5, 2 );表示水平方向缩小50%，垂直方向放大一倍。

4.“ skew ( 30deg, 30deg )”表示水平方向向上倾斜30度，垂直方向向上倾斜30度。

5.“ translate ( 50px, 50px )”表示水平方向上移动50个像素，垂直方向上移动50个像素。

6.使用transform方法进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用transform-origin属性，可以改变变形的基准点。

第十九章：CSS 3中的动画功能

1.CSS 3中的动画功能分为Transitions功能与Animations功能，这两种功能都可以通过改变CSS 中的属性值来产生动画效果。到目前为止，Transitions功能支持从一个属性值平滑过渡到另一个属性值，Animations功能支持通过关键帧的指定来在页面上产生更复杂的动画效果。

2.transition: property duration timing-function 其中property表示对哪个属性进行平滑过渡，duration表示在多长时间内完成属性值的平滑过渡，timing-function表示通过什么方法来进行平滑过渡。

3.div: hover { background-color: #00ffff; }通过hover属性指定当鼠标指针停留在div元素上时的背景色为浅蓝色。

4.使用Transition功能实现动画的缺点是只能指定属性的开始值与终点值，然后在这两个属性值之间实现平滑过渡，不能实现更为复杂的动画效果。

5. @-webkit-keyframes 关键帧集合名 { 创建关键帧的代码 }

@-webkit-keyframes mycolor{

0%{ background-color: red; }

40%{ background-color: darkblue; }

70%{ background-color: yellow; }

100%{ background-color: red; }

}

div: hover{

-webkit-animation-name: mycolor;

-webkit-animation-duration: 5s;

-webkit-animation-timing-function: linear;

}

在animation-name属性中指定关键帧集合的名称，在animation-duration属性中指定完成整个动画所花费的时间，在animation-timing-function属性中指定实现动画的方法。

6.在元素的样式代码中，可以通过animation-iteration-count属性来指定动画的播放次数，也可通过对该属性指定infinite属性值来让动画不停地循环播放。

7.Animation中的方法：linear, ease-in, ease-out, ease, ease-in-out.

第二十章：布局相关样式

1.在CSS 3中，通过column-count属性来使用多栏布局方式，该属性的含义是将一个元素中的内容分为多栏进行显示。

2.使用多栏布局的时候，需要将元素的宽度设置成多个栏目的总宽度，它与使用float属性和position属性时的区别是：使用两个属性时只需单独设定每个元素的宽度即可，而使用多栏布局时需要设定元素中多个栏目相加后的总的宽度。使用column-width属性单独设置每一栏的宽度而不设定元素的宽度。使用column-gap属性来设定多栏之间的间隔距离。使用column-rule属性在栏与栏之间增加一条间隔线，并且设定该间隔线的宽度，颜色等等。

3.在CSS 3中，通过box属性来使用盒布局。使用box-flex属性，使盒布局变为弹性盒布局就可以了。使用弹性盒布局时，可以通过box-ordinal-group属性来改变各元素的显示顺序。使用box-orient来指定多个元素的排列方向。