CSS中的content特性应用实例教程

日期:2021-03-18 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

Content特性应当算是应用最常见的1个css特性之1吧,例如大家建立1个闲聊气泡、超连接的立体式旋转殊效、加上标志。都要应用到content特性,自然这个特性要融合:before和:after伪类应用。下面详尽详细介绍它的用法。


标识符串
能够加上随意的标识符串,用括号包围着。此外可使用UTF⑻独特标识符(哪些独特标识符能用查询这里),以\开始。以下
這是1個在元素前面或後面插进内容的方式(配搭 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特性的值除应用文字值外,还能够应用标识的1些特性值,方式是attr(),参照以下编码:

CSS Code拷贝內容到剪贴板
  1. a.content:after {   
  2.    contentattr(href);   
  3. }  
XML/HTML Code拷贝內容到剪贴板
  1. <a class="content" href="http://www.zhangxinxu.com/">此标识的href值是:</a>  

結果以下截图(截自Firefox3.6):

URI
应用url()能够加载外界資源,关键是1些标志和照片,假如資源不能以显示信息有的访问器会忽视它,有的会显示信息取代文字。
       
编码:

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

但是导入的照片是不可以更改宽高的,务必预先设置好。笔者1般应用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⑵87×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⑵87×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非常于1个自变量,依据css标准的提升以追踪应用次数。它有3种方式:
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⑴0.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刚开始的,大家能够提升1个主要参数来界定默认设置值,如counter-reset:photocount 5;,界定从5刚开始
       
counter-increment
1般追随在counter()后边,用于提升计标值,默认设置的步长值是”1″,一样大家能够更改它,如counter-increment:photocount 2;界定步长为2
       
counter()和counters()
counter(name,style)计数的默认设置值是10进制,大家能够更改它的款式例如: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.     }    
上一篇:深层次浅出学习培训堆叠款式表 返回下一篇:没有了