如何利用css3在选择器中的页面中插入所需内容-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

如何利用css3在选择器中的页面中插入所需内容

这篇文章运用简单易懂的例子给大家介绍如何利用css3在选择器中的页面中插入所需内容 ,代码非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

成都创新互联公司专注为客户提供全方位的互联网综合服务,包含不限于成都网站制作、做网站、玛多网络推广、微信平台小程序开发、玛多网络营销、玛多企业策划、玛多品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;成都创新互联公司为所有大学生创业者提供玛多建站搭建服务,24小时服务热线:18982081108,官方网址:www.cdcxhl.com

1 使用选择器来插入内容

使用after或before选择器,在选择器的content属性中定义要插入的内容,当插入内容为文字的时候,必须要在插入文字的两旁加上单引号或者双引号。

2 指定个别元素不进行插入

使用content属性的none属性值

3  插入图像文件

4  将alt属性的值作为图像的标题来显示

在content属性中通过指定“attr(属性名)”的形式 ,可以将某个属性的属性值显示出来。

img:after{
content:attr(alt);
display:block;
text-align:center;
}

5 使用content属性来插入项目编号

(1)在多个标题前加上连续编号

1、在content属性中使用counter属性值来针对多个项目追加连续编号

<元素>:before{ content:counter(计数器名);}(使用计数器来计算编号,计数器可任意命名)

2、还需要在元素的样式中追加对元素的counter-increment属性的指定,为了使用连续编号,需要将counter-increment属性的属性值值设定为before选择器或after选择器的counter属性值中所指定的计数器名。

<元素>{ counter-increment:before选择器或after选择器中指定的计数器名 }

h2:before{content:counter(mycounter);}
h2{counter-increment:mycounter;}//1、2、3.......

(2)在项目编号中追加文字

h2:before{content:‘第’counter(mycounter)‘章’;}//第1章大标题、第2章大标题.........

(3)指定编号的种类

1.用before选择器或after选择器的content属性,不仅可以追加数字编号,还可以追加字母编号或罗马数字编号。

content:counter(计数器名,编号种类)

2.可以使用list-style-type属性的值来指定编号的种类,如大写字母编号时,使用 “upper-alpha”属性,指定大写罗马字母时用“upper-roman”属性。

h2:before{content:counter(mycounter,upper-alpha)‘.’;}// A.、B.、C.、

(4)编号嵌套

h2:before{content:counter(mycounter);}//1(1、2、3...)、2(1、2、3...)、........
h2{counter-increment:mycounter;counter-reset:subcounter;}(将中编号进行重置)
h3:before{content:counter(subcounter);}
h3{counter-increment:subcounter;margin-left:40px}

(5)中编号中嵌入大编号

h3:before{content:counter(mycounter)‘-’ counter(subcounter)‘.’;}//1-1、1-2

(6)在字符串两边添加嵌套文字符号

1、可以使用content属性的open-quote属性值与close-quote属性值在字符串两边添加诸如括号、单引号、双引号之类的嵌套文字符号。

2、open-quote属性值用于添加开始的嵌套文字符号,close-quote属性值用于添加结尾的嵌套文字符号。

3、在元素的样式中使用quotes属性来指定使用什么嵌套文字符号

h2:before{  content:open-quote; }
h2:after { content:close-quote; }
h2{   quotes:"(" ")"   }//形如:   (标题)

关于如何利用css3在选择器中的页面中插入所需内容 就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


分享题目:如何利用css3在选择器中的页面中插入所需内容
转载来源:http://kswsj.cn/article/ppcess.html

其他资讯