Content属性应该算是使用最常用的一个css属性之一吧,比如我们创建一个聊天气泡、超链接的立体翻转特效、添加图标。都要使用到content属性,当然这个属性要结合:before和:after伪类使用。下面详细介绍它的用法。


字符串
可以添加任意的字符串,用括号包围。另外可以使用UTF-8特殊字符(哪些特殊字符可用查看这里),以\开头。如下
這是一個在元素前面或後面插入內容的方法(搭配 selector:before和selector:after)
HTML:

XML/HTML Code复制内容到剪贴板
  1. <a class="yahoo" href="http://www.yahoo.com.tw">Yahoo</a>  
  2. <a class="google" href="http://www.google.com">Google</a>  

CSS:

CSS Code复制内容到剪贴板
  1. .google:after {   
  2.     /* 前後加入~~字串 與網址串接*/  
  3.     content:"~~" attr(href)  "~~"  
  4. }  

运行结果就很直观了。content属性的值除了使用文本值外,还可以使用标签的一些属性值,方法是attr(),参见如下代码:

CSS Code复制内容到剪贴板
  1. a.content:after {   
  2.    content: attr(href);   
  3. }  
XML/HTML Code复制内容到剪贴板
  1. <a class="content" href="http://www.zhangxinxu.com/">此标签的href值是:</a>  

结果如下截图(截自Firefox3.6):
CSS中的content属性使用教程

URI
使用url()可以载入外部资源,主要是一些图标和图片,如果资源不可以显示有的浏览器会忽略它,有的会显示替代文本。
       
代码:

CSS Code复制内容到剪贴板
  1. p:before{      
  2.     content:url(http://yeebing.u.qiniudn.com/wp-content/themes/expound/images/favicon.ico);      
  3.     }    

不过导入的图片是不能改变宽高的,必须预先设定好。笔者一般使用background载入图片,然后使用background-size调整尺寸。如下图,前者使用content载入图片,无法改变图片宽高,后者是是使用background载入图片的效果。
       
代码:

CSS Code复制内容到剪贴板
  1. p:before{      
  2.     content:url(http://yeebing.u.qiniudn.com/wp-content/uploads/2013/11/Avatar_by_DeMoN8EyE-287×300.png);      
  3.     display:block;      
  4.     width:80px;      
  5.     height:80px;      
  6.     overflow:hidden;      
  7.     }      
  8. p:after{      
  9.     content:“”;      
  10.     display:block;      
  11.     width:80px;      
  12.     height:80px;      
  13.     background-image:url(http://yeebing.u.qiniudn.com/wp-content/uploads/2013/11/Avatar_by_DeMoN8EyE-287×300.png);      
  14.     background-size:80px 80px;      
  15.     overflow:hidden;      
  16.     }    

 
HTML元素属性
attr(x)函数将选择器对象的属性(包括自定义属性)作为字符串返回,如果为空则返回空字符串。X的大小写依赖于HTML的文档类型。本站文章的超链接就是使用到了这个函数
代码:
 

CSS Code复制内容到剪贴板
  1. p:before{      
  2.     content:attr(title)“:”;      
  3.     }    

引号
open-quote和close-quote
这两个值被来自于quotes属性设置的字符替代
       
用法:
HTML

XML/HTML Code复制内容到剪贴板
  1. <p lang=“en”>English</p>     
  2. <p lang=“zh”>中文</p>    

 
CSS

CSS Code复制内容到剪贴板
  1. p:lang(zh){quotes: “«” “»” “‹” “›” }      
  2. p:lang(en){quotes: ’“‘ ’”‘ “‘” “‘” }      
  3. p:before{      
  4.     content:open-quote;      
  5.     }      
  6. p:after{      
  7.     content:close-quote;      
  8.     }    

 
注:元素要指定语言要使用lang属性
no-open-quote和no-close-quote
是不是对刚才quotes后面附加的“‘” “‘” 以及“<” “>”的用法有点疑惑呢?其实在其父元素上使用no-open-quote和no-close-quote就可以使用到后面那两个引号了。no-open-quote和no-close-quote旨在减少引号的嵌套,如下
       
代码:
HTML

XML/HTML Code复制内容到剪贴板
  1. <span><p lang=“en”>English</p></span>     
  2. <span><p lang=“zh”>中文</p></span>  
     

CSS

CSS Code复制内容到剪贴板
  1. p:lang(zh){quotes: “«” “»” “‹” “›” }      
  2. p:lang(en){quotes: ’“‘ ’”‘ “‘” “‘” }      
  3. span:before{      
  4.     content:no-open-quote;      
  5.     }      
  6. span:after{      
  7.     content:no-close-quote;      
  8.     }      
  9. p:before{      
  10.     content:open-quote;      
  11.     }      
  12. p:after{      
  13.     content:close-quote;      
  14.     }    

 
计数器
       
counter相当于一个变量,根据css规则的增加以跟踪使用次数。它有三种形式:
counter-reset重置计数器默认值
counter-increment增加计数器
counter()和counters()获取计数
用法:
 

XML/HTML Code复制内容到剪贴板
  1. <ul>     
  2. <li><img src=“../Pictures/3BC850D9B55874714E0667170AE02FFE8349FFE0F1DDE_800_1200.jpg”/></li>     
  3. <li><img src=“../Pictures/7A7D77703B6EFAF4E5002D0E66FFF8380F1F49A565A91_673_1010.JPEG” /></li>     
  4. <li><img src=“../Pictures/k-10.jpg” /></li>     
  5. </ul>    
CSS Code复制内容到剪贴板
  1. ul{      
  2.     countercounter-reset:photocount;      
  3.     }      
  4. img{      
  5.     width:100px;}      
  6. li{list-style:none;      
  7.     display:inline-block;}      
  8. li:before{      
  9.     content:“图” counter(photocount);      
  10.     countercounter-increment:photocount;      
  11.     }    

counter-reset
必须定义与计数元素的父元素。默认值是从0开始的,我们可以增加一个参数来定义默认值,如counter-reset:photocount 5;,定义从5开始
       
counter-increment
一般跟随在counter()后面,用于增加计数值,默认的步长值是”1″,同样我们可以改变它,如counter-increment:photocount 2;定义步长为2
       
counter()和counters()
counter(name,style)计数的默认值是十进制,我们可以改变它的样式比如:content:counter(photocount,upper-alpha);
               
注:style值同list-style
counters(name,string,style)对于计数器嵌套则必须使用counters了,string为分割的字符,style为样式
              
代码

XML/HTML Code复制内容到剪贴板
  1. HTML   
  2. <ul>     
  3. <li>项目      
  4.     <ul>     
  5.         <li>项目</li>     
  6.         <li>项目</li>     
  7.         <li>项目</li>     
  8.     </ul>     
  9. </li>     
  10. <li>项目</li>     
  11. <li>项目      
  12.     <ul>     
  13.         <li>项目</li>     
  14.         <li>项目</li>     
  15.         <li>项目      
  16.             <ul>     
  17.                 <li>项目</li>     
  18.                 <li>项目</li>     
  19.                 <li>项目</li>     
  20.                 <li>项目</li>     
  21.             </ul>     
  22.        </li>     
  23.     </ul>     
  24. </li>     
  25. </ul>    

CSS

CSS Code复制内容到剪贴板
  1. ul{      
  2.     countercounter-reset:count;      
  3.     }      
  4. li{list-style:none;      
  5.     }      
  6. li:before{      
  7.     content:counters(count,“.”) “ ”;      
  8.     countercounter-increment:count;      
  9.     }    
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。