[持续更新]CSS3学习笔记（一）伪类选择器&自定义字体&背景图片

CSS3学习笔记

1.  伪类选择器

CSS3之前的伪类共有：::first-line,::first-letter, :after, :before, :hover, :active, :visited, :focus, :link,:first-child, :lang这11种。

CSS3新增了许多选择器，下面列出常见的几种。

1.  :nth-child(n) 某个父元素的第n个子元素。（CSS3）

2.  :nth-child(2n) 选择偶数项。（CSS3）

3.  :nth-child(n+5) 从第五个元素开始全选。（CSS3）

4.  :nth-last-child(n) 获取倒数第n个元素。（CSS3）

5.  li:nth-of-type(n) 获取第n个li元素。

6.  li:nth-last-of-type(n) 获取倒数第n个li元素

7.  :last-child 最后一个子元素。（CSS3）

8.  :first-of-type: 相当于:nth-of-type(1)。

9.  :last-of-type: 相当于:nth-last-of-type(1)。

10. only-child: 获取只有一个子元素的子元素。

11. only-of-type: 类似于only-child，区别于不指定type时，会选择body。

12. :root 选择文档的根元素。（CSS3）

13. :empty 选择没有任何内容的元素。（CSS3）

 

14. :target选择当前被选中的锚点元素。（CSS3）

 

15. :enabled 选择所有可用的表单元素。（CSS3）

16. :disabled 选择所有不可用的表单元素。（CSS3）

17. :checked 选择所有被选中的checkbox和radio。（CSS3）

18. :not(S) 否定伪类，排除S选取其他，如li:not(.test)。（CSS3）

兼容性方面：

IE6~8 不支持CSS3属性。

FF3 不支持 :nth-child;

 

2.  个性化字体

1.   自定义字体：@font-face 加载服务器端的字体文件，让客户端显示客户端没有安装的字体。

@font-face {
    font-family: myFont;
    src: url('MyFont.ttf');
}
div {
    font-family: myFont;
}

2.   字体图标：现在常用FontAwesome图标，需引入字体文件和css文件，文档中使用照相机。

 官网地址：http://fortawesome.github.io/Font-Awesome/#

官方中文网：http://fontawesome.dashgame.com

3.   字体反射效果：box-reflect

对字体和图片都能应用，类似镜面反射的效果。目前只有webkit内核的浏览器支持，不过该属性对布局无影响。

语法：box-reflect: 方向间距 渐变效果;

方向：blow,above,left,right;

间距：倒影和本体的间的距离。(padding会影响间距)

渐变效果：常用的又linear-gradient

例如：

-webkit-box-reflect:below 1px linear-gradient(transparent,transparent 50%,rgba(0,0,0,.3)); 

4.   字体阴影：

text-shadow:h-shadow v-shadow blur color;

h-shadow: 必须，水平阴影的位置，允许负值；

v-shadow: 必须，垂直阴影的位置，允许负值；

blur: 可选，模糊的距离；

color: 可选，阴影的颜色。

偏移量为0，光晕的效果。

水平偏移量和垂直偏移量相同，浮雕的效果。

5.   多列属性：

column-count:定义分列数量。

column-gap:定义每一列中间的宽度。

column-rule: 定义分栏的中间样式。一般还有：

       dotted点状；

       dashed虚线；

       solid实线；

       double双线；

       groove3D grooved

       ridge3D ridged

       inset3D inset

       outset3D outset

另外，IE和Opera支持该属性 FF和webkit内核的需要加前缀，IE9以前的版本不支持。

例如：

    column-count:3;
    column-gap:30px;
    column-rule:1px dashed black;
    -webkit-column-count:3;
    -webkit-column-gap:30px;
    -webkit-column-rule:1px dashed black;
    -moz-column-count:3;
    -moz-column-gap:30px;
    -moz-column-rule:1px dashed black;

6.   文本溢出：

text-overflow:当文字内容超出该区域时的处理。

值：clip修建文本。

ellipsis 显示省略号来代替被修建的文本。

string 使用给定的字符串来代表被修建的文字。

3.  背景和图片

1.  背景图片大小：

background-size: 设置背景图片的大小，可以写成background-size:80px,60px;也可指定效果值。

background-size:contain;效果为横向铺满，纵向自动。

效果可写为background-size: 100% auto;两者等价。

background-size:cover;效果为纵向铺满，横向自动。

注意：background-size一定要在制定背景图片后使用，否则无效。

2.  origin和clip

background-origin指定图片的起始位置，他有三个值：border-box，padding-box，content-box。

border-box指定图片从父级元素的border处开始显示，如图。

padding-box指定图片从父级元素的padding处开始显示：

content-box指定图片从父级元素的内容处开始显示：

background-clip说明的是背景图片的显示区域，值也是上述三个。

为了更好地理解上述两个属性的区别，先设置

background-origin:border-box;background-clip:content-box;

可意看到，位于border-box和padding-box区域的图片没有显示，只有content-box区域的图片显示。也就是说，origin控制图片从哪显示，clip控制图片显示哪部分。

3.