内容生成器
一,内容生成器: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(规定列之间的中间分割线宽度、样式和颜色规则)。函数