css中關於超連結的部分學習心得，css超連結學習心得

css中關於超連結的部分學習心得，css超連結學習心得

在《精通CSS》一書中，作者對於超連結部分的解說。
1、在CSS中，兩個規則的優先順序一樣高的時候，後定義的規則優先，所以對於超連結的幾個偽選取器，一般的順序是：a:link，a:visited，a:hover，a:focus，a:active；這個不用專門去記下來，當你做上幾個簡單的例子之後就會記下來了，實踐出真知啊~
2、可以用簡單的圖片來做出更炫的CSS超連結效果來，例如底線。還可以做一些特殊的表徵圖來表達串連的與眾不同與樣式。
3、在CSS3中，可以通過子字串匹配來尋找元素，更省力地完成更靈活的連結樣式，例如尋找以文本http:開頭的所有連結：

a[href^="http:"]{     background:url() no-repeat right top;    }

這樣就可以反白所有的外部連結。當然，對於自己網站的連結，你可以專門設定來取消：

a[href^="http://www.yoursite.com"],a[href^="http://yoursite.com"]{       background-image:none;    }

還有你可以給用特殊樣式表明下載的文檔和提要：

a[href＄=".pdf"]{      background:url(img/pdflink.gif) no-repeat right top;}

(其作用是將帶pdf關鍵字的全部附上特定的標識)

4、建立按鈕連結
簡單的就是用display：block，將你的行級元素轉換成塊級，然後給其背景顏色的變化來實現按鈕的連結和變化；
還有一種就是通過事先繪製好的按鈕表徵圖的變化，來實現映像翻轉效果；
Pixy樣式翻轉：將所有的按鈕繪製在一張圖片上，然後通過background-position來實現在不同的狀態下顯示不同的部分，這樣的好處是，可以將多個映像的伺服器調用數量大大減少；
受Pixy的啟發，CSS精靈應運而生，其想法是將一個網站的導航等需要大量圖片的內容全部放在一個圖片上，對於大型網站而言，這可以大大降低伺服器損耗。
5、通過CSS3的text-shadow、box-shadow和border-radius等屬性，可以實現按鈕效果，這樣可以避免加圖片進去。
6、CSS還有非常強大的功能，就是可以通過display屬性和hover屬性，設定諸如工具提示、資料卡（例如知乎等網站的資料卡彈出）、以及商城的二級菜單等更為豐富多彩的效果，而不像title屬性內建的提示那樣呆板。