6.26学习笔记

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

 在前面的课程中我们讲过了如何使用before伪元素和after伪元素在页面中的元素

前或者后加入内容，而插入的内容是以content属性来定义的。
before伪元素和after伪元素在CSS2.0的时候就已经被添加，从CSS2到CSS3-
直都在对这两个选择器进行改良和扩展，从而使得我们的before伪元素和after伪
元素的功能越来越强大。
课后目标:
能够熟练的使用before伪元素和after伪元素在页面中插入文字、图像、项目编号
等等。
1、使用选择器插入内容
在CSS2中，使用before选择器在元素前面插入内容，使用after在元素后面插入
内容，在选择器content属性中定义要插入的内容。
例如对H2使用before选择器在H2的前面插入文字“Title”。

并且我们还可以给他定义样式，进行美化操作。
比如我们给“Title”的文字设置为白色，加上绿色的背景，内边距上下1像素左右
5像素，外边距右边5像素，当然还可以设置他的字体等等。

1-2、排除一些不需要插入内容的承素
使用content属性的追加一个none属性值。
比如。

2、插入图片文件
使用before或者after除了可以在元素前后插入文字之外还可以插入图片。
在插入图片是需要使用URL指定图片的路径，比如在标题前插入- -张图片!
比如。

2、插入图片文件的好处
节省开发人员的工作量，比如可以通过类的方式来进行不同标题图片的遍加!
比如我们给标题定义一个“hot”“digest"分别来调用一张站的图标个顶的小图
标!

这是标题测试

I

这是标题测试

这是标题测试

这是标题测试

这是标题测试

1、在多个标题前加.上连续编号
在content属性中使用counter属性来正对对个项目追加连续的编号.
使用方法:
元素:before{
content:counter(计数器);
}
使用计数器来计算编号，计数器可以任意命名。
除了使用计数器，还需要在元素的样式中追加对元素的(counter-increment) 属性的指定为
content民性值中所指定的计数器名称。
元素{
counter-increment: content属性值中所指定的计数器名称
}
2、在项目编号中追加文字
h1:berore{
content: '第’counter ( content属性值中所指定的计数器名称) '章;
变成另一种效果!“第一章、第二章…“
3. 指定编号的样式
比如给他在编号后面带一个“。”文字，并且设置编号的颜色为绿色，字体大小42像素。
h1:before{
content: counter ( content属性值中所指定的计数器名称)出;
color:green;
font-size:42px;
}
变成另一种效果!“第一章、第二章…”
4、指定编号的种类
before和after不仅可以追加数字编号，还可以追加字母编号或者罗马数字编号。
content: counter (计数器名,编号种类)
可以使用ist-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字符类型(使用双引号(")的时候需要使用转义字符“\”)
示例:

标题