这篇文档是相对的全面，花了一天时间从一套教程PTT整理得来，

总共有40多页，每个知识点也是做了文档标题，现供需要者学习参考。

新的网页结构

1 / 43

新增的主体结构元素

Article

Section

Aside

Nav:传统的导航条; 侧边栏导航;内页导航;翻页操作

Time

2014年9月28

9月28

今天的时间

2014年9月28晚上10点

UTC标准时间2014年9月28晚上10点

中国时间2014年9月28晚上10点

新增的非主体结构元素

Header

header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他的内容，比如在header里面放置logo图片、搜索表单等等。

注意：一个页面内并没有限制header的出现次数，也就是说我们可以在同一页面内，不同的内容区块上分别加上一个header元素。

在HTML5中，一个header元素至少可以包含一个heading元素（h1-h6），也可以包括我们下节课将要学习的hgroup元素，还可以包括其他的元素，在新的W3C HTML5标准，我们还可以把NAV元素包括进去。

2 / 43

hgroup

hgroup元素是将标题和他的子标题进行分组的元素。hgroup元素一般会把h1-h6的元素进行分组，比如在一个内容区块的标题和他的子标题算是一组。

通常情况下，文章只有一个主标题时，是不需要hgroup元素的。

footer

footer元素可以作为他的上层父级内容区块或是一个根区块的注脚。footer元素一般情况下包括与它相关的区块的注脚信息，比如作者、版权信息等

注意：footer元素和我们前面所讲的header元素一样，并没有限制他的个数。并且footer元素可以为article元素或者section元素添加footer元素。

Address

address元素用来在页面中呈现联系信息，包括文档的作者、邮箱、地址、电话信息等。

address元素还用来展示和文章中的相关的联系人的所有联系信息。

figure

figure元素是一种元素的组合，带有可选标题。figure元素用来表示页面上一块独立的内容，如果将他从网页上删除不给我们的网页造成影响。

figcaption元素表示figure元素的标题，它属于figure元素，figcaption元素必须书写在figure元素内部，可以写在figure元素内的其他从属元素前面或后面。一个figure元素内最多只允许放置一个figcaption元素。

details

details元素是一种用于标识该元素内部的子元素可以被展开、收缩显示的元素。details元素具有一个布尔类型的open属性，当该值为true时，该元素内部的子元素应该被展开显示，当该属性值为false时，其内部的子元素应该被收缩起来不现实。该属性的默认值为false，当页面打开时其内部的子元素应该处于收缩状态。

summary元素从属于details元素，用鼠标点击summary元素中的内容文字时，details元素中的其他所有从属元素将会展开或者收缩。如果details元素内没有summary元素，浏览器那你会提供默认的文字以供点击，例如“details”

目前只有谷歌的Chrome浏览器支持！

3 / 43

mark

mark元素表示页面中需要突出显示或高亮显示的，对于当前用户具有参考作用的一段文字。通常在引用原文时使用mark元素，目的是引起读者的注意。mark元素是对原文内容有补充作用的一个元素，他应该用在一段原文作者不认为重要的，但是现在为了与原文作者不相关的其他目的而需要突出显示或者高亮显示的文字上面。

mark元素最主要的目的就是吸引当前用户的注意。

mark元素除了高亮显示之外，还有一个作用就是在引用原文时，为了某种特殊的目的而把作者没有表示出来的内容重点表示出来。

Progress

progress元素代表一个任务的完成进度，这个进度可以使不确定的，表示进度z正在进行，但不清楚这个还有多少工作量没有完成，也可以用0到某个最大数字（比如100）之间的s数字来表示准确的进度情况（比如百分比）。

该元素具有两个表示当前任务完成情路昂的属性，value属性表示已经完成了多少工作量，max属性表示总共有多少工作量。工作量的单位是随意的，不指定的。

在设定属性点时候，value属性和max属性只能指定为有效的浮点数，value属性必须大于0，且小于或等于max的属性，max的属性必须大于0。

Meter

meter元素表示规定范围内的数量值。

meter元素有6个属性！

1、value属性：在元素中特地地表示出来的实际值。该属性值默认为0，可以为该属性制定一个浮点小数值。

2、min属性：指定规定范围时允许实用的最小值，默认0，在设定该属性时所设定的值不能小于0。

3、max属性：指定规定的范围时允许使用的最大值，如果设定时该属性值小于min的值，那么把min属性的值视为最大值。max属性的默认值1。

4、low属性：规定范围的下限值，必须小于或者等于high的值。

5、high属性：规定范围的上限值。如果该属性值小于low属性的值，那么把low属性的值视为high属性的值，同样如果该属性的值大于max属性的值，那么把max属性的值视为high的值。

6、optimum属性：最佳值属性值必须在min属性值与max属性值之间，可以大于high属性值。

ol

1、可以通过start属性来定义标号的开始值。

2、可以通过reversed属性来进行反向编号。

4 / 43

dl

dl元素在HTML5中，把dl元素进行了重定义。每一项包含一条或者多条带名字的dt元素，用来表示术语，dt元素后面紧跟一个或者多个dd元素，用来表示定义。重定义后的dl列表包含多个带名字的列表项。

canvas画图

canvas创建画布

canvas是在html5中新增的一个重要元素，专门用来绘制图形。

画布的创建方法：

指定id、width（画布宽度）、height（画布高度）。例如：

height="350">上面这个实例的意思就是，创建一个画布，长度为500，高度为350。

引入脚本的方法：

比如：

上面这个实例的意思就是：引入一个名为canvas的JS脚本，JS脚本的语言编码是utf-8

绘图：

在body的属性里面，使用onload="draw('canvas');"语句。调用脚本文件中的draw函数进行图形绘画。

canvas绘制矩形

1用getElementById方法获取到canvas对象。

2在绘制图形的时候要用到图形上下文，图形上下文是一个封装了很多绘图功能的对象。要使用canvas对象的getContext() 方法获得图形上下文。在draw函数中把参数设置为“2d”。

3 canvas绘制有两种方法：

1）、填充（fill）

填充是将图形内部填满。

2）、绘制边框（stroke）

绘制边框是不把图形内部填满，只是绘制图形的外框。

4当我们在绘制图形的时候，首先要设定好绘制的样式，然后我们就可以调用有关的方法进行绘制。

1）、fillStyle属性

填充的样式，在这个属性里面设置填入的填充颜色值。

2）、strokeStyle属性

图形边框的样式，在这个属性里面设置填入边框的填充颜色。

5通过对上下文对象（context）的lineWidth属性来设置图形边框的宽度，任何直线的宽度都是可以通过lineWidth来设置直线的宽度的。

6绘制图形的时候要填充的颜色或者边框分别可以通过fillStyle属性和strokeStyle属性来指定。

颜色的值可以使用

5 / 43

16进制的颜色值（#000000）

颜色名（black）

rgb（rgba(0,0,0）)

rgba（rgba(0,0,0,0.1)）

7使用fillRect方法和strokeRect方法来填充矩形和绘制矩形的边框。

ct（x,y,width,height）

Rect（x,y,width,height）

这两种方法的参数都是一样的，X是指矩形的起点横坐标，y是指矩形的纵坐标，坐标的原点是canvas画布的最左上角，width是指矩形的长度，height是指矩形的高度。

