CSS学习笔记
来源：互联网 发布：数据库笔试查询及答案 编辑：程序博客网 时间：2024/06/05 15:56
1 简介
CSS指层叠样式表(Cascading Style Sheets)，定义如何显示 HTML 元素。样式可以规定在单个的 HTML 元素中(内联样式)，在 HTML的元素中（内部样式），或在一个外部的 CSS 文件中（外部样式），可以在同一个 HTML 文档内部引用若干外部样式表，多个样式定义可层叠为一个虚拟的样式表，层叠规则为，内联样式>内部样式>外部样式>浏览器缺省设置样式。
CSS 用于控制网页的样式和布局，CSS3 是最新的 CSS 标准。
哈坤·利提于1994年在芝加哥的一次会议上第一次提出了CSS的建议，1995年的www网络会议上CSS又一次被提出，伯特·波斯演示了Argo浏览器支持CSS的例子，哈肯也展示了支持CSS的Arena浏览器。同年，W3C组织（World WideWeb Consortium）成立，CSS的创作成员全部成为了W3C的工作小组并且全力以赴负责研发CSS标准，层叠样式表的开发终于走上正轨。
1996年底，CSS初稿完成，同年12月，层叠样式表的第一份正式标准（Cascading style Sheets Level 1）完成，成为w3c的推荐标准。
1997年初，W3C内组织了专门管CSS的工作组，其负责人是克里斯·里雷。这个工作组开始讨论第一版中没有涉及到的问题，其结果是1998年5月出版的第二版要求。
2015年CSS3正式发布（？）。
2 css结构
样式表由若干CSS 规则构成，CSS规则由选择器和声明两部分构成，声明由若干条声明构成，每条声明由一个属性和一个或多个值组成，如下：
选择器
{
声明;
...
声明;
}
其中声明的格式为：“属性：值 ;”或“属性：值1，值2，值3...;”,在第二种情况下，属性将先取第一个值，如失败，则取第二个值，如下例：
font-family:"TimesNew Roman",Georgia,Serif;
如果要定义不止一个声明，则需要用分号将每个声明分开。最后一条规则是不需要加分号的，但加分号也可以，应养成每个声明加分号的习惯，可以多条声明共处一行。
是否包含空格不会影响 CSS 在浏览器的工作效果，但不要在属性值与单位之间留有空格，同样，与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。
以下是一些例子：
h1{font-size:16px;color:red;}
p{color:#ffff00;}
p{color:#ff0;}
p{color:rgb(250,250,0);}
p{color:rgb(100%,100%,0%);}
当rgb的参数用百分数表示时，0必须表示为0%，而不能表示为0，但当0表示像素时，可不必表示为0px,可直接表示为0，但推荐仍表示为0px。
如果值为若干单词，则要给值加引号，如下例：
font-family:"TimesNew Roman",Georgia,Serif;
3 继承性
子元素从父元素继承属性，除非有样式表另有规定，但有些属性不能继承，如background-color,background-image等。
4 创建CSS
4.1 外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在HTML文档的头部,如下例：
<head>
<linkrel="stylesheet" type="text/css"href="mystyle.css" />
</head>
在上例中，rel 属性用于指定当前文档与被链接文档的关系
浏览器会从文件mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：
hr {color:sienna;}
p {margin-left:20px;}
body{background-image: url("images/back40.gif");}
4.2 内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:
<head>
<style type="text/css">
hr {color:sienna;}
p{margin-left: 20px;}
body{background-image: url("images/back40.gif");}
</style>
</head>
4.3 内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：
<pstyle="color: sienna; margin-left: 20px">
This is aparagraph
</p>
5 选择器
5.1 类型选择 element
根据元素的类型进行选择,如：p,div,h1等。
5.2 类选择器.class
根据元素class属性进行选择。如：.myclass。
5.3 id选择器 #id
根据元素的id属性进行选择。如：#1221，#abc。可与元素类选择合用，如div#1221表示选择id为1221的div元素。
5.4 *选择器
选择所有元素。
5.5 并选择器element,element
如，“p,h1”。
有一个有趣的往事，由于CSS的继承性，以下第一条规则将使用body元素的子元素都将继承其字体属性，但由于Netscape 4浏览器（约于1997年发布）不支持继承，所以还必须再增加以下的第二条规则，然而这些都已成为往事。
body {
font-family: Verdana, sans-serif;
}
p, td, ul, ol,li, dl, dt, dd {
font-family: Verdana, sans-serif;
}
5.6 后代选择器element element
如，“div p”表示选择div类型元素下的所有p类型元素，包括下一级、下二级、下n级p类型元素。
5.7 子选择器element>element
如，“div>p”表示父元素为div元素的p元素。只包括下一级的类型元素。
如<div><span><p>test</p></span></div>中的p类型元素不能被div>p选择器选中。
5.8 后邻选择器element+element
如，“div+p”表示紧接在div类型元素后的p类型元素。
如，<div><h1>Test</h></div><p>Thisis a test</>中的p元素将被div+p所选。
5.9 后面兄弟选择器 element1~element12
element1和element2同属共同的父元素且平级，element2位于element1之后（不一定紧邻），element2具有所有性，不单指第一个满足上条件的元素，而是指所有满足上述条件的元素。如：
p~ul
{
background:#ff0000;
}
5.10 属性选择器[attribute]
选择带有某一属性的元素，如,[target]，又如[style]等。
如，<a href="http://www.disney.com"target="_blank">disney.com</a>中的a元素将被[target]所选。
5.11 属性值选择器[attrubit=value]
选择某一属性为某值的元素。如a[target=_blank]等。注意后者只中a类型元素中选择。
5.12 属性值包含空格分隔词选择器[attrubit~=value]
选择某属性包含某个由空格分隔的词的元素，也可以是属性即是该词，如[title~=flower]对应 <imgsrc="/i/eg_tulip.jpg" title="tulip flower" />或<img src="/i/eg_tulip.jpg" title="flower"/>，但[title~=flow]则不行，因为在后者的title中没有一个由空格分隔的词为"flow"。另外，[style~="#ff00ff"]是无效的。所以该方法可能只适用于设置为文字性内容的属性。
5.13 属性值包含横线分隔词选择器[attrubit|=value]
选择某属性包含某个由横线分隔的词的元素，也可以是属性即是该词，如[title|=en]对应 对应 <p lang="en">Hello</p>或<p lang="en-us">Hello</p>。
5.14 属性值开头选择器[attribute^=value]
属性值以某几个字符开头，不必是一个词。
5.15 属性值结尾选择择器[attribute$=value]
属性值以某几个字符结尾，不必是一个词。5.16 属性值包含选择器[attribute*=value]
属性值包含某几个字符结尾，不必是一个词。
5.17 :nth-child(n)选择器
:nth-child(n) 选择器匹配属于其父元素的第n 个子元素，不论元素的类型。最高级别的父元素为body， n除了可以用数字表示外，还可以用odd（奇数）或even（偶数）表示，也可以用带n的表达式表示，如4n+1表示第5，9，13等元素。
如：p:nth-child(1),表示，类型为p,且为父元素的第1个子元素。
<style>
p:nth-child(1)
{
color:#ffff00;
background-corlor:#ff0000;
}
</style>
...
<body>
<div>
<p>我是，我是父元素的第一个p元素。</p>
<p>我不是,因为我不是父元素的第一个p元素。</>
</div>
<div>
<h3>我不是，因为我不是p元素，我是h3元素</h3>
<p>我不是，因为我不是父元素的第一个子元素，第一个子元素是h3元素</p>
<div>
</body>
结果如下：
把上例的p:nth-child(1)改为nth-child(1),则结果如下：
很奇怪，第二行的底色也变成了红色，其实不是第二行的底色变成了红色，而是第一行和第二行所共有的div元素作为body的第一个子元素，所以其底色变红，就好像是第二行的底色变成了红色。
个人理解什么是nth,nth就是第n个，在英语中th表序数，除了第1、2、3以外，其他序数都是以th结尾的，比如fourth、fifth、sixth、tenth等。所以:nth-child(n)就是第n个子元素。
5.18 :nth-of-type()选择器
在任一层级中同类型元素中的的第n个元素(包括body元素)。
分析如下代码：
<!DOCTYPE html>
<html>
<head>
<style>
:nth-of-type(1)
{
background:#ff0000;
}
:nth-of-type(2)
{
background:#ffff00;
}
</style>
</head>
<body >
<div>
<p>第一区第一个段落。</p>
<p>第一区第二个段落。</p>
<p>第一区第三个段落。</p>
</div>
<div>
<p>第二区第一个段落。</p>
<p>第二区第二个段落。</p>
<p>第二区第三个段落。</p>
</div>
</body>
</html>
代码定义了两个CSS规则，第一个规定在任一层级中同类型元素中的第一个元素的背景色为红，为方便描述，称为规则一，第二个规则规定了在任一层级中同类型元素中的第二个元素的背景色为黄，称之为规则二。
先看第一层，由于body元素是该层级中的第一个body类型元素，符合规则一，所以body的背景色将为红色，background-color 不能继承，body元素内的所有没有定义背景色属性的子元素的背景色属性都将取默认值即transparent（透明）。
再来第二层，有两个div元素，其中的第一个div符合规则一，故其背景色为红色，而第二个div符合规则二，所以第二个div元素的背景色为黄色。
再来看第三层，第一个div中的第一个p元素符合规则一，故其背景色为红色，第二个p元素符合规则二，故其背景色为黄色，第三个p元素既不符合规则一，也不符合规则二，故取默认值透明。第二个div中的第一个p元素符合规则一，故背景色为红色，第二个p元素符合规则二，故其背景色为黄色，第三个p元素既不符合规则一，也不符合规则二，故取默认值透明。实际显示如下图所示：
6 属性
6.1 display属性
每个网页元素都有display属性，且都有默认值，如div元素的默认值为“block”，成为块级元素，而span元素的默认display属性值为“inline”,故称为行内元素。
块级元素占据一定的矩形空间，可通过设置高度、宽度、内外办距等属性，来调整这个矩形的样子。块级元素总是以一个块的形式表现出来，并且跟同级的兄弟一次竖直排列，左右撑满, 常见的块级元素有div、p、h1-h6、hr、ul、ol等。当两个块级元素紧邻时，它们的距离不是margin-bottom与margin-top的总和，而是两者中的较大者。块级元素宽度缺省是它容器的100%，除非设定一个宽度；
行内元素不占据单独的空间，依附于块级元素，行内元素不可以设置宽与高，但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制,常见的行内元素有a、b、i、u、em、input、select、img、label、br、strong等。当两个行内元素紧邻时，它们之间的距离为第1个元素的margin-right加上第2个元素的margin-left。设置margin只有左右margin有效，上下无效，同样，设置padding时只有左右padding有效，上下无效，但当行内元素设置了background-image属性后，上下就有效padding就有效了，但上下margin仍然无效。
6.2 边框
6.2.1 border
border后加三个参数：边框粗细 边框样式 边框颜色,如border:2px solid #ccc;
其中边框样式包括：
Ø none 定义无边框。
Ø solid 定义实线。
Ø dotted 定义点状边框。在大多数浏览器中呈现为实线。
Ø dashed 定义虚线。在大多数浏览器中呈现为实线。
Ø double 定义双线。双线的宽度等于 border-width 的值。
Ø groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
Ø ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
Ø inset 定义 3D inset 边框。其效果取决于 border-color 的值。
Ø outset 定义 3D outset 边框。其效果取决于 border-color 的值。
Ø inherit 规定应该从父元素继承边框样式。
6.2.2 border-radius
创建圆角边框。
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:300px;
height:100px;
background-color:#ff9900;
border-radius:20px;
-moz-border-radius:25px; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
显示效果如下图：
注：注释语句用“/*”“*/”括住，注释语句可单独成行，也可与ccs语句同行，位于行首或行尾。
6.2.3 border-image
用四刀法划分母图，取母图划分出来的相应子图来绘制边框的各个部分。边框的位置如下图所示：
6.2.3.1 分图
四刀得九格。
第一刀，横向，第二刀，纵向，第三刀，横向，位于第一刀之下，第四刀，纵向，位于第二刀之左。
如母图（像素为81*81）如下时：
例一：第一刀离上边27像素横切，第二刀离右边27像素竖切，第三刀离下边27像横切，第四九离左边27像素竖切。
此时的分图命令为表示“27 2727 27”可简为“27”或“27 27”，得到的四角子贴图均为红色菱形，四边子贴图均为蓝色菱形。
下面是切图后用tretch,round,repeat三种子图填充方式下的效果：
最后一种的代码如下：
{
background-color:yellow;
border:27pxsolid transparent;
width:160px;
padding:10px20px;
border-image:url(/i/border.png)27 repeat ;
}
border-image的用法为：border-image:图像源 分图命令 填充方式
例二：如下图
分图命令为：“40 14 1340”。得到的边框左上角贴图所为
代码为：
div
{
background-color:yellow;
border:15pxsolid transparent;
width:160px;
padding:10px20px;
border-image:url(/i/border.png)40 14 13 40;
}
6.2.3.2 贴图填充方式
共三种：stretch(拉伸)、round()、repeat(),四角无法设定，永远为拉伸方式，四边可设定，当不设定时，默认四边均为stretch(拉伸)，当设定为一个值(stretch,repeat,round)时，四边均为同一个值，当设为两个值时，前值对应上下边，后值对应左右边。不可设为三个或四个值。
repeat方式首先对子图在非重复排列方向上进行缩放，再用缩放得到的图像在可重复排列的方向上重复性排列，总是从中间向两边排列，且子图的宽高比例不会改变，所以与角区域的相接处会存在不完整的子图。当上例的贴图方法改为 repeat后，效果如下：
round方式则对贴图进行适当缩放，缩放方法在repeat方式的基础上再进行适当的计算，可使重复的次数是一个整数，这样子图的宽高比例会有一定的改变，其取整的算法非简单取整，也不是四舍五入，虽有一定的规则，但不知规则为何，当上例的贴图方法改为 round后，效果如下：
6.2.3.3 以下是不同的分图命令和边框宽度下的效果
Border-width 1
3
6
9
26
分图命令
13
27
6.3 阴影
基本语法：box-shadow:[inset]x-offset y-offset blur-radiusspread-radius color
box-shadow属性的参数设置取值：
Ø 阴影类型：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；
Ø X-offset:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；
Ø Y-offset:阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；
Ø 阴影模糊半径：此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
Ø 阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
Ø 阴影颜色：此参数可选。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色（已验证），建议不要省略此参数。
注意，元素有无边框(border),均可产生阴影，当 x-offset y-offset均为0且blur-radius>0时，四边均有阴影向向边发散。
6.4 背景
6.4.1 background-color
该属性可为所有元素设置背景色，包括 body 一直到 em 和 a 等行内元素。background-color 不能继承，其默认值是 transparent。
6.4.2 background-size
background-size 属性规定背景图片的尺寸,先根据此尺寸对背景图像进行缩放，再进行填充。如不用此属性指定尺寸，则默认用图片的原始尺寸。
可用像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。
注意，用像素时须以px作为单位，用百分比时须带%，另为此属应与background及background-repeat属性配合使用。background-repeat可取repeat或no-repeat。
6.4.3 background-origin
background-origin属性规定背景图片的定位区域。
背景图片可以放置于 content-box、padding-box 或 border-box 区域。
6.4.4 background-clip
确定显示的区域，选项有border-box、padding-box、content-box。与 background-origin有所区别，background-origin用于定位，background-clip用于决定显示的区域。
比较一下，左图的配置是background-origin:border-box;background-clip:border-box;
右图的配置是background-origin:border-box;background-clip:content-box;
两图均从边框开始放置背景图，但左图是从边框开始显示背景，右图是从内容区区域开始显示背景的。
6.4.5 background-image
设置背景图像，默认值是 none，不可继承，可设多幅背景：
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
6.4.6 background-repeat
背景图像重复。
取值范围，repeat-y repeat-x(默认)，repeat-x,repeat-y,no-repeat;
6.4.7 background-position
背景图像的位置。可能的值有三类表示方式，第一类以方位词表示，枚举如下：
top left，top center，top right，center left， center center，center right，bottom left，bottom center，bottom right。
其结构为“上中下描述 左中右描述”，上中下描述用top、center、 botton表示，左中右描述用 left、 center、right表示，左中右描述可缺省，缺省时表“中”，如“top”代表“top center”， “center”代表“center center”。第二类表示方法为“x% y%”，第一个值表水平位置，如左上角表示为“0%，0%”，右下角表示为“100% 100% ”，如果仅规定了一个值，另一个将是50%。第三类表示方法为“xpos ypos”，第一个值是水平位置，第二个值是垂直位置。左上角是“0 0”，单位是像素 (0px 0px) 或任何其他的 CSS 单位，如果仅规定了一个值，另一个值将是50%，可以混合使用 % 和 position 值。
默认值为top left。
6.4.8 background-attachment
背景图像固定。如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响。
取值：scroll(默认)、fixed、 inherit。
6.5 文本
6.5.1 text-indent([ɪnˈdent]缩进排版)
一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。该属性可继承。
通过使用 text-indent属性，元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
p {text-indent:5em;}
p {text-indent:20%;}
p {text-indent:20px;}
6.5.2 text-align
规定元素中的文本的水平对齐方式。
值：left、right、center、justify（[ˈdʒʌstɪfaɪ]整理版面，两端对齐）、inherit。
按中国习惯，应有如下规则:
p
{
text-indent:2em;
text-align:justify;
}
6.5.3 text-shadow
向文本应用阴影。
语法：text-shadow:h-shadow v-shadow blur color;
例如：
h1
{
text-shadow: 5px5px 5px #FF0000;
}
效果：
6.5.4 word-wrap
允许长单词或 URL 地址换行到下一行.
语法：word-wrap:normal|break-word;
normal, 只在允许的断字点换行（浏览器保持默认处理）。
break-word, 在长单词或 URL 地址内部进行换行。
6.5.5 word-spacing
增加或减少单词（如英文单词）间的空白，由于中文中没有单词一说，故无效。默认值为0，看下例：
<html>
<head>
<styletype="text/css">
p{word-spacing:30px;}
</style>
</head>
<body>
<p>This isa book.</p>
<p>中国是一个伟大的国家</p>
<p>中国是 一个伟大的国家</p>
</body>
</html>
注意：第一句中，单词之间的空白距离增加了，第二句中的每一个汉字的字间距没有发生变化，这也没错，因为这句中就没有所谓的单词，在英文中，单词之间是以空格分隔的。第三句中的“是”字前后有空白，所以被认为是一个“词”，但这种用法在中文中是没有意义的。中文可以使用letter-spacing实现对字间距的控制。
6.5.6 letter-spacing
字间距，默认为0。字指英文的字母，中文的每一个汉字、标点符号。
6.5.7 line-height
行高，建议通过百分数取值，150%表示行高为字高的150%。
6.5.8 text-transform
取值：none（对文本不处理）、uppercase（将文本转化为大写）、lowercase（将文本转化为小写、capitalize（将文本的每个单词的首字母转化为大写）。
6.5.9 text-decoration（[ˌdekəˈreɪʃn修饰]）
取值：none、underline、overline、line-through、blink（[blɪŋk闪烁]）。
可以取多值，如，text-decoration:underlineoverline line-through可在使文本既有上划线又有下划线，还有删除线。blink值一般不会产生效果。
6.5.10 white-space
设置如何处理元素内的空白。
值
描述
Normal
默认。合并空白符为一个空白符，换行会被忽略。
Pre
空白、换行被保留。其行为方式类似 HTML 中的 <pre> 标签。
Nowrap
合并空白符为一个空白符，忽略换行符，文本会在在同一行上继续，直到遇到 <br>标签为止。
pre-wrap
保留空白符，正常地进行换行。
pre-line
合并空白符为一个空白符，正常地进行换行。
Inherit
规定应该从父元素继承 white-space 属性的值。
6.5.11 direction
值：ltr（left to right）、 rtl。
6.5.12 text-overflow
一般用于div元素，当该元素的overflow属性设为hidden且white-space设为nowrap时才有效。规定该元素中文本（纯文本或a元素，不可为p元素）溢出时如何处理。
语法：text-overflow:clip|ellipsis|string;
clip, 修剪文本。
ellipsis, 显示省略符号来代表被修剪的文本。
string, 使用给定的字符串来代表被修剪的文本。
6.5.13 color
文本颜色。如：
color:red;
color:#f00;
color:rgb(255,0,0);
6.5.14 bcakgroupd-color
可对行内文本元素设置背景色。如：
span.highlight
{
background-color:#ff0;
}
…
<p>
<spanclass="highlight">
css文本的格式，
</span>
css文本的格式包括大小、字体、字色、背景色等，还包括字距、行距、对齐方式、方向等。
</p>
6.5.15 CSS3 @font-face 规则
在CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。通过 CSS3，web 设计师可以使用他们喜欢的任意字体。
当您您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。
您“自己的”的字体是在 CSS3@font-face 规则中定义的。
<style>
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
</style>
6.6 字体
6.6.1 font-family
定义文本的字体系列。如果你希望文档使用一种 sans-serif 字体，但是你并不关心是哪一种字体，以下就是一个合适的声明：
body{font-family: sans-serif;}
注：sans[sænz 副词无，没有]-serif[[ˈserɪf衬线，在笔划开始及结束的地方有额外的装饰]。
这样浏览器就会从sans-serif 字体系列中选择一个字体（如 Helvetica），并将其应用到 body 元素。因为有继承，这种字体选择还将应用到 body 元素中包含的所有元素，除非有一种更特定的选择器将其覆盖。
h1 {font-family: Georgia, serif, 'New York';}声明使用Georgia系列字体,若浏览器所在系统没有此字体，则使用 serif系统字体，若浏览器所在系统没有serif系列字体，则用'New York'字体，若仍无'New York'系列字体， 浏览器就会简单地选择一种可用的 serif 字体。
上面的例子中使用了单引号。只有当字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。
单引号或双引号都可以接受。但是，如果把一个 font-family 属性放在 HTML 的 style 属性中，则需要使用该属性本身未使用的那种引号，如：
<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,
'New York', serif;">...</p>
6.6.2 font-style
规定斜体文本。
该属性有三个值： normal- 文本正常显示、 italic - 文本斜体显示、oblique - 文本倾斜显示。
斜体（italic [ɪˈtælɪk斜体的、斜体字]）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique [əˈbli:k倾斜的]）文本则是正常竖直文本的一个倾斜版本。通常情况下，italic 和 oblique 文本在web 浏览器中看上去完全一样。
6.6.3 font-variant [ˈveəriənt变异]
设定小型大写字母。
值
描述
normal
默认值。浏览器会显示一个标准的字体。
small-caps
浏览器会显示小型大写字母的字体。
inherit
规定应该从父元素继承 font-variant 属性的值。
使原来的大写不变，原来的小写变成小型的大写。
对于中文无效。
6.6.4 font-weight
设置文本的粗细。
值
描述
normal
默认值。定义标准的字符。
bold
定义粗体字符。
bolder
定义更粗的字符。
lighter
定义更细的字符。
100
定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
200
定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
300
定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
400
定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
500
定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
600
定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
700
定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
800
定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
900
定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit
规定应该从父元素继承字体的粗细。
注意：取值小于100大于900及100至900之间的非100整除数（无120、780等）皆无效，等同于normal。
6.6.5 font-size
设置文本的大小。
有能力管理文本的大小在 web 设计领域很重要。但是，不应当通过调整文本大小使段落看上去像标题，或者使标题看上去像段落。
请始终使用正确的 HTML 标题，比如使用 <h1> - <h6> 来标记标题，使用 <p> 来标记段落。
font-size 值可以是绝对或相对值。
绝对值：
n 将文本设置为指定的大小
n 不允许用户在所有浏览器中改变文本大小（不利于可用性）
n 绝对大小在确定了输出的物理尺寸时很有用
相对大小：
n 相对于周围的元素来设置大小
n 允许用户在浏览器改变文本大小
注意：如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。
值
描述
xx-small
把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。
x-small
small
medium
默认值：medium。
large
x-large
xx-large
smaller
把 font-size 设置为比父元素更小的尺寸。
larger
把 font-size 设置为比父元素更大的尺寸。
length
把 font-size 设置为一个固定的值。
%
把 font-size 设置为基于父元素的字大小的百分比值。
Inherit
规定应该从父元素继承字体尺寸。
使用 em 来设置字体大小:
如果要避免在 InternetExplorer 中无法调整文本的问题，许多开发者使用 em 单位代替 pixels。W3C 推荐使用 em 尺寸单位。
1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。
浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。
可以使用下面这个公式将像素转换为em=pixels/16（注：16 等于父元素的默认字体大小，假设父元素的 font-size 为 20px，那么公式需改为：em=pixels/20）
6.7 链接
能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
链接的四种状态：
n a:link - 普通的、未被访问的链接
n a:visited - 用户已访问的链接
n a:hover - 鼠标指针位于链接的上方
n a:active - 链接被点击的时刻
如：
<style>
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
</style>
注：为了使定义生效，a:hover必须位于 a:link 和 a:visited 之后！a:active 必须位于 a:hover 之后。
以下是另一个例子，这种效果经常用于菜单：
<style>
a:link,a:visited
{
display:block;
font-weight:bold;
font-size:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
6.8 列表
从某种意义上讲，不是描述性的文本的任何内容都可以认为是列表。人口普查、太阳系、家谱、参观菜单，甚至你的所有朋友都可以表示为一个列表或者是列表的列表。
由于列表如此多样，这使得列表相当重要，所以说，CSS 中列表样式不太丰富确实是一大憾事。
6.8.1 list-style-type
设置不同的列表样式。
值
描述
none
无标记。
disc
默认。标记是实心圆。
circle
标记是空心圆。
square
标记是实心方块。
decimal
标记是数字。
decimal-leading-zero
0开头的数字标记。(01, 02, 03,等。)
lower-roman
小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman
大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha
小写英文字母The marker is lower-alpha (a, b, c, d, e,等。)
upper-alpha
大写英文字母The marker is upper-alpha (A, B, C, D, E,等。)
lower-greek
小写希腊字母(alpha, beta, gamma, 等。)
lower-latin
小写拉丁字母(a, b, c, d, e, 等。)
upper-latin
大写拉丁字母(A, B, C, D, E, 等。)
hebrew
传统的希伯来编号方式
armenian
传统的亚美尼亚编号方式
georgian
传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic
简单的表意数字
hiragana
标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana
标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha
标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha
标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）
如：
ul.disc{list-style-type: disc}
ol.decimal{list-style-type: decimal}
6.8.2 list-style-image
把图像设置为列表中的项目标记。
如：list-style-image:url('/i/eg_arrow.gif')
效果如下图：
6.9 表格
6.9.1 边框
table, th, td
{
border: 1px solid blue;
}
请注意，上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。如果需要把表格显示为单线条边框，请使用 border-collapse 属性。
6.9.2 折叠边框
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
通过以上设置，表格变为单线边框。
6.9.3 文本对齐
td
{
text-align:right;
}
默认为左对齐。
6.9.4 垂直对齐
td
{
height:50px;
vertical-align:bottom;
}
默认为居中。
6.9.5 内边距
td
{
padding:15px;
}
6.9.6 表格颜色
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
以下可实现奇数行底色为淡红色：
#customers tr:nth-of-type(odd)
{
background-color:#faa;
}
6.10 outline轮廓
既支持块级元素，也支持行内元素。
outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。outline 属性可设置元素周围的轮廓线。
6.10.1 outline-color
值
描述
color_name
比如 red
hex_number
比如 #ff0000。
rgb_number
比如 rgb(255,0,0)。
invert
默认。执行颜色反转（逆向的颜色）。可使轮廓在不同的背景颜色中都是可见。
inherit
规定应该从父元素继承轮廓颜色的设置。
6.10.2 outline-style
值
描述
none
默认。无轮廓。
dotted
点状的轮廓。
dashed
虚线轮廓。
solid
实线轮廓。
double
双线轮廓。双线的宽度等于 outline-width 的值。
groove
3D 凹槽轮廓。此效果取决于 outline-color值。
ridge
3D 凸槽轮廓。此效果取决于 outline-color值。
inset
3D 凹边轮廓。此效果取决于 outline-color值。
outset
3D 凸边轮廓。此效果取决于 outline-color值。
inherit
规定应该从父元素继承轮廓样式的设置。
下图为上述4种风格的3d轮廓：
代码为：
<p><span class="groove">两个</span> 黄鹂 <spanclass="ridge">鸣翠柳</span><br><br><spanclass="inset">一行</span> 白鹭 <span class="outset"> 上青天</span></p>
注意其中“黄鹂”、“白鹭”两词旁的空格以及br标签，如没有这些，则效果如下图：
可知，outline是没有独自的空间的，可直接覆盖其他内容。这个功能可用于表示已故的人物。
6.10.3 outline-width
outline-width 属性设置元素整个轮廓的宽度，只有当轮廓样式不是 none 时，这个宽度才会起作用。如果样式为 none，宽度实际上会重置为 0。不允许设置负长度值。
值
描述
thin
规定细轮廓。相当于1px.
medium
默认。规定中等的轮廓。相当于3px.
thick
规定粗的轮廓。相当于5px.
length
轮廓粗细的值，不应大于8px。
inherit
规定应该从父元素继承轮廓宽度的设置。
6.11 框模型
6.11.1 概述
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素，所以，背景应用于由内容和内边距、边框组成的区域。
内边距、边框和外边距都是可选的，默认值是零,且不可继承。但是，许多浏览器将body的外边距预设为一个非零的数，致使body外围有空白边框，解决的办法是将body的margin设为0;
在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
6.11.2 内边距
padding 属性定义元素边框与元素内容之间的空白区域。padding 属性接受长度值或百分比值，但不允许使用负值。
h1 {padding:10px 0.25em 2ex 20%;}等同于
h1 {
padding-top: 10px;
padding-right: 0.25em; /*0.25X16px%*/
padding-bottom: 2ex;/* ex 相对长度单位。相对于字符“x”的高度。*/
padding-left: 20%; /*父元素width的20%*/
}
6.11.3 外边距
margin属性定义围绕元素边框的空白区域，即外边距，该属性接受任何长度单位、百分数值甚至负值。
值
描述
auto
浏览器计算外边距。
length
像素、厘米等。默认值是 0px。
%
规定基于父元素的宽度的百分比的外边距。
inherit
规定应该从父元素继承外边距。
6.12 伪类
语法：selector:pseudo-class{property:value}
或：
selector.class： pseudo-class {property： value}
6.12.1 :active
6.12.2 :focus
input:focus
{
background-color:yellow;
}
6.12.3 :hover
a:hover {color:#FF00FF}
6.12.4 :link
a:link {color:#FF0000}
6.12.5 :visited
a:visited{color: #00FF00}
6.12.6 :first-child
向元素的第一个子元素添加样式，如：p:first-child，匹配第一个子元素，该元素必须是p类型。如下例中的p元素则不满足条件，因为不是第一个子元素，但如果没有h1元素则被匹配。
<body>
<h1>Hello</h1>
<p>I am a<em>strong</em> man. I am a <em>strong</em>man.</p>
……
如将规则改为:first-child,则上例中的h1和第一个em则被匹配。
6.12.7 :lang
:lang 伪类向带有指定 lang 属性的元素添加样式。:lang 伪类根据元素的语言编码匹配元素。这种语言信息必须包含在文档中，或者与文档关联，不能从 CSS 指定。:lang 的处理与|= 选择器相同。
q:lang(no)
{
quotes:"`" "`"
}
<p>一些文本 <q lang="no">段落中的引用</q>一些文本。</p>
结果为：
6.13 伪元素
语法：selector:pseudo-element{property:value;}或
selector.class:pseudo-element{property:value;}
CSS 伪元素用于向某些选择器设置特殊效果。
6.13.1 :first-line
"first-line"伪元素用于向文本的首行设置特殊样式。
如：
p:first-line
{
color: #f00;
}
......
<p>
有三种基本的定位机制：普通流、浮动和绝对定位。
</p>
结果为：
当窗口变大时：
可见只对p元素中显示在第一行的部分起作用。
6.13.2 :first-letter
:first-letter伪元素用于向文本的首字母设置特殊样式，如：
p:first-letter
{
color: #00f;
font-size:xx-large
}
<p>每年3月初召开的全国两会被称为“中国政治季”。党的十八大以来，习近平总书记的“两会时间”更是备受瞩目。
</p>
<p>This is just a test.</p>
对于中文而言，一个汉字就是一个字母。
6.13.3 :before
:before 伪元素在元素之前添加内容。:before 伪元素在元素之前添加内容。这个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。如：
h1:before{content:url(/i/w3school_logo_white.gif)}
6.13.4 :after
:after 伪元素在元素之后添加内容。
这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。
h1:after {content:url(/i/w3school_logo_white.gif)}
6.14 定位
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。
6.14.1 position属性
值
描述
static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right或者 z-index 声明）。
relation
正常生成，然后此元素相对其原位置根据left(或right)、top（或bottom）进行定位，其他元素保持原来位置不变。
absolute
脱离流，相对于body（不是父元素）根据left(或right)、top（或bottom）进行定位。
fixed
脱离流，相对于浏览器窗口根据left(或right)、top（或bottom）定位。
inherit
规定应该从父元素继承 position 属性的值。
6.14.2 float
浮动的框可在包含框内脱离普通流而向左（右）移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。其本身仍在流中占据空间，不会产生真正的飘浮效应，其右（左）边的空白区域会被其后续的元素占据。
需要指出的是与浮动元素为同级关系的块级元素不要设置宽度和高度，否则会出现不可预见的情况。
6.15 2D转换
元素在x,y平面上进行做移动、缩放、旋转。
6.15.1 transform:translate(x,y)
移动。
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /*IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
}
transform、 -webki- transform、 -moz transform的顺序很重要，比于firefox来说上述指令中，transform、-webkit-transform、moz-transorm三个语句都可解释执行，但firefox会去执行三个都可执行的语句中的最后一个语句。如果将-moz-transorml置于-webkit-之前，则最后生效的是-webkit-transform语句。而对于IE而言，transform、-ms-transform都可被解释执行，ie也会执行后一条语句。目前得到的经验是，原名写在开头，-moz-写在最后。当然，如果不是出于在某个浏览器下调试，则顺序无所谓，只要参数都设为相同即可。
派生：translateX(n),translateY(n),translateZ(n)。
6.15.2 transform:rotate()
旋转。
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
注意，旋转的中心是元素的中点。
派生：rotateX(angle),rotateY(angle),rotateZ(angle)
一个比较有趣的例子：
<style>
.demo { margin:100px auto; width:300px;height:300px;
background: #ededed; border:1px dotted #ff0000;position:relative;
transform:rotate(0deg)}
.fl { width:300px; height:145px;background:#00cb99;}
.fr { width:300px; height:145px; margin-top:10px;background:#0093b4;}
.pa { position:absolute; top:75px; left:75px;width:150px; height:150px; background-color:#f2f2f2;}
</style>
<div class="demo">
<div class="fl"></div>
<div class="fr"></div>
<divclass="pa"></div>
</div>
改变.demo中的rotate()的数值出现旋转效果，如上右图。
6.15.3 transform:scale(x,y)
scale(x,y)把元素的宽带转换成原来的x倍，高度转换成原来的y倍。缩放的中心是元素的中点。
派生：scaleX(n),scaleY(n),scaleZ(n)。
6.15.4 transform:skew()
skew(ndeg,mdeg)把元素在x轴方向上倾斜n度，在y轴方向上倾斜m度，变形的中心是元素的中心。
以上n=0,m=0n=12,m=0、n=0，m=12、n=12m=12四种情况下一个宽高为100px的div元素的变形情况。
派生：skewX(angel),skewY(angel)。
6.15.5 transform:matrix()
matrix提供6个参数a,b,c,d,d,e,f。矩阵变化公式为x’=ax+cy+e,y’=bx+dy+f。
6.15.5.1 移动
matrix(1,0,0,1, Δx,Δy)（Δx,Δy分别对应x和y轴的增量）。
6.15.5.2 缩放
matrix(kx*x,0,0,ky*y,0,0)（kx，和ky分别对应x和y轴缩放比率）。
6.15.5.3 旋转
matrix(cosθ,sinθ,-sinθ,cosθ,0,0)
6.15.5.4 斜切
matrix(1,tan(θy),tan(θx),1,0,0)
6.15.5.5 镜像对称
假设对称轴为y=kx直线，那么以这条直线对称的图形matrix为
matrix(2*ux^2-1,2*ux*uy,2*ux*uy,2*uy^2-1,0,0)
求解过程为：
假设(ux,uy)为直线方向的单位向量。也就是说，如果直线方程是y=kx，那么ux=1/sqrt(1+k^2)，uy=k/sqrt(1+k^2)，
推算出： x’= (2*ux^2-1)*x+2*ux*uy*y
y’= 2*ux*uy*x+(2*uy^2-1)*y。
6.15.5.6 transform-origin 属性
定义元素变换的轴线或轴心。
transform-origin:x-axis y-axis z-axis;默认值50% 50% 0。
如：
...transform:rotate(45deg);transform-origin:20% 40%;...
6.16 3D转换
6.16.1 transform:translate3d(x,y,z)
6.16.2 transform:scale3d(x,y,z)
6.16.3 transform:rotate3d(x,y,z,angle)
x,y,z的值为0或1，不要取其值，否则出现不可思议的结果，0表示在对应轴上不旋转，1表示旋转。angle写为诸如“30deg”的格式。deg不能省。
6.16.4 perspective透视
perspective 属性定义3D元素距视图的距离，以像素计。该属性允许改变 3D元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身，perspective 属性只影响 3D 转换元素。与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。
语法：perspective:npx,如perspective:150px;
<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
height: 150px;width: 200px;margin: 50px;
padding:10px;border: 1px solid black;
perspective:350px;
}
#div2
{
padding:50px;border: 1px solid black;
color:#ffff00;background-color: #ff0000;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<div id="div1">
<divid="div2">沿x轴旋转45度。</div>
</div>
</body>
</html>
效果如下图中的左图，如去掉perspective:350px一句，则没有透视效果，如下图中的中图，如果将perspective:350px变成perspective:250px，则效果如下图中的右图，可见距离越近，3d透视效果越强，当距离无限大时，3d透视效果接近于无。
使用perspective后会出现锯齿。
6.16.5 perspective-origin
定义视点在元素的xy平面上的位置，默认在中点位置，即50%，50%。视线应该始终平行于z轴。
语法：perspective-origin: x-axisy-axis;
x-axis可能的值有：left、center、right、npx、n%等几种形式，推荐使用n%。y-axis类似。
如： perspective-origin: 10%10%;
当使用perspective属性时，才会起作用。且只对其子元素起作用。
6.16.6 backface-visibility
属性定义当元素不面向屏幕时是否可见，也就是背面是否可见。
语法：backface-visibility:visible|hidden;
6.16.7 transform-style
语法：transform-style: flat|preserve-3d;
属于实验性技术，其规格尚未固化，其语法和行为受将来浏览器版本改变的支配。
该属性决定元素的子元素是被安置在三维空间还是被压平在元素所在的平面内。
6.17 transition过渡
过渡是元素从一种样式逐渐改变为另一种的效果。
语法：transition:property duration timing-function delay;
timing-funcition的可取值如下：
Ø linear 匀速（等于 cubic-bezier(0,0,1,1)）。
Ø ease 先慢后快终慢（cubic-bezier(0.25,0.1,0.25,1)）。
Ø ease-in 以先慢后快（等于 cubic-bezier(0.42,0,1,1)）。
Ø ease-out 先快后慢（等于cubic-bezier(0,0,0.58,1)）。
Ø ease-in-out先慢后快终慢（等于 cubic-bezier(0.42,0,0.58,1)）。
Ø cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
6.18 动画
6.18.1 @keyframes规则
@keyframesbckgrd
{
0% {background:red;left:0px;top:0px;}
25% {background:yellow;left:200px;top:0px;}
50% {background:blue;left:200px;top:200px;}
75% {background:green;left:0px;top:200px;}
100% {background:red;left:0px;top:0px;}
}
6.18.2 animation属性
aniamtion属性是一个简写属性，如：animation: bckgrd 5s linear 2s infinite alternate;如果只有一个时间，则该时间为动画长度，如果有两个时间，则后者为延迟时间，如分写则有6个属性。
6.18.2.1 animation-name
动画名称。
6.18.2.2 animation-duration
定义动画完成一个周期所需要的时间，以秒或毫秒计,默认值是0，即无动画。
如：animation-duration:3s;
6.18.2.3 animation-timing-function
规定动画的速度曲线。
值
描述
linear
动画从头到尾的速度是相同的。
ease
默认。动画以低速开始，然后加快，在结束前变慢。
ease-in
动画以低速开始。
ease-out
动画以低速结束。
ease-in-out
动画以低速开始和结束。
cubic-bezier
(n,n,n,n)
在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1数值。
6.18.2.4 animation-delay
延迟，默认为0s。
6.18.2.5 animation-iteraction-count
动画的播放次数，可取n,或infinite [ˈɪnfɪnət]（无限次播放）。
6.18.2.6 animation-direction
是否应该轮流反向播放动画。
normal， 默认值，正常播放。
alternate [ɔ:lˈtɜ:nət]， 轮流反向播放。
6.19 多列
创建多列来对文本进行布局，就像的报纸一样。
6.19.1 column-count
被分隔的列数。
div
{
column-count:3;
}
6.19.2 column-gap
列之间的间隔。
column-gap:40px;
6.19.3 column-rule
列之间分隔线的宽度、样式和颜色规则。
格式column-rule:widthstyle color;如：column-rule:3px outset #ff0000;
其中，style的取值范围为：none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;
当色彩为#f00,宽度为8px,sytle为outset时分隔线的效果为：
当style为none或hidden时，无分隔线显示。
6.20 cursor
规定要显示的光标的类型（形状）。
值
描述
default
默认光标（通常是一个箭头）
auto
默认。浏览器设置的光标。
crosshair
光标呈现为十字线。
pointer
光标呈现为指示链接的指针（一只手）
move
此光标指示某对象可被移动。
e-resize
此光标指示矩形框的边缘可被向右（东）移动。
ne-resize
此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize
此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize
此光标指示矩形框的边缘可被向上（北）移动。
se-resize
此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize
此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize
此光标指示矩形框的边缘可被向下移动（南）。
w-resize
此光标指示矩形框的边缘可被向左移动（西）。
text
此光标指示文本。
wait
此光标指示程序正忙（通常是一只表或沙漏）。
help
此光标指示可用的帮助（通常是一个问号或一个气球）。
6.21 透明度
div.transbox
{
width: 338px;
height: 204px;
margin:30px;
background-color: #ffffff;
border: 1px solid black;
/* 针对 IE8 以及更早的版本 */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
7 用户界面
包括重设元素尺寸、盒尺寸以及轮廓等。
div.box
{
box-sizing:border-box;
width:33%;
border:1px solidblue;
float:left;
}
8 calc
8.1 示例
background-image: linear-gradient(90deg,#bdf5d9 200px,#fff 200px,#fff calc(100% - 250px),#f6cb8f calc(100% - 250px),#f6cb8f 100%);其中100%为属性的属主的宽度，如当其为800时，以上规则等同于：
background-image: linear-gradient(90deg,#bdf5d9 200px,#fff 200px,#fff 550,#f6cb8f 550,#f6cb8f 100%);
即在200px处置浅蓝，使0-200px段为浅蓝，
在200px处置白色，在500px处置白色，使200px-550px段为白。
在550px处置浅黄，在800px处置浅黄，使550px-800px段为浅黄。效果可如下图所示：
8.2 用法注意
运算符前后需有空格，否则出错。
