css中内容生成器

一，内容生成器：content

补充before和after伪类选择器：

1）:将内容添加到某个选择器定义的单个或者多个元素的每一个实例之前或者之后

2）与before选择器配合使用（同理大家想下会不会有after？）；

content的作用：

1，作用：在被选元素的内容前面插入内容；

2，用法：使用content属性指定要插入的内容；

3，可以设置插入内容的样式；

content的使用作用：对HTML内容修饰；

常用的值：url：添加图像；

文本；

计数器：？

二，计数器：（引导语，大家之前如果想实现给无序列表前面加序号怎么处理？？？使用list-style-type：的decimal值。现在呢，咱们要get一个新技能用计数器counter-reset属性实现和它相同的效果）

1），counter-reset属性：

作用：设置某个选择器出现次数的计数器的值，默认为 0。利用这个属性可以设置或重置为任何值，可以是正值或负值。如果没有提供 number，则默认为 0。

2），使用注意点：

如果使用display: none，则无法重置计数器。如果使用visibility: hidden，则可以重置计数器。

3），必须结合counter() 函数和counter-increment 属性使用

a，counter（）函数：

counter() 函数用于为指定计数器创建计数字符串；

写法：语法为：counter(name) ：name 为计数器的名称

b，counter-increment 属性：counter-increment：有三个值：none，id number，inherit（规定应该从父元素继承 counter-increment 属性的值） 属性设置某个选取器每次出现的计数器增量。默认增量是 1。

写法：counter-increment:id number;（id 定义将增加计数的选择器、id 或 class。

number 定义增量。number 可以是正数、零或者负数。）

demo:

HTML:

<h1>1111</h1>

<h1>2222</h1>

<h1>3333</h1>

CSS:

body{

counter-reset: demo;

}

h1:before{

content: "第" counter(demo)"章" ":";

}

h1{

counter-increment: demo;

}

三，多列：

1，（引导语：让文本呈现多列显示。我们知道，当一行文字太长时，读者读起来就比较费劲，有可能读错行或读串行；人们的视点从文本的一端移到另一端、然后换到下一行的行首，如果眼球移动浮动过大，他们的注意力就会减退，容易读不下去。所以，为了最大效率的使用大屏幕显示器，页面设计中需要限制文本的宽度，让文本按多列呈现，就像报纸上的新闻排版一样。）

2，之前换行用什么？？？

答：长单词换行

word-wrap : normal/break-word;

文本换行

word-break : normal/break-all/keep-all;

3，不管想让一段文本呈多少列显示，你需要的只是两个属性：column-count（列的具体个数） 和 column-width（列宽）column-gap（列之间的缝隙间隔宽度）column-rule（规定列之间的中间分割线宽度、样式和颜色规则）。