canvas绘制圆形

1使用图形上下文对象的beginPath方法。

ath（）;

2创建圆形路径时，需要使用图形上下文对象的arc方法。

（x,y,radius,starAngle,endAngle,anticlockwise）

x是绘制圆形的起点横坐标，y是绘制圆形起点的纵坐标，radius是圆形的半径，starAngle是开始的角度，endAngle是结束的角度，anticlockwise是否按顺时针方向绘制。

绘制半径与圆弧时指定参数为开始弧度与结束弧度，如果你喜欢使用角度，可以使用以下这个方法，把角度换成弧度。

var radius = degrees*/180

这个里面的表示的角度是180度，*2的角度是360度。

3 使用图形上下文对象的closePath方法将路径关闭。

ath();

4 yle = 'rgba(255,0,0,0.25)';

();

canvas绘制文字

1 = "font-weight font-size font-family ";

有三个参数，第一个参数font-weight

第二个参数font-size规定文本的字体尺寸

6 / 43

2 垂直对齐seline = 'alphabetic';

属性值可以是top（顶部对齐）、hanging（悬挂）、middle（中间对齐）、、bottom（底部对齐）、

alphabetic是默认值。

3 水平对齐ign = "start"

属性值可以设置为：start、end、left、right、center。

保存文件

很多时候绘制完成的图片需要保存，那么我们就可以使用到Canvas API来完成这最后一步！

Canvas API使用toDataURL方法把绘画的状态输出到一个 data URL中然后重新装载，然后我们就可以把重新装载后的文件直接保存。

Canvas API保存文件的原理实际上就是把我们绘画的状态动态输出到一个data URL地址所指向的数据中的过程。

什么是data URL ?

data URL实际上就是base64位编码的URL,主要用于小型的，可以在网页中直接嵌入，而不需要从外部嵌入数据，比如img元素里面的图像文件。

data URL的格式 “data:image/jpeg;base64,/”

toDataURL的使用方法

URL（type）;

这个方法使用一个参数type，表述输出数据的MIME类型。

什么是MIME类型：

jpg image/jpeg

web storage

在HTML5中，除了CANVAS元素，另外一个新增的非常重要功能就是可以在本地客户端储 7 / 43

存数据的Web Storage功能。

在HTML4 我们是使用的cookies在客户端保存用户名等等一些简单的用户信息。

cookies的缺点：

1）、大小限制在4KB；

2）、带宽浪费；

3）、难以操作；

为了解决这样的一些问题，在HTML5中重新提供了在客户端保存数据的功能，他就是我们的“Web Storage”。

这个小章节我们来简单了解，sessionStorage和localStorage之间的区别，掌握两者的基本用法。

sessionStorage 临时存储

就是把数据保存在session对象之中。

session就是在打开网站到关闭网站之间要求进行保存的数据。

sessionStorage

临时保存的用法：

e('key','value');

//或者是 = 'value';

临时数据读取的方法：

变量=m（'key'）

//或者是;

localStorage永久存储

就是将数据保存在客户端本地的硬件设备至上面，如果浏览器被关闭，这个数据不会丢失，下次打开可以继续使用。这个功能就是我们的localStorage永久保存功能。

localStorage

永久保存数据的方法：

m（'key','value'）;

//或者

;

读取的方法：

变量=m（'key'）;

//或者

变量=;

video与audio

video元素

--在HTML5中专门用来播放网络上的视频或者电影。

audio元素

8 / 43

--在HTML5中专门用来播放网络上的音频。

使用video和audio元素进行播放时就不在需要使用其他的插件了，只要我们的浏览器支持HTML5就可以了！

浏览器的支持：

Safari3以上、Firefox4以上、0pera10以上、chrome3.0以上版本都对audio元素和video元素支持！

使用方法

audio元素只需要给他指定一个src属性：

对于不支持的浏览器我们可以在这对元素之间加入提示语句来代替

video元素要设定好长宽和src属性就可以了：

同样对于不支持video的浏览器可以在中间加入替换文字：

source元素指定多个播放格式与编码：

source元素可以为同一个媒体数据指定多个播放格式与编码方式，以确保浏览器可以从中选择一种自己支持的播放格式进行播放。选择顺序自上而下，直到选择到所支持的格式为止。

使用方法：

各种设备对编码格式的支持情况：

webm(.webm)格式的视频 火狐4.0+、chrome6.0+、opera10.6+

mp4(.m4v)格式的视频 IE9.0+ 、Safari3.1+ 、iso5.0 、Android4.0+

ogg(.ogv)格式的视频 火狐3.5+、chrome3.0+、opera10.5+

mp4(.mp4)格式的视频 IE9.0+ 、Safari3.1+ 、iso3.0 、Android2.3+

src属性

在这个属性里面指定媒体数据的URL地址。

controls属性

指定是否为视频或者音频数据添加浏览器自带的播放控制条，控制条中有播放按钮、暂停等按钮。

使用方法：

9 / 43

width和height属性（video独有）：

指定视频的宽度与高度。

使用方法：

autoplay属性

这个属性指定是否当我们网页加载完成之后就开始自动播放。

preload属性

这个属性指定是否对数据进行预加载，如果是的话，浏览器会将视频数据或者音频数据进行缓冲，这样做可以加快播放的速度。

preload属性的三个值：

none 表示不进行预加载。

metadata 表示只预加载媒体的元数据。

auto(默认值) 表示预加载全部的视频或者音频。

使用方法：

poster属性（video独有）

当视频不可以播放的时候，使用poster元素向用户展示一张图片代替视频。

使用方法：

loop属性

指定是否循环播放视频或者音频数据。

使用方法：

error属性

读取过程中一旦发生错误，返回一个Media Error对象，这个对象的code返回对应的错误状态，默认情况下video和audio的error属性都是null。

4种错误状态，返回一个数字值，它表示音频/视频的错误状态：

1 = MEDIA_ERR_ABORTED - 取回过程被用户中止

2 = MEDIA_ERR_NETWORK - 当下载时发生错误

3 = MEDIA_ERR_DECODE - 当解码时发生错误

10 / 43

4 = MEDIA_ERR_SRC_NOT_SUPPORTED - 媒体不可用或者不支持音频/视频

读取错误状态示例

networkState属性

networkState 属性返回音频/视频的当前网络状态（activity）

4种错误状态，表示音频/视频元素的当前网络状态：

0 = NETWORK_EMPTY - 音频/视频尚未初始化

1 = NETWORK_IDLE - 音频/视频是活动的且已选取资源，但并未使用网络

2 = NETWORK_LOADING - 浏览器正在下载数据

3 = NETWORK_NO_SOURCE - 未找到音频/视频来源

networkState属性

networkState 属性返回音频/视频的当前网络状态（activity）

play方法

使用play方法来播放媒体，自动将元素的paused属性的值变成false。

11 / 43

pause方法

使用pause方法来暂停播放，自动将元素的paused属性的值变成true。

load方法

使用load方法来重新载入媒体进行播放，自动将元素的playbackRate属性的值变成defaultPlaybackRate属性的值，自动把error的值变成null。

canPlayType方法

