CSS3之利用选择器和content属性在页面中插入内容

最新推荐文章于 2024-04-06 22:43:58 发布

judyge

最新推荐文章于 2024-04-06 22:43:58 发布

阅读量1.8k

点赞数

分类专栏： js与前端

js与前端专栏收录该内容

863 篇文章 5 订阅

订阅专栏

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

1. 使用选择器来插入内容：例，

h2：before{

content：‘COLUMN’;

color：white；

background-color：orange；

padding：1px 5px;

}

2. 指定个别元素不进行插入：例，

h2.sample.before{

content：none；

} --表示h2中class为sample的不插入内容--

3. 使用选择器插入图像：例，

h2：before{

content：url（mark.png）；

}

4. 使用content属性来插入项目编号：

在多个标题前加上连续编号：在content属性中使用counter属性来针对多个项目追加连续编号另外，还需要在元素的样式中追加对元素的counter-increment属性的指定，为了使用连续编号，需要将counter-increment属性的属性值设定为before选择器或after选择器的counter属性值中指定的计数器名。例，

h1：before{

content：counter（mycounter）；

}

h1{

counter-increment：mycount;

}

5. 在项目编号中追加文字：例，

h1：before{

content：‘第’counter（mycounter）'章'；

}

指定编号的种类：

content：counter（计数器名，编号种类）

upper-roman:大写罗马字母

upper-alpha:大写字母

编号嵌套：可以在大编号中嵌套中编号，在中编号中嵌套小编号。

大编号：

h1：before{

content：counter（mycounter）；

}

h1{

counter-increment：mycounter；

}

中编号：

h2：before{

content：counter（subcounter）；

}

h2{

counter-increment：subcounter；

}

在这个事例中，中标题的编号是连续的，如果想在第二个大标题里的中标题重新开始编号的话，需要在大标题中添加counter-reset属性，在这事例中counter-reset：subcounter

6. 在字符串两边添加嵌套文字符号：可以使用content属性的open-quote属性值与close-quote属性值在字符串两边添加诸如括号、单引号、双引号之类的嵌套文字符号。open-quote属性值用于添加开始的嵌套文字符号，close-quote属性值用于添加结尾的嵌套文字符号。注意，当需要添加双引号时，需要使用“\”转义字符。例，

结果：

使用选择器在页面中插入文字

[html]view plaincopy 
   
print?
 <!DOCTYPE html>  
   
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
     <meta charset="utf-8" />  
     <title></title>  
     <style type="text/css">  
         p:before  
         {  
             content: '你好,';  
             color: white;  
             background-color: orange;  
             font-family: '黑体';  
         }  
   
         p:after  
         {  
             content: ',见到你很高兴!';  
             color: white;  
             background-color: orange;  
             font-family: 黑体;  
         }  
   
         p.zhang:after  
         {  
             content: none;  
         }  
   
         p.zhang:before  
         {  
             content: none;  
         }  
     </style>  
 </head>  
 <body>  
     <p>小红</p>  
     <p class="zhang">张林</p>  
     <p>王强</p>  
 </body>  
 </html>  

在标题前插入图像文件

[html]view plaincopy 
   
print?
 <!DOCTYPE html>  
   
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
     <meta charset="utf-8" />  
     <title></title>  
     <style type="text/css">  
         h1:after  
         {  
             content: url(img.png);  
         }  
     </style>  
 </head>  
 <body>  
     <p>王强</p>  
 </body>  
 </html>  

在CSS3中，使用content属性的attr（属性名）来指定attr的值。这样可以将某个属性的属性值显示出来。

[html]view plaincopy 
   
print?
 <!DOCTYPE html>  
   
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
     <meta charset="utf-8" />  
     <title></title>  
     <style type="text/css">  
         img:after  
         {  
             content: attr(alt);  
             display: block;  
         }  
     </style>  
 </head>  
 <body>  
     <p align="center">  
         <img src="xp.png" alt="系统图片" width="200" height="200" />  
     </p>  
 </body>  
 </html>  

添加编号

