标签：文件 并且 循环 ... 用户 incr 就是 break exp
在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规则里使用
标签：文件 并且 循环 ... 用户 incr 就是 break exp
原文地址：https://www.cnblogs.com/YamLilac-1101/p/10461570.html
