級(jí)聯(lián)樣式表在13年前被引入，而且被廣泛使用的CSS 2.1標(biāo)準(zhǔn)在11年前被創(chuàng)建，顯然我們現(xiàn)在已經(jīng)與當(dāng)年相差千里了。相當(dāng)了不起的是期間網(wǎng)站開(kāi)發(fā)有了多少進(jìn)步——事實(shí)上，我們也無(wú)法想象。

　　為什么會(huì)這樣呢，當(dāng)提到CSS的時(shí)候，過(guò)去我們是如此的不情愿和害怕嘗試？為什么我們還要使用討厭的hack和依賴JavaScript的技術(shù)來(lái)寫(xiě)樣式？為什么我們不能利用豐富的CSS3 特性和現(xiàn)代瀏覽器中可用的工具 并將我們的設(shè)計(jì)品質(zhì)帶到下一個(gè)等級(jí)？

　　是時(shí)候在我們的項(xiàng)目中引入CSS3 特性了，不用害怕逐漸在我們的樣式表中加入css3特性和選擇器會(huì)出問(wèn)題。讓我們的客戶意識(shí)到CSS3的優(yōu)勢(shì) (而且讓舊瀏覽器更快的消失)是我們力所能及的事情——我們應(yīng)該這樣做，特別是在它能夠讓網(wǎng)站更加靈活并減少開(kāi)發(fā)和維護(hù)成本的時(shí)候。

　　使用瀏覽器專有屬性

　　為了使用大部分CSS3特性，我們不得不與原來(lái)的屬性一起使用生產(chǎn)商專有擴(kuò)展。原因是直到現(xiàn)在，大部分瀏覽器只支持部分CSS3屬性。而且不幸的是，一些屬性甚至到最后都可能不被W3C推薦，所以通過(guò)指定瀏覽器專有屬性，將他們與標(biāo)準(zhǔn)屬性區(qū)分開(kāi)來(lái)是很重要的(然后在他們是多余的的時(shí)候使用符合標(biāo)準(zhǔn)的樣式將之覆蓋)。

　　當(dāng)然，這種方法的劣勢(shì)是，將導(dǎo)致一個(gè)雜亂的樣式表和網(wǎng)站在瀏覽器之間的表現(xiàn)不一致。畢竟，我們不想在我們的樣式表中重拾私有瀏覽器hack的需求。InterNETExplorer的臭名昭著的marquee、blink以及其它標(biāo)簽在大量樣式表中被應(yīng)用，并在20世紀(jì)九十年代成為一個(gè)傳奇；它們依然讓現(xiàn)存的很多網(wǎng)站（在其他瀏覽器中）表現(xiàn)不一致甚至難以閱讀。而我們現(xiàn)在也不想將我們自己置于同樣的境地，對(duì)吧？

　　然而，網(wǎng)站不需要在所有的瀏覽器中看起來(lái)必須嚴(yán)格的一致。有的時(shí)候在某個(gè)瀏覽器中使用私有屬性來(lái)實(shí)現(xiàn)特定的效果是可行的。

　　最常見(jiàn)的私有屬性是用于Webkit核心瀏覽器的(比如, Safari)，它們以-webkit-開(kāi)始，以及Gecko核心的瀏覽器(比如, Firefox)，以-moz-開(kāi)始，還有Konqueror(-khtml-)、Opera (-o-) 以及InterNET Explorer(-ms-)都有它們自己的屬性擴(kuò)展（目前只有IE8支持-ms-前綴）

　　作為專業(yè)的設(shè)計(jì)師，我們不得不注意：使用這些私有屬性將讓我們的樣式表不能通過(guò)驗(yàn)證。所以目前將他們放到最終版的樣式中是少見(jiàn)的。但是在某種情況下，比如試驗(yàn)或?qū)W習(xí)，我們至少可以考慮將他們和標(biāo)準(zhǔn)的CSS屬性一起寫(xiě)到一個(gè)樣式表中。

　　1. 選擇器

　　CSS選擇器是個(gè)難以置信地強(qiáng)大的工具：它們?cè)试S我們?cè)跇?biāo)簽中指定特定的HTML元素而不必使用多余的class、 ID或JavaScripts。而且它們中的大部分并不是CSS3中新添加的，而是沒(méi)有被得到應(yīng)有的廣泛應(yīng)用。如果你在嘗試實(shí)現(xiàn)一個(gè)干凈的、輕量級(jí)的標(biāo)簽以及結(jié)構(gòu)與表現(xiàn)更好的分離，高級(jí)選擇器是非常有用的。它們可以減少在標(biāo)簽中的class和ID的數(shù)量并讓設(shè)計(jì)師更方便的維護(hù)樣式表。

　　屬性選擇器

　　三個(gè)新的屬性選擇器被添加到CSS3：

　　◆de>[att^="value"]de>

匹配包含以特定的值開(kāi)頭的屬性的元素

　　◆de>[att$="value"]de>

匹配包含以特定的值結(jié)尾的屬性的元素

　　◆de>[att*="value"]de>

匹配包含含有特定的值的屬性的元素

　　值的屬性的元素

　　tweetCC使用一個(gè)屬性選擇器來(lái)指定有title屬性并以字符“tweetCC”結(jié)尾的鏈接:

   1. a[title$="tweetCC"] {  
   2. position: absolute;  
   3. top: 0;  
   4. right: 0;  
   5. display: block;  
   6. width: 140px;  
   7. height: 140px;  
   8. text-indent: -9999px;  
   9. }         

        

        
        
      
        
it知識(shí)庫(kù)：用CSS 3將你的設(shè)計(jì)水平帶入下個(gè)高度，轉(zhuǎn)載需保留來(lái)源！
        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。