第一节 CSS3选择器
1、属性选择器
语法：E[att]{sRules}
说明：用于选取带有指定属性的元素
语法：E[att]="val"]{sRules}
说明：用于选取带有指定属性和值的元素
语法：E[att]~="val"]{sRules}
说明：用于选取属性值中包含指定词汇的元素。
语法：E[att |= "val"]{sRules}
说明：用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
语法：E[att ^= "val"]{sRules}
说明：匹配属性值以指定值开头的每个元素。
语法：E[att $= "val"]{sRules}
说明：匹配属性值以指定值结尾的每个元素。
语法：E[att *= "val"]{sRules}
说明：匹配属性值中包含指定值的每个元素。
2、伪类选择器
1）结构性伪类选择器
语法：:first-child与:last-child
说明：单独指定第一个子元素和最后一个子元素的样式。
语法：:nth-child与:nth-last-child
说明：对指定序号的子元素使用样式
对所有第奇数个子元素或第偶数个子元素使用样式
:nth-child(odd){}//所有正数下第奇数个子元素
:nth-child(even){}//所有正数下第偶数个子元素
:nth-last-child(odd){}//所有倒数上去第奇数个子元素
:nth-last-child(even){}//所有倒数上去第偶数个子元素
语法：:nth-of-type与:nth-last-of-type
说明：使用这两种选择器时，CSS3在计算子元素是第奇数个子元素还是第偶数个子元素的时候，就只针对同类型的子元素进行计算。
语法：:only-child
说明：只有一个元素的时候使用
2）目标伪类选择器
语法：:target
说明：突出显示活动的HTML锚
URL带有后面跟有锚点名称#，指向文档内某个具体的元素。这个被链接的元素就是目标元素（target element）。
:target 选择器可用于选取当前活动的目标元素
使用该选择器来对页面中的某个target元素（该元素的id当做页面中的超链接来使用）指定样式，该样式只在用户点击页面中的超链接，并且跳转到target元素后起作用。
3、层级选择器
语法：E>F{sRules}
说明：子元素选择器（child selectors）只能选择作为某元素子元素的元素，选择匹配的F元素，且匹配的F元素为所匹配的E元素的子元素。
语法：E+F{sRules}
说明：相邻兄弟选择器可以选择紧接在另一个元素后的元素，而且他们具有一个相同的父元素，E F两元素具有一个相同的父元素，而且F元素在E元素后面，而且相邻。
语法：E~F{sRules}
说明：
用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式。
选择某元素后面的所有兄弟元素，需要再同一个父元素之中，E和F元素是属于同一父元素之内，并且F元素在E元素之后，那么E~F选择器将选中所有
E元素后面的F元素。
以下是几种常用前缀
-webkit-
-moz-
-ms-
-o-
第二节 服务器端字体和iconfont
1、服务器端字体
在CSS3之前，页面字体所使用的字体必须已经在客户端中被安装才能正常显示，在样式表中允许指定当前字体不能正常显示时使用的替代字体，但是如果这个替代字体在客户端中也没有安装时，使用这个字体的文字就不能正常显示了。
为了解决这个问题，在CSS3中，新增了Web Fonts功能，网页中可以使用安装在服务器端的字体，只要某个字体在服务器端已经安装，网页中就能够正常显示了。
语法：@font-face
说明：
@font-face{
font-family:WebFont;
src:url("fonts/Fontin_Sans_B_45b.otf") format("opentype");
}
div{font-family:WebFont;}
WebFont用来声明使用服务端的字体。
format用来声明字体文本的格式，可以省略文件格式的声明而单独使用src属性值。
字体文件的格式有OpenType与TrueType，前者的属性值是opentype，后者的属性值为truetype；前者的文件扩展名为.otf,后者的为.ttf
2、iconfont
什么是iconfont？
我们现在通常所指的iconfont，是用字体文件取代图片文件，来展示图标、特殊字体等元素的方法。
iconfont都有什么优缺点
首先它的体积要比图片小的多。
不仅体积小，而且还具有更好的可维护性（因为是矢量，所以拉伸不变形；颜色可以自行更换，支持一些CSS3对文字的效果）
第三节 CSS3新增属性
1、背景属性
语法：background-clip:border-box/padding-box/content-box
说明：在CSS2中，背景的显示范围是指内部补白之内的范围，不包括边框；而在CSS2.1乃至CSS3中，背景的显示范围是指包括边框在内的范围。在CSS3中，可以使用background-clip来修改背景的显示范围，如果将background-clip属性值设定为border，则背景范围包括边框，如果设定为padding，则不包括边框。
border-box：背景被裁剪到边框盒。
padding-box：背景被裁剪到内边距框。
content-box：背景被裁剪到内容框。
语法：background-origin:border-box/padding-box/content-box
说明：在绘制背景图像时，默认是从内部padding区域的左上角开始，但是可以利用background-origin属性来指定绘制时从边框的左上角开始，或者从内容的左上角开始。
语法：background-size:length/percentage/cover/contain
说明：在CSS3中，可以使用background-size属性来指定背景图像的大小。
length：设置背景图像的高度和宽度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为"auto"。
percentage：以父元素的百分比来设置背景图像的宽度和高度。
cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain：把背景图像扩展至最大尺寸，以使其宽度和高度完全自适应内容区域。
在一个元素中添加多张背景图片
语法：div{background-image:url(flower-red.png), url(flower-green.png),url(sky.jpg);background-repeat:no-repeat,repear-x,no-repeat;background-position:3% 98%,center center,right top;width:300px;}
说明：第一个定义的背景图片在最上面，最后定义的是在最下面。使用background-repeat和background-position可以单独指定背景图像中某个文件的平铺方式与放置位置。
允许多重指定并配合着多个图像文件一起利用的属性有如下几个：
background-image
background-repeat
background-position
background-clip
background-origin
background-size
2、边框属性
语法：border-radius
说明：圆角边框
border-radius：左上角 右上角 右下角 左下角
border-radius：左上角右下角 右上角左下角（对角线）
border-top-left-radius：左上角
border-top-right-radius：右上角
border-bottom-left-radius：左下角
border-bottom-right-radius：右下角
语法：border-image:url("url") A B C D/border-image-width border-image-repeat
说明：让处于随时变化状态的元素的长或宽的边框统一使用一个图像文件来描绘。
第一个参数作为边框使用图像的路径，
A B C D表示当浏览器自动把边框所使用到的图像进行分隔时的上边距，右边距，下边距，左边距，四个边距相同时可以缩写成一个，不需要单位
border-width：表示边框的宽度
border-image-repeat：表示图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)
3、盒阴影
语法：box-shadow:h-shadow v-shadow blur spread color inset
说明：让盒在显示时产生阴影效果。
h-shadow:必需。水平阴影的位置。允许负值。
v-shadow:必需。垂直阴影的位置。允许负值。
blur:可选。模糊距离。
spread:可选。阴影的尺寸。
color:可选。阴影的颜色。
inset:可选。将外部阴影(outset)改为内部阴影。
网友评论