css内容生成

回复

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

一.内容生成：

通过 css 向已有的元素上增加新的文本(图片)内容

选择器:

1. :before 向匹配元素之前增加生成的内容，定位到匹配元素开始的位置

2. :after 向匹配元素之后增加生成的内容

eg:

div:before{}

p:after{}

属性:content

作用:配合 :before,:after伪元素插入生成的内容

div:before{

content:内容;

}

常用取值：

字符串：普通文本

url：图像

计数器

<!DOCTYPE html>
<head>
<title> 内容生成 </title>
<meta charset="utf-8" />
<style>
p:before{
content:"A:";
}
h3:before{
content:"B:";
}
</style>
</head>
<body>
<p>段落一</p>
<h3>段落二</h3>
<p>段落三</p>
<h3>段落四</h3>
</body>
</html>
3.计数器：通过css定义一个计数器，在其他元素中可以使用该计数器生成的数字属性： 1.coounter-reset：作用：用于定义计数器并设置初始值，如果不设置初始值，默认为零，如果设置的话，可以设置为正、负、零选择器{ counter-reset:counter1 10; } 选择器{ counter-reset:counter1 10 counter2 20; } 注意：如果整个页面的任何元素都想使用计数器的话，最好将其定义在body中，切忌将计数器定义在某个元素中(除body外)，如果这样定义，再使用时，永远是初始值 2.counter-increment: 作用：设置每次使用计数器时的增量，默认值为1 属性值：可以为正(递增)，也可以为负(递减) 注意：哪个标签使用，在哪个标签中声明 counter-increment属性语法： counter-increment:计数器名称，增量值； div{ counter-increment:counter1 10; } 函数： counter(counterName) 函数作用:使用计数器创建出来的数字文本 counterName: 计数器名称
<!DOCTYPE html>
<head>
<title> 计数器 </title>
<meta charset="utf-8" />
<style>
/**********1.定义计数器**************/
body{
counter-reset:chp 0;
}
/**********2.设置计数器增量**************/
p{
counter-increment:chp 1;
}
/**********3.使用计数器**************/
p:before{
content:"第"counter(chp)"章";
padding-right:10px;
}
</style>
</head>
<body>
<p>天涯思君不可忘</p>
<p>武当山顶松柏长</p>
<p>宝刀百炼生玄光</p>
<p>字作丧乱意彷徨</p>
<p>皓臂似玉梅花妆</p>
</body>
</html>