@Belinda
2015-05-15T02:14:49.000000Z
字数 23659
阅读 1837
学习笔记
介绍
属性选择器早在CSS2中就被引入了，其主要作用就是为带有指定属性的HTML 元素设置样式。使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。
在CSS2中引入了一些属性选择器，而CSS3在CSS2的基础上对属性选择器进行了扩展，新增了3个属性选择器，使得属性选择器有了通配符的概念，这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。
CSS3的属性选择器主要包括以下几种：
| E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的； |
| E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的； |
| E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value； |
E[attr^="value"]属性选择器，指的是选择attr属性值以“value”开头的所有元素，也就是说，所选择的属性其对应的属性值是以“value”开始的。
如下，我们设置a标签的href属性值的背景色：
.wrap a[href^="http://"]{background:orange;color:blue;}
.wrap a[href^="mailto:"]{background:blue;color:orange;}
上面代码选择了a标签的href属性，并且选取属性值为"http://"和"mailto:"开头的所有a标签，改变其颜色。
E[attr*="value"]属性选择器表示的是选择attr属性值中包含子串"value"的所有元素。 也就是说，只要你所选择的属性，其属性值中有这个"value"值都将被选中。
如下，我们设置a标签href的属性值的背景色：
.wrap a[title*="hubwiz"]{background:black;color:white;}
上面代码表示的是，选择.demo中元素有title属性并对应属性值包含hubwiz值的a元素。
E[attr
这个运用在给你一些特殊的链接加背景图片很方便的，比如说给pdf,png,doc等不同文件加上不同icon，我们就可以使用这个属性来实现。
如下，我们设置a标签href的属性值的背景色：
.wrap a[href$="png"]{background:green;color:black;}
上面代码表示的是，选择.wrap中元素有href属性并以png值结尾的a元素。
这节内容是CSS3选择器最新部分，有人也称这种选择器为CSS3结构类，下面我们通过实际的应用来具体了解他们的使用和区别，首先列出他具有的选择方法：
| :first-child选择某个元素的第一个子元素； |
| :last-child选择某个元素的最后一个子元素； |
| :first-of-type选择一个上级元素下的第一个同类子元素； |
| :last-of-type选择一个上级元素的最后一个同类子元素； |
| :nth-child()选择某个元素的一个或多个特定的子元素； |
| :nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算； |
| :nth-of-type()选择指定的元素； |
| :nth-last-of-type()选择指定的元素，从元素的最后一个开始计算； |
| :only-child选择的元素是它的父元素的唯一一个了元素； |
| :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素； |
| :empty选择的元素里面没有任何内容。 |
:first-child是用来选择某个元素的第一个子元素，比如我们这里的这个demo，你想让列表中的"1"具有与从不同的样式，按照之前的写法，我们需在要第一个li上加上一个相应的class名，比如说“first”，然后我们在给予对应的样式，如下：
.wrap li.first {background: green; border: 1px dashed blue;}
在CSS3最新选择器出现之后，我们就可以使用:first-child来实现，就不需要在增加一个额外的class名了，设置如下：
.wrap li:first-child {background: green; border: 1px dashed blue;}
两种方法最终效果是一样的，只是后者对我来说在操作上会更显得简单、方便、快捷。
:last-child选择器与:first-child选择器的作用类似，不同的是它选择是的元素的最后一个子元素。
比如说，我们需要单独给列表最后一项一个不同的样式，我们就可以使用这个选择器，如下设置简单样式：
.wrap li:last-child {background: green; border: 2px dashed blue;}
:last-child选择器与:first-child选择器使用方法是不是很类似，亲身感受一下效果吧！
“:first-of-type”选择器类似于“:first-child”选择器，但不同的是:first-of-type”选择器还额外指定了元素的类型，主要用定位匹配属于其父元素的特定类型的首个子元素。
:first-of-type选择器，不限制是否为第一个子元素，只要为该类型元素的第一个就行， 类型是指什么呢，就是冒号前面匹配到的东西，比如 p:first-of-type，就是指所有p元素中的第一个。
如下我们为第一个p元素设置背景色：
.wrap > p:first-of-type {
background: green;
}
和:first-of-type选择器相反，:last-of-type选择器选择的是父元素下的某个类型的最后一个子元素。
如下，为最后一个p元素设置背景色：
.wrap > p:last-of-type {
background: green;
}
:nth-child()可以选择元素的一个或多个特定的子元素，可以定义他的值(值可以是整数也可以是表达式)。
如下，把第3个p的背景设为绿色：
p:nth-child(3){background:green;}
2. 倍数写法 :nth-child(an)，匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。
如下，把第2、第4、第6、…、所有2的倍数的p的背景设为蓝色：
p:nth-child(2n){background:blue;}
3. 倍数分组匹配 :nth-child(an+b)与:nth-child(an-b)，先对元素进行分组，每组有a个，b为组内成员的序号，其中字母n和加号+不可缺省，位置不可调换，这是该写法的标志，其中a,b均为正整数或0。
如下，匹配第1、第4、第7、…、每3个为一组的第1个p元素
p:nth-child(3n+1){background:orange;}
如下，匹配第3-1=2、第6-1=5、…、第3的倍数减1个p元素
p:nth-child(3n-1){background:#33FF33;}
4. 奇偶匹配 :nth-child(odd)与:nth-child(even)分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样；偶数(even)与(2n+0)及(2n)结果一样。
这里，我们为奇数和偶数p元素指定两种不同的背景色：
p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
":nth-last-child()"选择器和前面的":nth-child()"很相似，只是这里多了一个last，所以他起的作用就和前面的":nth-child"不一样了，它是从最后一个元素开始算，来选择特定元素。
如下使用:nth-last-child()选择器来选择元素并添加样式：
.wrap p:nth-last-child(4) {background: red;}
如上我们设置p元素的倒数第四个元素，我们也可以像":nth-child(2)"一样，使用表达式来选择特定元素。
:nth-of-type类似于:nth-child，不同的是他只计算选择器中指定的那个元素，其实我们前面的实例都是指定了具体的元素，这个选择器主要对用来定位元素中包含了好多不同类型的元素是很有用处。
例如我们为奇数和偶数的p元素指定两种不同的背景色，如下：
p:nth-of-type(odd)
{
background:#FFFF33;
}
p:nth-of-type(even)
{
background:#99FF33;
}
:nth-last-of-type(n)选择器匹配属于父元素的特定类型的第N个子元素的每个元素，从最后一个子元素开始计数(n可以是数字或公式)。
如下设置指定p元素背景色：
p:nth-last-of-type(3){
background: red;
}
E:only-child，匹配那些是其父元素唯一子元素的E元素。简单来说就是匹配父元素中只有一个子元素的类型元素。
看下如下简单示例：
p:only-child
{
background:red;
}
only-of-type是表示一个元素他有很多个子元素，而其中只有一个子元素是唯一的。
所以我们使用这种选择器就可以选中元素的唯一子元素。
如下设置右栏中是唯一元素的背景色：
div :only-of-type{
background-color: green;
}
:empty是用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。
现在有四个段落，其中一个段落什么都没有内容为空，如果你想这个p隐藏掉，就可通过:empty选择器来实现，如下：
p:empty {
display: none;
}
:empty选择器对于没有任何内容的元素判断是非常有用的。
本节介绍如何使用CSS3的样式进行圆角边框的绘制。圆角边框的绘制也是Web网站或Web应用程序中经常用来美化页面的效果的手法之一。
在CSS3之前，需要使用图像文件才能达到同样效果，如果只靠样式就能完成圆角边框的绘制，对界面设计者来说无疑是一件可喜的事情。
到目前为止，Safari浏览器、Firefox浏览器、Opera浏览器及Chrome浏览器都支持这种绘制圆角边框的样式。
在CSS3中，只要使用border-radius属性指定好圆角的半径，就可以绘制圆角边框了。
使用Firefox浏览器的时候，需要在样式代码中将其书写成'-moz-border-radius'的形式，使用Opera浏览器的时候，需要书写成'border-radius'的形式，使用Chrome浏览器的时候，可以书写成'border-radius'或'-webkit-border-radius'的形式。
绘制一个圆角边框的示例
.wrap {
border: solid 5px blue;
border-radius: 20px;
-moz-border-radius:20px;
-o-border-radius: 20px;
-webkit-border-radius:20px;
background-color:skyblue;
padding:20px;
width:180px;
}
在示例中具有一个div元素，使用border-radius属性将其边框绘制为圆角边框，圆角半径为20像素，边框颜色为蓝色，div元素背景色为浅蓝色。
在border-radius属性中，可以指定两个半径。指定方法如下所示。
border-radius: 40px 20px;
针对这种情况，各种浏览器的处理方式并不一致。在Chrome浏览器与Safari浏览器中，会绘制出一个椭圆形边框，第一个半径为椭圆的水平方向半径，第二个半径为椭圆的垂直方向半径。在Firefox浏览器与Opera浏览器中，将第一个半径作为边框左上角与右下角的圆半径来绘制，将第二个半径作为边框右上角与左下角的圆半径来绘制。
将示例中div元素的样式修改为如下所示的样式代码（使用两个半径），然后重新提交运行该示例， 看看在不同浏览器显示的效果。
.wrap {
border: solid 5px blue;
border-radius: 40px 20px;
-moz-border-radius:40px 20px;
-o-border-radius:40px 20px;
-webkit-border-radius:40px 20px;
background-color:skyblue;
padding:20px;
width:180px;
}
使用了border-radius属性后，不管边框是什么种类，都会将边框沿着圆角曲线进行绘制。
如下所示的样式代码：
.wrap {
border: dashed 5px blue;
border-radius:20px;
-moz-border-radius:20px;
-o-border-radius:20px;
-webkit-border-radius: 20px;
background-color:skyblue;
padding:20px;
width:180px;
}
如果要绘制的圆角边框四个角半径各不相同，可以将border-top-left-radius属性、border-top-right-radius属性、border-bottom-right-radius属性、border-bottom-left-radius属性结合起来使用。
其中border-top-left-radius属性指定左上角半径，border-top-right-radius属性指定右上角半径，border-bottom-right-radius属性指定右下角半径，border-bottom-left-radius属性指定左下角半径。
如下样式代码。
.wrap {
border: solid 5px blue;
border-radius-topleft:10px;
border-radius-topright:20px;
border-radius-bottomright:30px;
border-radius-bottomleft:40px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:20px;
-moz-border-radius-bottomright:30px;
-moz-border-radius-bottomleft:40px;
-o-border-radius-topleft:10px;
-o-border-radius-topright:20px;
-o-border-radius-bottomright:30px;
-o-border-radius-bottomleft:40px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:20px;
-webkit-border-bottom-right-radius:30px;
-webkit-border-bottom-left-radius:40px;
background-color:skyblue;
padding:20px;
width:180px;
}
本节介绍如何使用CSS3的样式进行图像边框的绘制。
在CSS3之前，如果要使用图像边框，若元素的长或宽是随时可变的，页面制作通常采用的做法是让元素的每条边单独使用一幅图像文件。
但是，这种做法也有缺点：
针对上面情况，CSS3中增加了一个border-image属性，可以让处于随时变化状态的元素的长或宽的边框统一使用一个图像文件来绘制。
使用border-image属性，会让浏览器在显示图像边框时，自动将所使用到的图像分割为9部分进行处理，这样就不需要页面制作者再另外进行人工处理了。另外，页面中也不需要因此而使用较多的元素了。关于浏览器对于边框所用到的图像的自动分割内容，会在下面内容进行详细介绍。
使用border-image属性的时候，如果使用的是Firefox浏览器，需要在样式代码中将其书写成"-moz-border-image"的形式；如果使用的是Safari浏览器或Chrome浏览器，需要书写成"-webkit-border-image"的形式；如果使用的是Opera浏览器，需要写成"border-image"的形式。
看下border-image属性使用示例，该示例中有一个div元素，使用border-image属性为该div元素添加了一个图像边框。
.wrap {
border-image:url(/course/54d1cae088dba03f2cd1fec1/img/border.png) 20 20 20 20 / 20px;
-webkit-border-image:url(/course/54d1cae088dba03f2cd1fec1/img/border.png) 20 20 20 20 / 20px;
-moz-border-image:url(/course/54d1cae088dba03f2cd1fec1/img/border.png) 20 20 20 20 / 20px;
width:200px;
}
border-image属性最简单的使用方法如下所示。
border-image:url(图像文件的路径) A B C D
-webkit-border-image：url(图像文件的路径) A B C D
-moz-border-image：url(图像文件的路径) A B C D
border-image属性值中至少必须指定五个参数，其中第一个参数为边框所使用的图像文件的路径，A、B、C、D四个参数表示当浏览器自动把边框所使用到的图像进行分隔时的上边距、右边距、下边距及左边距。如下图1图示的方法对这四个参数进行了说明。
图1： 图2：
接下来，让我们看一下如果在border-image属性值中指定了这四个参数，浏览器对于边框所使用的图像是如何进行分割的。
首先，当在样式代码中书写如下所示的代码时，浏览器对于边框所使用的图像分割方法如图2所示。
border-image：url(borderimage_1.png) 18 18 18 18
-webkit-border-image:url(borderimage_1.png) 18 18 18 18
border-image:url(borderimage_1.png) 18 18 18 18
如图中所示，图像被自动分割为9部分。分割后的图像在CSS3中的名称如表所示
| border-top-left-image / border-top-image / border-top-right |
| border-left-image / / border-right-image |
| border-bottom-left-image / border-bottom-image / |
在CSS3中，除了可以使用border或border-width属性指定边框的宽度外，使用border-image属性同样可以指定边框的宽度，方法如下：
border-image: url('图像文件路径') A B C D/border-width
样式代码如下：
.wrap {
border:solid;
border-image:url(/course/54d1cae088dba03f2cd1fec1/img/border.png) 18 18 18 18/18px ;
-webkit-border-image:url(/course/54d1cae088dba03f2cd1fec1/img/border.png) 18 18 18 18/18px;
-moz-border-image:url(/course/54d1cae088dba03f2cd1fec1/img/border.png) 18 18 18 18/18px;
width:300px;
}
另外，在上述代码中A、B、C和D四个参数只指定了一个参数18px，这是因为CSS3中，如果此处的四个参数完全相同，可以只写一个参数，将其他三个参数省略。
border-image:url(/course/54d1cae088dba03f2cd1fec1/img/border.png) 18/5px 10px 15px 20px ;
浏览器将边框所用图像自动分割为9部分后，除了将border-top-image、border-left-image、border-right-image、border-bottom-image这4部分自动分配为四条边所用的图像之外，将位于中间部分的图像分配给元素边框包围的中间区域，随着div元素的内容变化的同时，或者在样式代码中修改div元素的宽度或高度的同时，中间部分的图像也会自动进行伸缩，以填满该中间区域。
样式代码如下：
.wrap {
border: solid;
border-image:url(/course/54d1cae088dba03f2cd1fec1/img/border.png) 18/5px;
-webkit-border-image:url(/course/54d1cae088dba03f2cd1fec1/img/border.png) 18/5px ;
-moz-border-image:url(/course/54d1cae088dba03f2cd1fec1/img/border.png) 18/5px ;
width:300px;
}
可以在border-image属性中指定元素四条边中的图像是以拉伸的方式显示，还是以平铺的方式显示，指定方法如下所示。
border-image: url(文件路径) A B C D/border-width topbottom leftright
其中,topbottom表示元素的上下两条边中图像的显示方法，leftright表示元素的左右两条边中的显示方法。在显示方法中可以指定的值为repeat、stretch、round三种。
将显示方法指定为repeat时，图像将以平铺的方式进行显示。示例代码：
.wrap {
border-image:url(/course/54d1cae088dba03f2cd1fec1/img/border.png) 18/5px repeat repeat;
-webkit-border-image:url(/course/54d1cae088dba03f2cd1fec1/img/border.png) 18/5px repeat repeat;
-moz-border-image:url(/course/54d1cae088dba03f2cd1fec1/img/border.png) 18/5px repeat repeat;
}
stretch
将显示方法指定为stretch时，图像将以拉伸的方式进行显示。
将显示方法指定为repeat+stretch时，图像将以平铺方式和拉伸方式结合使用。示例如下：
.wrap {
border-image:url(/course/54d1cae088dba03f2cd1fec1/img/border.png) 18/5px repeat stretch;
-webkit-border-image:url(/course/54d1cae088dba03f2cd1fec1/img/border.png) 18/5px repeat stretch;
-moz-border-image:url(/course/54d1cae088dba03f2cd1fec1/img/border.png) 18/5px repeat stretch;
}
将显示方法指定为round时与将显示指定为repeat类似。
在使用border-image属性的时候，仍然可以正常使用背景图像，但是为了不让边框图像挡住背景图像，需要使用中间为透明的边框图像，否则背景图像就有可能被边框图像的中央部分挡住部分或全体了。
.wrap {
-moz-border-image: url(/course/54d1cae088dba03f2cd1fec1/img/border-image-small-1.png") 22 round;
-webkit-border-image: url("/course/54d1cae088dba03f2cd1fec1/img/border-image-small-1.png") 22 round;
-o-border-image: url("/course/54d1cae088dba03f2cd1fec1/img/border-image-small-1.png") 22 round;
border-image: url("/course/54d1cae088dba03f2cd1fec1/img/border-image-small-1.png") 22 round;
display: inline-block;
border-width: 22px;
}
CSS3中包含几个新的背景属性，提供更大背景元素控制。
在本章您将了解以下背景属性：
| 属性 | 描述 | CSS |
|---|---|---|
| background-clip | 规定背景的绘制区域。 | 3 |
| background-origin | 规定背景图片的定位区域。 | 3 |
| background-size | 规定背景图片的尺寸。 | 3 |
您还可以学习如何使用多重背景图像。
浏览器支持
Internet Explorer 9+、Firefox、Chrome、Safari 以及 Opera 支持新的背景属性。
background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。
CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。
你指定的大小是相对于?父元素的宽度和高度的百分比的大小。
调整背景图片的大小：
div
{
background:url(bg_flower.gif);
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;
background-repeat:no-repeat;
}
对背景图片进行拉伸，使其完成填充内容区域：
div
{
background:url(bg_flower.gif);
-moz-background-size:40% 100%; /* 老版本的 Firefox */
background-size:40% 100%;
background-repeat:no-repeat;
}
background-origin 属性规定背景图片的定位区域。
背景图片可以放置于 content-box、padding-box 或 border-box 区域。
实例
在 content-box 中定位背景图片：
.wrap {
background:url(bg_flower.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}
标签定义及使用说明
JavaScript 语法:
object object.style.backgroundClip="content-box"
语法
background-clip: border-box|padding-box|content-box;
| 值 | 说明 |
|---|---|
| border-box | 默认值。背景绘制在边框方框内（剪切成边框方框） |
| padding-box | 背景绘制在衬距方框内（剪切成衬距方框）。 |
| content-box | 背景绘制在内容方框内（剪切成内容方框）。 |
实例
规定背景的绘制区域：
.wrap
{
background-color:yellow;
background-clip:content-box;
}
CSS3 包含多个新的文本特性。
在本章中，您将学到如下文本属性：
Internet Explorer 10、Firefox、Chrome、Safari 以及 Opera 支持 text-shadow 属性。
所有主流浏览器都支持 word-wrap 属性。
注释：Internet Explorer 9 以及更早的版本，不支持 text-shadow 属性。
text-shadow属性使用方法如下所示。
text-shadow:length length length color
其中，前面三个length分别指阴影离开文字的横方向距离、阴影离开文字的纵方向距离和阴影的模糊半径，color指阴影的颜色。
下面是一个text-shadow属性的使用示例。在该示例中给一段红色文字绘制灰色阴影。其中阴影离开文字的横方向距离和纵方向距离均为5个像素。
.wrap
{
text-shadow:5px 5px 5px gray;
color:red;
font-size:50px;
font-weight:bold;
}
text-shadow属性所使用的参数中，前两个参数为阴影离开文字的横方向位移距离与纵方向位移距离。
使用text-shadow属性时必须要指定这两个参数，可以对这两个参数指定负数值
text-shadow 属性所使用的参数中第三个参数是阴影的模糊半径，代表阴影向外模糊时的模糊范围。这个半径的值越大，则阴影向外模糊的范围也就越大。
text-shadow属性所使用的参数中第四个参数是绘制阴影时所使用的颜色，该参数可以放在其他三个参数之后，也可放其他三个参数之前，成为第一个参数。该参数为可选参数，如果不指定，则使用浏览器指定的默认颜色。
可以使用text-shadow属性来给文字指定多个阴影，并且针对每个阴影使用不同颜色。
指定多个阴影时使用逗号将多个阴影进行分隔。到目前为止，只有Firefox浏览器、Chrome浏览器及Opera浏览器对这个功能提供支持。
示例代码
为文字依次指定了桔色、黄色及绿色阴影，同时也为这些阴影指定了适当的位置。
.wrap {
text-shadow:10px 10px #f39800,
40px 35px #fff100,
70px 60px #c0ff00;
color:navy;
font-size:50px;
font-weight:bold;
}
单词太长的话就可能无法超出某个区域：
在 CSS3 中，word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分：
允许对长单词进行拆分，并换行到下一行：
p {word-wrap:break-word;}
在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。
通过 CSS3，web 设计师可以使用他们喜欢的任意字体。
当您您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。
您“自己的”的字体是在 CSS3 @font-face 规则中定义的。
浏览器支持
Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。
Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。
注释：Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。
在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。
如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：
实例
<style>
@font-face
{
font-family: myFirstFont;
src: url('singlemalta-webfont.ttf'),
url('singlemalta-webfont.eot'); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
</style>
您必须为粗体文本添加另一个包含描述符的 @font-face：
示例：
@font-face
{
font-family: myFirstFont;
src: url('singlemalta-webfont.ttf'),
url('singlemalta-webfont.eot'); /* IE9+ */
font-weight:bold;
}
文件 "singlemalta-webfont.ttf" 是另一个字体文件，它包含了 singlemalta字体的粗体字符。
只要 font-family 为 "myFirstFont" 的文本需要显示为粗体，浏览器就会使用该字体。
通过这种方式，我们可以为相同的字体设置许多 @font-face 规则。
下面的表格列出了能够在 @font-face 规则中定义的所有字体描述符：
| 描述符 | 值 | 描述 |
|---|---|---|
| font-family | name | 必需。规定字体的名称。 |
| src | URL 必需。定义字体文件的 URL。 | |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded | 可选。定义如何拉伸字体。默认是 "normal"。 |
| font-style | ormal italic oblique | |
| 可选。定义字体的样式。默认是 "normal"。 | ||
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 | 可选。定义字体的粗细。默认是 "normal"。 |
| unicode-range | unicode-range | 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF" |
通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
它如何工作？
转换是使元素改变形状、尺寸和位置的一种效果。
您可以使用 2D 或 3D 转换来转换您的元素。
浏览器支持
Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9 需要前缀 -ms-。
| translate() |
| rotate() |
| scale() |
| skew() |
| matrix() |
通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（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 */
}
通过 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 */
}
通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：
示例代码：
div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari 和 Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}
值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
示例代码
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg);/* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */
}
值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。
matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
示例代码
如何使用 matrix 方法将 div 元素旋转 30 度：
div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}
下面的表格列出了所有的转换属性：
| 属性 | 描述 | CSS |
|---|---|---|
| transform | 向元素应用 2D 或 3D 转换 | 。 3 |
| transform-origin | 允许你改变被转换元素的位置。 | 3 |
| 函数 | 描述 |
|---|---|
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
| translate(x,y) | 定义 2D 转换，沿着 X 和 Y 轴移动元素 |
| translateX(n) | 定义 2D 转换，沿着 X 轴移动元素。 |
| translateY(n) | 定义 2D 转换，沿着 Y 轴移动元素 |
| scale(x,y) | 定义 2D 缩放转换，改变元素的宽度和高度 |
| scaleX(n) | 定义 2D 缩放转换，改变元素的宽度。 |
| scaleY(n) | 定义 2D 缩放转换，改变元素的高度。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| skew(x-angle,y-angle) | 定义 2D 倾斜转换，沿着 X 和 Y 轴。 |
| skewX(angle) | 定义 2D 倾斜转换，沿着 X 轴。 |
| skewY(angle) | 定义 2D 倾斜转换，沿着 Y 轴。 |
CSS3 允许您使用 3D 转换来对元素进行格式化。
在本章中，您将学到其中的一些 3D 转换方法：
| rotateX() |
| rotateY() |
通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。
示例：
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
-moz-transform: rotateX(120deg); /* Firefox */
}
通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。
实例
div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 和 Chrome */
-moz-transform: rotateY(130deg); /* Firefox */
}
下面的表格列出了所有的转换属性：
| 属性 | 描述 | CSS |
|---|---|---|
| transform | 向元素应用 2D 或 3D 转换。 | 3 |
| transform-origin | 允许你改变被转换元素的位置。 | 3 |
| transform-style | 规定被嵌套元素如何在 3D 空间中显示。 | 3 |
| perspective 规定 | 3D 元素的透视效果。 | 3 |
| perspective-origin | 规定 3D 元素的底部位置。 | 3 |
| backface-visibility | 定义元素在不面对屏幕时是否可见。 | 3 |
| 函数 | 描述 |
|---|---|
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
| translate3d(x,y,z) | 定义 3D 转化 |
| translateX(x) | 定义 3D 转化，仅使用用于 X 轴的值 |
| translateY(y) | 定义 3D 转化，仅使用用于 Y 轴的值。 |
| translateZ(z) | 定义 3D 转化，仅使用用于 Z 轴的值 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 定义 3D 缩放转换，通过给定一个 X 轴的值。 |
| scaleY(y) | 定义 3D 缩放转换，通过给定一个 Y 轴的值 |
| scaleZ(z) | 定义 3D 缩放转换，通过给定一个 Z 轴的值 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿 Z 轴的 3D 旋转 |
| perspective(n) | 定义 3D 转换元素的透视视图。 |
通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
请把鼠标移动到右侧的元素上：
浏览器支持
Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
注释：Internet Explorer 9 以及更早的版本，不支持 transition 属性。
注释：Chrome 25 以及更早的版本，需要前缀 -webkit-。
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
应用于宽度属性的过渡效果，时长为 2 秒：
div
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
注释：如果时长未规定，则不会有过渡效果，因为默认值是 0。
效果开始于指定的 CSS 属性改变值时。CSS 属性改变的典型时间是鼠标指针位于元素上时：
实例
规定当鼠标指针悬浮于
元素上时：
div:hover
{
width:300px;
}
注释：当指针移出元素时，它会逐渐变回原来的样式。
如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开：
示例：
向宽度、高度和转换添加过渡效果：
div
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}
| 属性 | 描述 | CSS |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
下面的两个例子设置所有过渡属性：
实例
在一个例子中使用所有过渡属性：
div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari 和 Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}
实例
与上面的例子相同的过渡效果，但是使用了简写的 transition 属性：
div
{
transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}
通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
CSS3 @keyframes 规则
如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
浏览器支持
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。
CSS3 动画
当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
| 规定动画的名称 |
| 规定动画的时长 |
示例：
把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：
div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
}
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
实例
当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
下面的表格列出了 @keyframes 规则和所有动画属性：
| 属性 | 描述 | CSS |
|---|---|---|
| @keyframes | 规定动画。 | 3 |
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性。 | 3 |
| animation-name | 规定 @keyframes 动画的名称。 | 3 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
| animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 | 3 |
| animation-delay | 规定动画何时开始。默认是 0。 | 3 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 | 3 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 | 3 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 | 3 |
| animation-fill-mode | 规定对象动画时间之外的状态。 | 3 |
通过 CSS3，您能够创建多个列来对文本进行布局 - 就像报纸那样！
在本章中，您将学习如下多列属性：
| column-count |
| column-gap |
| column-rule |
column-count 属性规定元素应该被分隔的列数：
实例
把 div 元素中的文本分隔为三列：
div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}
column-gap 属性规定列之间的间隔：
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
实例
规定列之间 40 像素的间隔：
div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;
}
column-rule 属性设置列之间的宽度、样式和颜色规则。
实例
规定列之间的宽度、样式和颜色规则：
div
{
-moz-column-rule:3px outset #ff0000; /* Firefox */
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
column-rule:3px outset #ff0000;
}
下面的表格列出了所有的转换属性：
| 属性 | 描述 | CSS |
|---|---|---|
| column-count | 规定元素应该被分隔的列数。 | 3 |
| column-fill | 规定如何填充列。 | 3 |
| column-gap | 规定列之间的间隔。 | 3 |
| column-rule | 设置所有 column-rule-* 属性的简写属性。 | 3 |
| column-rule-color | 规定列之间规则的颜色。 | 3 |
| column-rule-style | 规定列之间规则的样式。 | 3 |
| column-rule-width | 规定列之间规则的宽度。 | 3 |
| column-span | 规定元素应该横跨的列数。 | 3 |
| column-width | 规定列的宽度。 | 3 |
| columns 规定设置 | column-width 和 column-count 的简写属性。 | 3 |
在 CSS3 中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。
在本章中，您将学到以下用户界面属性：
| resize |
| box-sizing |
| outline-offset |
浏览器支持
Firefox、Chrome 以及 Safari 支持 resize 属性。
Internet Explorer、Chrome、Safari 以及 Opera 支持 box-sizing 属性。Firefox 需要前缀 -moz-。
所有主流浏览器都支持 outline-offset 属性，除了 Internet Explorer。
在 CSS3，resize 属性规定是否可由用户调整元素尺寸。
这个 div 元素可由用户调整尺寸（在 Firefox 4+、Chrome 以及 Safari 中）。
CSS 代码如下：
实例
规定 div 元素可由用户调整大小：
div
{
resize:both;
overflow:auto;
}
box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。
实例
规定两个并排的带边框方框：
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}
outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
轮廓与边框有两点不同：
CSS 代码如下：
实例
规定边框边缘之外 15 像素处的轮廓：
div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
新的用户界面属性
下面的表格列出了所有的转换属性：
| 属性 | 描述 | CSS |
|---|---|---|
| appearance | 允许您将元素设置为标准用户界面元素的外观 | 3 |
| box-sizing | 允许您以确切的方式定义适应某个区域的具体内容 | 3 |
| icon | 为创作者提供使用图标化等价物来设置元素样式的能力。 | 3 |
| nav-down | 规定在使用 arrow-down 导航键时向何处导航。 | 3 |
| nav-index | 设置元素的 tab 键控制次序。 | 3 |
| nav-left | 规定在使用 arrow-left 导航键时向何处导航。 | 3 |
| nav-right | 规定在使用 arrow-right 导航键时向何处导航 | 。 3 |
| nav-up | 规定在使用 arrow-up 导航键时向何处导航。 | 3 |
| outline-offset | 对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。 | 3 |
| resize | 规定是否可由用户对元素的尺寸进行调整。 | 3 |