CSS3属性——（一）

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

[att*=val]属性选择器

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

[att^=val]属性选择器

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

[att$=val]属性选择器

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

 伪类选择器以及伪元素：

1.类选择器

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

p.left{text-align:left}

p.rigth{text-align:right}

2.伪类选择器

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

最常见的伪类选择器

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

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

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

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

3.伪元素选择器

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

使用方法：

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

与类配合使用

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

4.在CSS中，主要有四个伪元素选择器

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

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

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

4）after伪元素选择器：用于在某个元素后插入内容

5.结构性伪类选择器root、not、empty和target

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

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

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

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

6.选择器first-child、last-child、nth-child和nth-last-child

1）first-child选择器：单独指定第一个子元素的样式

2）last-child选择器：单独指定最后一个子元素的样式

3）nth-child选择器：

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

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

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

4）nth-last-child选择器：

nth-child（n）选择器匹配倒数数下来第N个子元素

nth-child（odd）选择器匹配倒数数下来第奇数个子元素

nth-child（even）选择器匹配倒数数下来第偶数个子元素

7.选择器net-of-type和nth-of-type

在CSS中用来避免子元素有不同类型，用的时候只针对同类型的子元素进行计算

8.循环使用样式

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

9.only-child选择器

只对含有唯一一个子元素的部分起作用，当有大于一个子元素的部分不能起作用

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

1.使用选择器插入内容

在CSS2中使用before选择器在元素前面插入内容，使用after在元素后面插入内容，在选择器content属性中定义要插入的内容，还可以给他定义样式，进行美化颜色背景字体样式等。

适用方法：

<style type="text/css">

　　h2:before{

　　　　content:"Title（希望插入的内容）";

　　}

　　</style>

2.插入图片文件

使用before或者after除了可以在元素前后插入文字之外还可以插入图片。在插入图片是需要使用URL指定的图片路径。

使用方法：

<style type="text/css">

　　h2:before{

　　　　content:url(1.gif);

　　}

</style>

3.插入项目编号

1）在多个标题前加上连续编号：在content属性中使用counter属性来对多个项目追加连续的编号。

使用方法：

元素：before{

content:counter（计数器）；

}

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

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

元素{

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

}

2）在项目编号中追加文字

h1:before{

content:"第"counter(content属性值中所指定的计数器名称)"章"

}

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

3）指定编号的样式

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

h1:before{

content:counter（content属性值中指定的计数器名称）‘.’;

color:green;

font-size:42px;

}

变成另一种效果！“1./2./...”

4）指定编号的种类

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

content:counter（计数器名，编号种类）

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

h1:before{

content:counter（计数器名，编号种类）'.';

color:green;

font-size:42px;

}

5）编号嵌套、重置编号

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

1）大编号中嵌入中编号

2）counter-reset属性重置编号

6）中编号中嵌入大编号

h2:before{

content:counter（大编号的计数器）'-'counter（中编号的计数器）

}

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

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

open-quote开始符号

close-quote结尾字符

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

使用方法：

<style>

h1:before{

content:open-quote;

}

h1:after{

content:open-quote;

}

h1{

quote:"(" ")";

}

</style>

文字阴影与自动换行

1.text-shadow属性的使用方法

在CSS3我们可以使用text-shadow属性给页面上的文字添加阴影效果。

1）text-shadow的使用方法：

text-shadow：length length length color

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

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

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

color表示的是阴影的颜色。

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

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

4）阴影的颜色：color可以放在三个参数之前，也可以之后。没有指定颜色时，会使用文字color的颜色值

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

2.word-break浏览器自动换行

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

normal：使用浏览器默认的规则

keep-all：智能在半角空格或者连字符处理换行

break-all：允许在单词内换行

用法示例：

<style>

div {

　　word-break:keep-all

 }

</style>

3.长单词与URL地址自动换行

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

使用方法：

div {

　　word-wrap：break-word；

 }

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

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

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

服务器端字体和@font-face属性

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

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

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

@font-face{

font-family:webFont;

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

}

font-family属性值中使用webfont来声明字体文件的格式，可以省略文件格式的声明，单独使用src属性值。可以使用的字体文件格式：otf/ttf/eot

2.定义斜体或粗体字体

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

3.显示客户端本地的字体

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

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

用法示例：

@font-face{

font-family:Arial;

src:local('Arial');

}

4.属性值的指定

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

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

取值：normal不使用斜体/italic使用斜体/oblique使用倾斜体inherit从父元素继承

3）font-variant:设置文本是否大小写

取值：normal使用浏览器默认值/small-caps使用小型大写字母/inherit从父元素继承

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

取值：normal/bold/bolder/lighter

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

5）font-stretch：设置文本是否横向拉伸变形。

取值：normal：正常文字宽度

wider：把伸展比例设置为更进一步的收缩值

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

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

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

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

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

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

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

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