[html]view plaincopy 
   
print?
 <!DOCTYPE html>  
   
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
     <meta charset="utf-8" />  
     <title></title>  
     <style type="text/css">  
         h3:before  
         {  
             content: '第'counter(count)'章';  
             color: red;  
             font-family: 黑体;  
             font-size: 24px;  
         }  
   
         h3  
         {  
             counter-increment: count;  
         }  
     </style>  
 </head>  
 <body>  
     <h3>HTML5简介</h3>  
     <h3>HTML5结构</h3>  
     <h3>多媒体播放</h3>  
     <h3>本地存储</h3>  
     <h3>表单与文件</h3>  
     <h3>新增元素</h3>  
 </body>  
 </html>  

使用before选择器或after选择器的counter属性，不但可以在编号中追回文字和设置样式，还可以为编号设置编号类型。

指定编号类型可以使用list-style-type属性，常用的编号种类介绍如下：

[html]view plaincopy 
   
print?
 <!DOCTYPE html>  
   
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
     <meta charset="utf-8" />  
     <title></title>  
     <style type="text/css">  
         h1:before  
         {  
             content: counter(count, upper-roman)'.';  
             color: red;  
             font-family: 黑体;  
         }  
   
         h1  
         {  
             counter-increment: count;  
         }  
   
         h2:before  
         {  
             content: counter(count1)'.';  
             color: red;  
             font-family: 黑体;  
         }  
   
         h2  
         {  
             counter-increment: count1;  
             margin-left: 50px;  
         }  
     </style>  
 </head>  
 <body>  
     <h1>创建网站及站点信息</h1>  
     <h2>网站建设理论</h2>  
     <h1>安装IIS服务器</h1>  
     <h2>站点管理</h2>  
     <h1>网站栏目及版块设计</h1>  
     <h2>网页文本概述</h2>  
     <h1>设计产品信息版块</h1>  
     <h2>多彩文字设计</h2>  
 </body>  
 </html>  

在符号两边嵌入文字符号

[html]view plaincopy 
   
print?
 <!DOCTYPE html>  
   
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
     <meta charset="utf-8" />  
     <title></title>  
     <style type="text/css">  
         h1:before  
         {  
             content: open-quote;  
             color: red;  
             font-family: 黑体;  
         }  
   
         h1:after  
         {  
             content: close-quote;  
             color: red;  
             font-family: 黑体;  
         }  
   
         h1  
         {  
             quotes: "《" "》";  
         }  
     </style>  
 </head>  
 <body>  
     <h1>ASP基础教程与实验指导</h1>  
     <h1>计算机组装</h1>  
     <h1>HTML5从新手到高手</h1>  
 </body>  
 </html>  

content属性主要用来插入内容，而该属性与before和after伪元素配合使用，将生成的内容放在一个元素内容的前面或后面。另外，该内容创建的框类型可以用display属性控制。
content: normal string attr() uri() counter()
normal 默认值。
string   插入文本内容。
attr()   插入元素的属性值。
uri()   插入一个外部资源（图像、声频、视频或浏览器支持的其他任何资源）
counter()   计数器，用于插入排序标识。

[html]view plaincopy 
   
print?
 <!DOCTYPE html>  
   
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
     <meta charset="utf-8" />  
     <title></title>  
     <style type="text/css">  
         .text  
         {  
             width: 400px;  
             height: 50px;  
             line-height: 50px;  
             overflow: hidden;  
             text-align: center;  
             color: #ff0000;  
             border: #993300 solid 1px;  
         }  
   
         #text_c:before  
         {  
             content: "您使用的浏览器支持content属性";  
         }  
     </style>  
 </head>  
 <body>  
     <div id="text_c" class="text">  
         ---content属性  
     </div>  
 </body>  
 </html>

judyge

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3之利用选择器和content属性在页面中插入内容

CSS3之使用选择器在页面中插入内容 1. 使用选择器来插入内容：例， h2：before{ content：‘COLUMN’; color：white； background-color：orange；
复制链接

扫一扫