使用canPlayType方法来测试浏览器是否支持指定的媒体类型。

使用方法如下：

var support = yType(type);

canPlayType() 方法可返回下列值之一：

"probably" - 浏览器最可能支持该音频/视频类型

"maybe" - 浏览器也许支持该音频/视频类型

"" - （空字符串）浏览器不支持该音频/视频类型

Html5元素拖放

实现步骤

1、对象元素的draggable属性设置为true（draggable="true"）。还需要注意的是a元素和img元素必须指定href。

2、编写与拖放有关的事件处理代码。

事件

dragstart

drag

dragenter

dragover

dragleave

drop

dragend

12 / 43

产生事件的元素

被拖放的元素

被拖放的元素

拖放过程中鼠标经过的元素

拖放过程中鼠标经过的元素

拖放过程中鼠标经过的元素

拖放的目标元素

拖放的对象元素

描述

开始拖放操作

拖放过程中

被拖放的元素开始进入本元素的范围之内

被拖放的元素正在本元素范围内移动

被拖放的元素离开本元素的范围

其他元素被拖放到了本元素中

拖放操作结束

DataTransfer对象的属性和方法

属性/方法

dropEffect属性

描述

表示拖放操作的视觉效果，允许设置其值，这个效果必须用在effectAllowed属性指定的允许的视觉效果的范围内，允许指定的值none、copy、link、move

用来指定当元素被拖放时所允许的视觉效果，可以指定的值copy、link 、move、copylink 、linkmove、all、none、uninitialized

存入数据的种类，字符串的伪数组

清除DataTransfer对象中存放的数据，如果省略掉参数format就会清除全部数据。

effectAllowed属性

types属性

void clearData（DOMString format）方法

void steData（DOMString format，DOMStrong 向DataTransfer对象中存入数据

data）

DOMString getData(DOMString format)

从DataTransfer对象中读取数据

void setDragImage(Element image，long x，用img元素来设置拖放图标

long y)

clearData方法可以用于清除DataTransfer对象中的数据。

设置拖放时的视觉效果

dropEffect属性与effectAllowed属性结合起来可以设定拖放时的视觉效果。effectAllowed属性表示一个元素被拖放时所允许的视觉效果，一般在ondragstart事件中设定，他的值如下：

属性值

copy

move

link

copylink

说明

允许被拖动的元素被复制到项目中

允许将被拖动元素移动到被拖动的目标元素中

通过拖放操作，被拖动的元素会连接到拖到的目标元素上

被拖动元素被复制或链接到拖动的目标元素中，根据拖动的目标元素来决定执行复制操作还是链接操作

被拖动元素复制或移动到拖到的目标元素中，根据被拖动的目标元素来决定复制操作还是移动操作

被拖动元素被连接或移动到拖动的目标元素中，根据拖动的目标元素来决定执行链接操作还是移动操作

copyMove

linkmove

13 / 43

all

none

uninyialize

允许执行所有拖动操作

不允许执行任何拖动操作

不指定effectAllowed属性值。这是将执行浏览器中默认允许的拖动操作，但是这个操作不能通过effectAllowed属性值来获取

dropEffect属性表示实际拖放时的视觉效果，一般在ondragover事件中指定，允许的值none、copy、link、move。

CSS3选择器

使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。选择器是CSS3中一个重要的内容，使用CSS选择器可以大幅度提高开发人员的编写或者修改页面样式的时候的工作效率。每一条css样式定义由两部分组成，形式如下：

选择器{样式}

在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

属性选择器

在CSS中追加了三个属性选择器：[att*=val]、[att^=val]和[att$=val]

[att*=val]属性选择器

如果元素用att表示的属性的值中包含用val指定的字符，那么该元素使用这个样式。

[att^=val]属性选择器

如果用att表示的属性的属性值的开头字符为用val指定的字符的话，那么该元素使用这个值。

[att$=val]属性选择器

如果元素用att表示的属性的属性值的结尾字符为用val指定的字符，那么该元素使用这个样式。

伪类选择器及伪元素

类选择器

在css中可以使用类选择器把相同的元素定义成不同的样式。比如：

{text-align: left}

{text-align: right}

14 / 43

伪类选择器

类选择器和伪类选择器的区别在于，类选择器我们可以随意起名，而伪类选择器是CSS中已经定义好的选择器，不可以随意起名。

最常见的伪类选择器

