欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS中的content屬性使用教程

鑫空間,鑫生活   發(fā)布時間：2016-05-12 11:52:11   作者：張鑫旭   我要評論
content屬性最基本的功能是處理文本,但實際能用到content的地方卻非常多,比如圖標和url處理,以及下面將要提到的計數(shù)器例子,接下來就總結一下CSS中的content屬性使用教程:

Content屬性應該算是使用最常用的一個css屬性之一吧，比如我們創(chuàng)建一個聊天氣泡、超鏈接的立體翻轉特效、添加圖標。都要使用到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.     /* 前後加入~~字串 與網(wǎng)址串接*/  
  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）：
2016512114431092.png (385×97)

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)函數(shù)將選擇器對象的屬性（包括自定義屬性）作為字符串返回，如果為空則返回空字符串。X的大小寫依賴于HTML的文檔類型。本站文章的超鏈接就是使用到了這個函數(shù)
代碼：
 

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.     }    

 
計數(shù)器
       
counter相當于一個變量，根據(jù)css規(guī)則的增加以跟蹤使用次數(shù)。它有三種形式：
counter-reset重置計數(shù)器默認值
counter-increment增加計數(shù)器
counter()和counters()獲取計數(shù)
用法：
 

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
必須定義與計數(shù)元素的父元素。默認值是從0開始的，我們可以增加一個參數(shù)來定義默認值，如counter-reset:photocount 5;，定義從5開始
       
counter-increment
一般跟隨在counter()后面，用于增加計數(shù)值，默認的步長值是”1″，同樣我們可以改變它，如counter-increment:photocount 2;定義步長為2
       
counter()和counters()
counter(name,style)計數(shù)的默認值是十進制，我們可以改變它的樣式比如：content:counter(photocount,upper-alpha);
               
注：style值同list-style
counters(name,string,style)對于計數(shù)器嵌套則必須使用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.     }    

相關文章

最新評論