a:link{ color: #ff6600 } /* 未被访问的链接 */

a:visited{ color: #87b291 } /* 已被访问的链接 */

a:hover{ color: #6535b2 } /* 鼠标指针移动到链接上 */

a:active{ color: #55b28e } /* 正在被点击的链接 */

伪元素选择器

伪元素选择器，针对于CSS中已经定义好的伪元素使用的选择器。

使用方法：

选择器：伪元素{属性：值}

与类配合使用

选择器.类名：伪元素{属性：值}

first-line伪元素选择器

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

first-letter伪元素选择器

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

before伪元素选择器

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

after伪元素选择器

after伪元素选择器用于在某个元素之后插入内容。

结构性伪类选择器

root选择器

root选择器将样式绑定到页面的根元素中。

not选择器

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

empty选择器

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

15 / 43

target选择器

target选择器对页面中某个target元素指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。

常规选择器

first-child选择器

first-child单独指定第一个子元素的的样式。

last-child选择器

last-child单独指定最后一个子元素的的样式。

nth-child选择器

nth-child(n) 选择器匹配正数下来第 N 个子元素

nth-child(odd)选择器匹配正数下来第奇数个子元素

nth-child(even)选择器匹配正数下来第偶数个子元素

nht-last-child选择器

nth-last-child(n) 选择器匹配倒数数下来第 N 个子元素

nth-last-child(odd)选择器匹配倒数数下来第奇数个子元素

nth-last-child(even)选择器匹配倒数下来第偶数个子元素

使用nth-of-type和nth-last-of-type

nth-of-type和nth-last-of-type在css3中就是用来避免上面这类问题的发生，在统计的时候就只针对同类型的子元素进行计算。

nth-of-type正数

nth-last-of-type倒数

循环使用样式

nth-child(An+B)A表示每次循环中共包括几种样式，B表示指定的样式在循环中所处的位置。

only-child选择器

only-child选择器，只对唯一的子元素起作用。

UI状态伪类选择器

UI选择器的特征就是指定的样式只有当元素处于某种状态下时，才起作用，在默认状态下不起作用。

16 / 43

E:hover

选择器被用来指定当鼠标指针移动到元素上时元素所使用的样式

使用方法：

<元素>:hover{

CSS样式

}

我们可以在“<元素>”中添加元素的type属性。

例：

input[type="text"]:hover{

CSS样式

}

E:active

选择器被用来指定元素被激活时使用的样式

E:focus

选择器被用来指定元素获得光标聚焦点使用的样式，主要是在文本框控件获得聚焦点并进行文字输入时使用。

E:read-only

选择器被用来指定当元素处于只读状态时的样式。

E:read-write

选择器被用来指定当元素处于非只读状态时的样式。

E:checked

伪类选择器用来指定当表单中的radio单选框或者是checkbox复选框处于选取状态时的样式。

E:default

选择器用来指定当页面打开时默认处于选取状态的单选框或复选框的控件的样式。

17 / 43

E:indeterminate

选择器用来指定当页面打开时，一组单选框中没有任何一个单选框被设定为选中状态时，整组单选框的样式。

Selection

伪类选择器用来指定当元素处于选中状态时的样式。

E:invalid

伪类选择器用来指定，当元素内容不能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容不符合元素规定的格式时的样式。

E:valid

伪类选择器用来指定，当元素内容能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容符合元素规定的格式时的样式。

E:required

伪类选择器用来指定允许使用required属性，而且已经指定了required属性的input元素、select元素以及textarea元素的样式。

E:optional

伪类选择器用来指定允许使用required属性，而且未指定了required属性的input元素、select元素以及textarea元素的样式。

E:in-range

伪类选择器用来指定当元素的有效值被限定在一段范围之内，且实际的输入值在该范围之内时的样式。

E:out-of-range

伪类选择器用来指定当元素的有效值被限定在一段范围之内，但实际输入值在超过时使用的样式。

18 / 43

通用兄弟元素选择器

他用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式。

使用方法：

<子元素>~<之元素之后的同级兄弟元素>{

CSS样式

}

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

在前面的课程中我们讲过了如何使用before伪元素和after伪元素在页面中的元素前或者后加入内容，而插入的内容是以content属性来定义的。

before伪元素和after伪元素在CSS2.0的时候就已经被添加，从CSS2到CSS3一直都在对这两个选择器进行改良和扩展，从而使得我们的before伪元素和after伪元素的功能越来越强大。

插入文本

在CSS2中，使用before选择器在元素前面插入内容，使用after在元素后面插入内容，在选择器content属性中定义要插入的内容。

例如对H2使用before选择器在H2的前面插入文字“Title”。

并且我们还可以给他定义样式，进行美化操作。

比如我们给“Title”的文字设置为白色，加上绿色的背景，内边距上下1像素左右5像素，外边距右边5像素，当然还可以设置他的字体等等。

排除一些不需要插入内容的元素

使用content属性的追加一个none属性值。

比如：

19 / 43

插入图片文件

使用before或者after除了可以在元素前后插入文字之外还可以插入图片。

在插入图片是需要使用URL指定图片的路径，比如在标题前插入一张图片！

比如：

插入段落编号

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

在content属性中使用counter属性来正对对个项目追加连续的编号。

使用方法：

元素:before{

content:counter(计数器名称);

}

使用计数器来计算编号，计数器可以任意命名。

除了使用计数器，还需要在元素的样式中追加对元素的（counter-increment）属性的指定为content属性值中所指定的计数器名称。

元素{

counter-increment: 计数器名称; 属性值中所指定的计数器名称

}

在项目编号中追加文字

h1:berore{

content：'第'counter（content属性值中所指定的计数器名称）'章';

}

变成另一种效果！“第一章、第二章...”

指定编号的样式

比如给他在编号后面带一个“.”文字，并且设置编号的颜色为绿色，字体大小42像素。

h1:before{

content：counter（content属性值中所指定的计数器名称）'.';

color:green;

font-size:42px;

}

变成另一种效果！“第一章、第二章...”

20 / 43

指定编号的种类

before和after不仅可以追加数字编号，还可以追加字母编号或者罗马数字编号。

content：counter（计数器名,编号种类）

可以使用list-style-type属性的值来指定编号的种类。比如指定大写字母编号时，使用“upper-alpha”属性，指定大写罗马字母时使用“upper-roman”属性。

h1:before{

content：counter（计数器名,编号种类）'.';

color:green;

font-size:42px;

}

编号嵌套、重置编号

我们可以在大编号中华嵌套中编号，在中编号中呢又嵌入小编号！

1)、大编号中嵌入中编号

2)、counter-reset属性重置编号

中编号中嵌入大编号

h2:before{

content:counter(大编号的计数器)'-'counter(中编号的计数器)

}

在字符串两边嵌套文字符号

可以使用content属性的open-quote属性值与close-quote属性值在字符串的两边添加诸如单引号、双引号之类的文字字符。

open-quote开始符号

close-quote结尾字符

quote字符类型（使用双引号（""）的时候需要使用转义字符“”）

示例：

标题

21 / 43

文字处理

text-shadow

属性的使用方法

在CSS3我们可以是用text-shadow属性给页面上的文字添加阴影效果，text-shadow在CSS2.1的时候是被删除了的一个属性，但是呢在3.0的CSS中又恢复了使用。

text-shadow的使用方法：

text-shadow：length length length color

第一个length表示的是阴影离开文字的横方向距离；

第二个length表示的是阴影离开文字的纵方向的距离；

第三个length表示的是阴影模糊半径；

color表示的是阴影的颜色。

位移距离

text-shadow所使用的参数中，前两个参数是阴影离开文字的横方向和纵方向的位移距离，使用的时候必须指定这两个参数

、阴影的模糊半径

text-shadow属性的第三个参数就是阴影模糊半径，代表阴影向外模糊时的模糊范围。

阴影的颜色

text-shadow属性的第四个参数就是绘制阴影时所使用的颜色，可以放在三个参数之前，也可以放在之后。当没有指定颜色值的时候，会使用Color的颜色值。

指定多个阴影

我们可以使用text-shadow属性来给文字指定多个阴影，并且针对每个阴影使用不同的颜色。指定多个阴影的时候使用逗号“,”将多个阴影进行分割。

word-break

浏览器文本自动换行

学习word-break之前我们先来看看浏览器对默认文本的换行处理方法。

指定自动换行的处理方法

在CSS3中可以使用word-break属性来设置自动换行的处理方法。

值

normla

换行规则

使用浏览器默认的规则

IE5+

支持

Safari、chrome

支持

22 / 43

keep-all

只能在半角空格或连字符处理支持

换行

允许在单词内换行 支持

不支持

break-all

支持

使用示例：

world-wrap

长单词与URL地址自动换行

在CSS3中，使用word-wrap属性来实现长单词和URL的自动换行。

使用方法：

div{

word-wrap:break-word;

}

word-wrap属性的属性值有两个

第一个：normal 浏览器保持默认处理方式，只在半角空格或者是连字符的地方换行

第二个：break-word 浏览器可以在长单词或URL地址内部进行换行。

@font-face

在页面上显示服务器端的字体

在CSS3中可以使用@font-face属性来利用服务器端字体。

@font-face属性的使用方法：

@font-face{

font-family:webFont;

src:url('font/字体名称.otf')format("opentype");

}

font-family属性值中使用webfont来声明使用的是服务器端字体。

src属性值中首先指定了字体文件所在的路径，format声明字体文件的格式，可以省略文件格式的声明，单独使用src属性值。

可以使用的字体文件格式：

字体格式

otf

ttf

23 / 43

字体属性

opentype

truetype

eot

embedded-opentype

定义斜体或粗体字体

在定义字体的时候，可以把字体定义成斜体或者粗体，在使用服务器服务器端字体的时候，需要根据是斜体还是粗体，使用不同的文字 。

使用方法如下：

@font-face {

font-family: webfont;

src: url(字体);

}

@font-face {

font-family: webfont;

font-style: italic;

src: url(字体);

}

h1{

font-family: webfont;

}

h2{

font-family: webfont;

font-style: italic;

}

显示客户端本地的字体

@font-face除了可以显示服务器端的字体还可以显示本地字体。

首先将font-family设置为本地的字体名，然后将src属性设置为local('字体')。

例如：

@font-face{

font-family:Arial;

src：local('Arial');

}

属性值的指定

1）、font-family：设置文本的字体名称。

2）、font-style：设置文本样式。

取值：normal不使用斜体

italic使用斜体

oblique使用倾斜体

inherit从父元素继承

3）、font-variant：设置文本是否大小写。

取值：

normal使用浏览器默认值

24 / 43

small-caps使用小型大写字母

inherit从父元素继承

4）、font-weight：设置文本的粗细。

取值：

normal使用浏览器默认值

bold使用粗体

bolder使用更粗的字体

lighter使用更细的字体

100-900从细字体到粗，值必须是100的倍数，其中400等于normal，700等同于bold。

5）、font-stretch：设置文本是否横向的拉伸变形。（IE及Firefox已支持font-stretch，但显示效果与正常文字并无不同。）

取值：

normal：正常文字宽度

wider把伸展比例设置为更进一步的伸展值 ；

narrower：把收缩比例设置为更进一步的收缩值；

ultra-condensed：比正常文字宽度窄4个基数；

extra-condensed：比正常文字宽度窄3个基数；

condensed：比正常文字宽度窄2个基数；

semi-condensed：比正常文字宽度窄1个基数；

semi-expanded：比正常文字宽度宽1个基数；

expanded：比正常文字宽度宽2个基数；

extra-expanded：比正常文字宽度宽3个基数；

ultra-expanded：比正常文字宽度宽4个基数；

6）、font-size：设置文本字体大小。

7)、src：设置自定义字体的相对路径或者绝对路径，注意，此属性只能在@font-face规则里使用。

盒模型

在css3中使用display属性来定义盒的类型，总体来说盒分为block类型和inline类型。

比如之前我们所学的div元素和p元素就是属于block类型，span和a属于inline类型。

25 / 43

inline-block

执行分列显示

使用inline-block类型可以直接将两个div元素进行并列显示，不需要使用float属性，也不需要使用clear属性了。

默认情况下使用inline-block类型时并列显示的元素的垂直对齐方式是底部对齐，为了让对齐方式改成顶部对齐，还要给DIV元素的样式

中加入vertical-align属性。

显示水平菜单

在css2.1之前，如果要实现水平菜单，那么我们需要使用float属性，大多数菜单是利用ul列表和li列表项目来显示的，li元素隶属于block类型下的list-item类型，所以要并列显示的话就要使用float属性。

inline-table

使文字和table平列显示。

list-item

可以将多个元素作为列表来显示，同时在元素的开头加上列表的标记。

run-in或compact

如果元素后面还有block类型的元素，run-in类型那个的元素将被包括在后面的block类型的元素的内部，而compact类型的元素将被放置在block类型的元素左边。

table

在CSS3中所有与表格相关的元素及其所属类型表：

元素

table

table

tr

td

所属类型

table

inline-table

table-row

table-cell

说明

代表整个表格

代表整个表格可以被指定为table类型也可以是inline-table类型

代表表格中的一行

代表表格中的单元格

26 / 43

th

tbody

thead

tfoot

col

colgroup

caption

table-cell

table-row-group

table-header-group

table-footer-group

table-columm

table-column-group

table-caption

代表但单元格中的列标题

代表表格中行的所有行

代表表格中的表头部分

代表表格中的脚注部分

代表表格中的一列

代表表格中的所有列

代表整个表格的标题

none

当元素被指定了none类型后，这个元素将不会被显示

模型文字溢出处理

当我们在样式中设置了宽度和高度之后，就有可能出现内容溢出的情况，就可以使用overflow属性来指定如何显示盒子内显示不下的内容。

overflow属性

overflow属性用来指定对盒中容纳不下的内容的显示办法。

取值：

hidden

scroll

auto

超出容纳范围的文字将被隐藏起来

在div元素中出现水平与垂直的滚动条，超出的内容被滚动显示

当文字超出div元素的容纳范围时，根据需要出现水平滚动条或者是垂直滚动条，滚动显示超出的内容。

和不使用overflow时候的显示效果一样，超出容纳范围的文字按原样显示

visible

overflow-x属性与overflow-y属性

使用overflow-x属性或者overflow-y属性，可以单独指定可以在水平或者垂直方向上如果内容超出盒的容纳范围时的显示方法。

text-overflow属性

通过使用text-overflow属性，可以在盒的末尾显示一个代表省略的符号“...”，但是text-overflow属性只在当盒中的内容在水平方向上超出盒的容纳范围时有效

27 / 43

模型阴影

box-shadow属性的使用方法

在CSS3中，可以使用box-shadow属性让盒在显示的时候产生阴影效果。

使用方法：

box-shadow：length length length color

前三个length表示文字阴影离开文字的横方向距离，阴影离开文字的纵方向距离和阴影的模糊半径，color制定阴影的颜色。

将参数设置为0

1、当阴影的模糊半径设定为0的时候，将绘制不向外模糊的阴影。

2、将阴影离开文字的横方向距离与阴影离开文字的纵方向距离都设置为0的时候，会在盒子的周围绘制阴影。

3、将阴影离开文字的横方向距离设定为负数值的时候，向左绘制阴影。

4、将阴影离开文字的纵方向距离设定为负数值的时候，向上绘制阴影。

对盒内子元素使用阴影

可以单独对盒内的子元素使用阴影。

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

通过使用first-letter选择器或frist-line选择器可以只让第一个字或第一行具有阴影效果。

对表格及单元格使用阴影

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

box-sizing属性

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

box-sizing可以指定用width属性与height属性分别指定的宽度只与高度值是否包含元素的内补白区域以及边框的宽度和高度。

可以给box-sizing属性指定的属性值为content-box属性值与border-box属性值。

content-box属性值表示元素的宽度与高度不包括内补白区域及边框的宽度高度；

border-box属性值表示元素的宽度与高度包括内补白区域及边框的宽度与高度，在没有使用box-sizing属性的时候，默认值是content-box属性值。

背景与边框样式

包括背景相关的几个属性，如何在一个背景中使用多个图像文件、如何绘制圆角边框、如何给元素添加图像边框。

28 / 43

新增属性

属性

background-clip

background-origin

background-size

background-break

功能

指定背景的显示范围

指定绘制背景图象时的起点

指定背景中图像的尺寸

指定内联元素的背景图像进行平铺时的循环方式

background-clip指定背景的显示范围

css3中的background-clip属性，它主要是用来控制我们的背景显示区域。

首先呢，我们来看一下它的用法

background-clip ： border-box || padding-box || content-box

1、border-box:此值为默认值，背景从border区域向外裁剪，也就是超出部分将被裁剪掉；

2、padding-box：背景从padding区域向外裁剪，超过padding区域的背景将被裁剪掉；

3、content-box：背景从content区域向外裁剪，超过context区域的背景将被裁剪掉；

浏览器支持情况：

background-clip在各种浏览器内核下，都具有自己的私有前缀：

Firefox3.6版本以下（包含3.6版本）：

-moz-background-clip: border || padding

Firefox4.0版本以上：

Firefox4.0版本以上，支持border-box,padding-box,content-box并且无需带上其前缀，如果你一不小心带上了“-moz-”，那么在Firefox4.0+版本反而是一种错误的写法

background-clip: border-box || padding-box || content-box

background-clip兼容各浏览器的正确写法应该如下：

/*Firefox3.6-*/

-moz-background-clip: border || padding;

/*Webkit*/

-webkit-background-clip: border-box || padding-box || context-box;

/*W3C标准 IE9+ and Firefox4.0+*/

background-clip: border-box || padding-box || context-box;

29 / 43

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

在绘制背景图象时，默认是从内补白（padding）区域的左上角开始绘制的，但是可以利用background-origin属性来指定绘制时从边框的左上角开始绘制，或者是从内容的左上角开始绘制。

padding-box(padding):此值为background-origin的默认值，决定background-position起始位置从padding的外边缘（border的内边缘）开始显示背景图片；

border-box(border):此值决定background-position起始位置从border的外边缘开始显示背景图片；

content-box(content):此值决定background-position起始位置从content的外边缘（padding的内边缘）开始显示背景图片；

语法：

background-origin在早期的Webkit和Gecko内核浏览器（Firefox3.6-,Safari和Chrome代版本）他们都支持一种老式的语法规则，类似于background-clip在Firefox3.6以下的版本一样

background-origin: padding || border || content

那么在那些现代浏览器都支持的是一种新的语法

background-origin: padding-box || border-box || content-box

为了兼容新老版本的浏览器，在使用background-origin改变background-position的原点位置时，最好老旧语法一起加上，并且新语法放在老语法后面，这样只要是支持新语法规则的浏览器就自动会识别background-origin的最新语法

background-origin: padding || border || content

background-origin: padding-box || border-box || content-box

取值说明：

1、padding-box(padding):此值为background-origin的默认值，决定background-position起始位置从padding的外边缘（border的内边缘）开始显示背景图片；

2、border-box(border):此值决定background-position起始位置从border的外边缘开始显示背景图片；

3、content-box(content):此值决定background-position起始位置从content的外边缘（padding的内边缘）开始显示背景图片；

有一点需要提出，在ＩＥ8以下版本解析是不一样的，在IE7以下版本background-origin默认是从border开始显示背景图片。

兼容浏览器：

background-origin虽然现代浏览器都支持，但在不同内核浏览器下还是需要带上其各自的前缀，这样在实际应用中最好按下面的语法规则书写，以保证只要支持background-origin的都能正常运行：

30 / 43

/*Old Webkit and Gecko*/

-moz-background-origin: padding || border || content;

-webkit-background-origin: padding || border || content;

/*New Webkit and Gecko*/

-moz-background-origin: padding-box || border-box || content-box;

-webkit-background-origin: padding-box || border-box || content-box;

/*Presto*/

-o-background-origin: padding-box || border-box || content-box;

/*W3c标准*/

background-origin: padding-box || border-box || content-box;

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

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

使用方法：

background-size: auto || || || cover || contain

1、auto:此值为默认值，保持背景图片的原始高度和宽度；

2、length：设置背景图像的高度和宽度,第一个值设置宽度，第二个值设置高度,如果只设置一个值，则第二个值会被设置为 "auto"。

3、percentage：以父元素的百分比来设置背景图像的宽度和高度，第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

4、cover：此值是将图片放大，以适合铺满整个容器，这个主要运用在，当图片小于容器时，又无法使用background-repeat来实现时，我们就可以采用cover;将背景图片放大到适合容器的大小，但这种方法会使用背景图片失真；

5、contain:此值刚好与cover相反，其主要是将背景图片缩小，以适合铺满整个容器，这个主要运用在，当背景图片大于元素容器时，而又需要将背景图片全部显示出来，此时我们就可以使用contain将图片缩小到适合容器大小为止，这种方法同样会使用图片失真。

兼容的浏览器

background-size和其他的一些CSS3属性一样，需要加上自己的别名，

/*Ｍozilla*/

-moz-background-size: auto || || || cover || contain

/*Webkit*/

-webkit-background-size: auto || || || cover || contain

/*Presto*/

-o-background-size: auto || || || cover || contain

31 / 43

/*W3c标准*/

background-size: auto || || || cover || contain

Background-break属性指定背景图像的尺寸

css3里标签元素能被分在不同区域（如：让内联元素span跨多行），background-break属性能够控制背景在不同区域显示。

属性值：

(1)Background-break: continuous;

此属性是默认值，忽视区域之间的间隔空隙（给它们应用图片就好像把它们看成一个区域一样）

(2)Background-break: bounding-box;

重新考虑区域之间的间隔

(3)Background-break: each-box;

对每一个独立的标签区域进行背景的重新划分。

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

在CSS3中一个元素可以显示多个背景图像，还可以将多个背景图像进行重叠显示，这样可以让我们对背景中所用素材的调整变的更加容易。

使用方法：

background-image:url(),url(),url();

图层的排序方法：浏览器中显示时叠放的顺序从上往下指定的，第一个图像文件是放在最上面的，最后指定的文件是放在最下面的。

border-radius属性圆角边框的绘制

在css3中可以使用border-radius进行圆角边框的绘制，在网页中呢，我们经常使用圆角边框来美化我们的页面，在css3出现之前呢！我们如果要在网页上展示一个圆角边框的一个效果,那么我们需要绘制图形，在css3出现之后呢我们就只需要一段简单的代码就可以实现圆角边框的效果。

使用方法：border-radius:半径

border-radius属性使用的时候，我们只需要定义好圆角的半径就可以绘制圆角边框了。

兼容性：

IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。

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

在border-radius属性中，可以指定两个半径，制定方法如下：

border-radius:40px 20px;

32 / 43

第一个半径作为边框左上角与边框右下角的圆半径来绘制。

第二个半径作为边框右上角与边框左下角的圆半径来绘制。

不显示边框时

在CSS3中，如果使用了border-radius属性但是把边框设置为不显示时，浏览器会把背景的四个角绘制成圆角。

修改边框种类时

使用了border-radius属性后，不管边框是什么种类，都会将边框沿着圆角曲线进行绘制。

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

border-top-left-radius:左上角半径

border-bottom-left-radius:左下角半径

border-top-right-radius：右上角半径

border-bottom-right-radius:右下角半径

border-image属性图像边框

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

1、border-image属性最简单的使用方法：

-webkit-border-image: url("边框图像的路径") 上边距 右边距 下边距 左边距 ;

-moz-border-image: url("边框图像的路径") 上边距 右边距 下边距 左边距 ;

-o-border-image: url("边框图像的路径") 上边距 右边距 下边距 左边距 ;

border-image: url("边框图像的路径") 上边距 右边距 下边距 左边距 ;

上面的参数中，图像的路径、上边距、右边距、下边距、左边距必须进行指定，但是如果上边距、右边距、下边距、左边距得值完全一样，那么就可以缩写为一个。

写法如下：

border-image: url("边框图像的路径") 边距 ;

当我们指定了上边距右边距下边距左边距之后呢！浏览器就会对我们的这个背景图像进行切割，那么他是怎样去对我们的这个图像进行切割的呢？

33 / 43

他会把图像切割成九个部分。

border-top-left-image

border-left-image

border-bottom-left-image

border-top-image

border-bottom-image

border-top-right-image

border-right-image

border-bottom-right-image

在浏览器中显示的时候，border-top-left-image、border-top-right-image、border-bottom-right-image、border-bottom-left-image不会进行任何的拉伸。

而border-top-image、border-right-image、border-bottom-image、border-left-image会分别作为，上边框、右边框、下边框、左边框的这个背景图像来进行显示，必要的时候呢，还可以将这四个图像进行这个平铺或者伸缩。

2、border-image属性指定边框的宽度

在css3中除了可以使用border属性和border-width属性来指定宽度，我们还可以使用border-image属性进行指定边框的宽度。

指定方法：border-image: url("边框图像的路径") 上边距 右边距 下边距 左边距/border宽度 ;

另外border的宽度也可以对四条边进行分别设置

设置的方法：

border-image: url("边框图像的路径") 上边距 右边距 下边距 左边距/border上宽度 border右宽度 border下宽度 border左宽度;

3、指定四条边的背景的显示方法

34 / 43

在CSS3中可以在border-image属性中指定元素四条边中的图像，是以拉伸的方式显示，还是平铺的方式进行显示。

指定方法如下：

border-image: url("边框图像的路径") 上边距 右边距 下边距 左边距/border宽度

topbottom leftright;

topbottom表示元素的上下两条边中图像的显示方法，leftright表示元素的左右两条边中的显示方式，在显示方法中可以指定的值有repeat、stretch和round。

repeat：将图像以平铺的方式进行显示。

stretch：将图像以拉伸的方式进行显示。

round：将图像进行平铺显示，但是如果最后一幅图不能被完全显示时，就不显示图像，把之前的图像扩大。

Transform实现旋转、缩放、倾斜、移动

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

1、如何使用transform功能

在css3中通过transform属性，来实现transform功能。

transform:功能;

-ms-transform:功能; /* IE 9 */

-moz-transform:功能; /* Firefox */

-webkit-transform:功能; /* Safari 和 Chrome */

-o-transform:功能; /* Opera */

2、rotate 旋转，在参数中规定角度

使用方法：

-ms-transform:rotate(角度); /* IE 9 */

-moz-transform:rotate(角度); /* Firefox */

-webkit-transform:rotate(角度); /* Safari 和 Chrome */

-o-transform:rotate(角度); /* Opera */

rotate表示的是顺时针旋转，deg是CSS3中的角度单位。

3、scale缩放转换

使用方法：

transform:scale(值)，他的值是指定的缩放倍率，比如0.5就是缩放到50%，1就是100%，1.5就是放大点150%。

可能的值：

1）、scale(x,y)使元素X轴和Y轴同时缩放

2）、scaleX(x)元素仅X轴缩放

3）、scaleY(y)元素仅Y轴缩放

4、倾斜skew

35 / 43

使用方法：transform:skew(值)，他的值是角度。

可能的值：

1）、skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）只有一个参数时，只在水平方向上倾斜。

2）、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）

3）、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）

5、移动translate

使用方法：transform:translate(值)，他的值是指定移动的距离。

可能的值：

1）、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）只有一个参数时，只在水平方向上移动；

2）、translateX(x)仅水平方向移动（X轴移动）

3）、translateY(Y)仅垂直方向移动（Y轴移动）

6、对一个元素使用多种变形的方法：

使用方法：transform:方法1 方法2 方法3 方法4；

7、改变元素基点transform-origin

可能的值

top left

left

bottom left

top

center

bottom

right top

right

bottom right

动画功能

在CSS3中，如果使用动画功能可以使网页上文字或者图像具有动画效果,可以使背景颜色从一种颜色平滑过渡到另外一种颜色,Transition功能支持从一个属性值平滑到另外一个属性值,Animations功能支持通过关键帧的指定来在页面上产生更复杂的动画效果.

transition

css3中transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

transition属性的使用方法：

transition:语法;

-moz-transition: 语法; /* Firefox 4 */

-webkit-transition:语法; /* Safari 和 Chrome */

-o-transition:语法; /* Opera */

语法：

transition: property duration timing-function delay;

36 / 43

transition主要包含四个属性值：

1）、执行变换的属性：transition-property，属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）

值有三个类型：

A、none 没有属性会获得过渡效果。

B、all 所有属性都将获得过渡效果。

C、property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

2）、变换延续的时间：transition-duration；

规定完成过渡效果需要花费的时间（以秒或毫秒计），默认值0没有效果

3）、在延续时间段，变换的速率变化transition-timing-function；

值：

A、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

B、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

C、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

D、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

E、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

F、cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

4）、变换延迟时间transition-delay；

transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，其取值：为数值，单位为s（秒）或者ms(毫秒)

37 / 43

浏览器兼容情况：

Animations

在CSS3之中我们除了可以使用transition实现动画效果之外呢，我们还可以使用Animations来实现动画效果。

1、使用transition和Animations的区别：

transition和Animations的区别在于，transition只能通过指定属性的开始值与结束值，然后通过两属性值之间进行平滑过渡的方式来实现动画效果，所以transition不能实现复杂的动画效果，而Animations功能是是通过关键帧以及每个关键帧中的属性值来实现更为复杂的动画效果。

2、Animations的使用方法：

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

0%~100%{

本关键帧中的样式

}

关键帧创建好了之后，还要在元素的样式中使用该关键帧。

方法如下：

元素{

-webkit-animation-name:关键帧合集名称;

-webkit-animation-duration:5s;

-webkit-animation-timing-function:linear;

-webkit-animation-iteration-count:infinite;

}

-webkit-animation-name指定合集名称，-webkit-animation-duration整个动画执行完成所需的时间、需要的时间，-webkit-animation-timing-function实现动画的方法,-webkit-animation-iteration-count属性的属性值设定为某个整数值，那么这个动画播放的次数就等于这个整数值（infinite是无限循环播放）。

3、实现动画的方法：

A、linear：从开始到结束都是以同样的速度进行.

B、ease-in：开始速度很慢，然后沿着曲线进行加快.

C、ease-out：开始速度很快，然后沿着曲线进行减速.

D、ease：开始时速度很快，然后沿着曲线进行减速，然后再沿着曲线加速.

38 / 43

E、ease-in-out：开始时速度很慢，然后沿着曲线进行加速，然后再沿着曲线减速.

CSS布局样式

什么是网页的布局？网页布局呢是指在页面中如何对标题、导航栏、主要内容、页脚、表单等各种构成要素进行一个合理的编排。在使用啊CSS3之前呢,主要使用float属性或position属性进行页面的简单布局，但是呢他们也有他们的缺点，比如在两栏或者多栏布局的时候，会出现元素的内容高度不一致，那么导致他们的底部很难对齐，在CSS3中追加了一些新的布局方式，使用这些新的布局方式，除了可以修改之前存在的问题之外，还可以进行更为便捷更为复杂的页面布局。

多栏布局

column-count属性

在CSS3中可以通过，column-count属性来进行多栏布局，这个属性的含义是将一个元素中的内容分成多栏进行显示。

写法：

column-count: 栏目数;

兼容性写法：

-webkit-column-count:3;

-moz-column-count:3;

需要注意的是，在使用多栏布局的时候，要将元素的宽度设置成多个栏目的总宽度。

column-width属性：

指定栏目的宽度来生成分栏。

兼容性写法： -webkit-column-width、-moz-column-width

column-gap属性：

指定栏目与栏目之间的距离

兼容性写法： -webkit-column-gap、-moz-column-gap

column-rule属性：

栏目与栏目之间增加一条分割线

兼容性写法： -webkit-column-rule、-moz-column-rule

使用自适应窗口的弹性盒布局

如何才能让DIV的宽度跟随浏览器窗口变化而变换呢？在CSS3中我们只要使用一个box-flex属性，使得我们的盒布局变成弹性盒布局就可以了。

39 / 43

兼容性写法：

-webkit-box-flex (Safari浏览器、Chrome浏览器时前面加-webkit-)

-moz-box-flex (Firefox浏览器时前面加-moz-)

改变元素的显示顺序

使用弹性盒布局的时候，可以通过box-ordinal-group属性来改变各个元素的显示顺序，在每个元素中加入box-ordinal-group属性，这个属性使用一个表示序号的正数属性值，浏览器在显示的时候根据序号从小到大来显示这些元素。

兼容性写法：

-webkit-box-ordinal-group (Safari浏览器、Chrome浏览器时前面加-webkit-)

-moz-box-ordinal-group (Firefox浏览器时前面加-moz-)

改变元素的排列方向

在使用弹性盒布局的时候，可以通过box-orient来指定多个元素的排列方向。

值：

horizontal 在水平行中从左向右排列子元素。

vertical 从上向下垂直排列子元素。

兼容性写法：

-webkit-box-orient:vertical (Safari浏览器、Chrome浏览器时前面加-webkit-)

-moz-box-orient:vertical (Firefox浏览器时前面加-moz-)

元素的宽度与高度自适应

在使用盒布局的时候，元素的宽度与高度具有自适应性，就是元素的宽度与高度可以根据排列方向的改变而改变。

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

方法就是给子DIV中加入一个box-flex属性

对多个元素使用box-flex属性

让浏览器或者容器中的元素的总宽度或者是总高度都等于浏览器或者是容器的高度。

方法对多个元素使用box-flex属性

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

使用盒布局的时候，可以使用box-pack属性及box-align属性来指定元素中的文字、图像、以及子元素的水平方向或者是垂直方向上的对齐方式。

兼容性写法：

-webkit-box-pack:值 (Safari浏览器、Chrome浏览器时前面加-webkit-)

-moz-box-pack:值 (Firefox浏览器时前面加-moz-)

-webkit-box-align:值 (Safari浏览器、Chrome浏览器时前面加-webkit-)

-moz-box-align:值 (Firefox浏览器时前面加-moz-)

40 / 43

属性box-pack属性值的含义

值

start

box-align属性值的含义

左对齐，文字、图像或子元素被放顶部对齐，文字.图像或子元素被放置在元素最顶部

置在元素最左边

center

中对齐，文字、图像或子元素被放中部对齐，文字、图像或子元素被放置在元素中部

置在元素中部

end

右对齐，文字、图像或子元素被放底部对齐，文字、图像或子元素被放置在元素最底部

置在元素最右边

start

顶部对齐，文字、图像或子元素被左对齐，文字、图像或子元素被放置在元素最左边

放置在元素最顶部

center

中部对齐，文字、图像或子元素被中对齐，文字、图像或子元素被放置在元素最中部

放置在元素最中部

end

底部对齐，文字、图像或子元素被右对齐，文字、图像或子元素被放置在元素最右边

放置在元素最底部

Media Queries动态加载CSS样式

Media Queries的使用方法

@media 设备类型 and （设备特征）{样式代码}

在样式的代码开头必须要写@media，然后制定设备的类型（媒体类型）

可以指定的值与其所代表的设备类型

all

screen

print

handheld

tv

41 / 43

所有设备

电脑显示器

打印用纸或者打印预览图

便携设备

电视机类型设备

speech

braille

embossed

projection

tty

语音和音频合成器

盲人用点字法触觉回馈设备

盲文打印机

各种投影设备

使用固定密度字母栅格的媒介，比如电传打字机和终端。

设备特性的书写方式与样式的书写方式呢很相似，分为两个部分，当中有冒号分隔，冒号前书写设备的某种特性，冒号后书写该特性的具体值。例如，需要指定浏览器的窗口宽度大于400px时,我们可以这样书写(min-width:400px),大部分设备特性的指定值接受min/max的前缀,用来表示大于等于或小于等于的逻辑,以此来避免使用<和>这些字符。

13种设备的特性说明

特效 可指定的值 是否允许使用特性说明

min/max前缀

允许

允许

允许

允许

浏览器的窗口宽度

浏览器窗口的高度

设备屏幕的分辨值

设备屏幕分辨率的最高值

浏览器的方向是纵向还是横向，当浏览器的高度值大于等于浏览器的宽度值的时候，这个特性的portrait否则为landscape

浏览器窗口的纵横比，比例值为浏览器窗口的宽度值/高度值

屏幕分辨率的纵横比，比例值为设备屏幕分辨率的宽度值/高度值

设备使用多少位的颜色值，如果不是彩色设备，该值为0

色彩表中的色彩数

width

height

device-width

device-height

orientation

带单位的长度数值

带单位的长度数值

带单位的长度数值

带单位的长度数值

只能指定2个值不允许

padding或landscape

aspect-ratio

比例值 允许

device-aspect-ratio

比例值 允许

color

整数值 允许

color-index

整数值 允许

monochrome

整数值 允许 单色帧缓冲器中每像素的字节数

resolution

分辨率值 允许 设备的分辨率

42 / 43

scan

只能指定两个值 不允许

progressiv或interlace

电视机类型设备的扫描方式。

progressive表示逐行扫描，interlace表示隔行扫描

设备是基于栅格还是基于位图。

基于栅格时该值为1，否则该值为0

grid

只能指定两个值

0或1

不允许

使用and关键字来指定某种设备类型的某种特性的值满足某个条件时所使用样式， 比如以下语句指定了，当设备窗口宽度小于640px时所使用的样式。

@media screen and (max-width：639px){

样式代码

}

可以使用多条语句来将同一个样式应用于不同的设备类型的设备特性中，指定方式如下：

@media handheld and (min-width：360px),screen and (min-width：480px){

样式代码

}

可以在样式中加入not关键字和only关键字，not表示去反，only是让那些不支持@Media

Queries但是可以读取Media Type的设备的浏览器，将表达式中的样式隐藏起来。

not示例：

@media not handheld and (color){样式代码}

/*样式将被使用在除开便携设备和非色彩携带设备的所有设备中*/

@media all and （not color）

/*样式将被使用在所有非彩色设备中*/

其他的引入方式：

/*当页页宽度小于或等于600px,调用样式表来渲染你的Web页面。*/

或者：

43 / 43