第4章--對連接應用樣式

簡單的連接樣式

Css 的兩個特殊的選擇器，稱爲連接僞類選擇器

1.:link僞類選擇器用來尋找沒有被訪問過的連接，

2.:Visited僞類選擇器用來尋找被訪問過的連接

能夠用來對連接應用樣式的另外兩個選擇器是:HOVER和:ACTIVE（動態僞類）選擇器

：hover動態僞類選擇器用來尋找鼠標停留處的元素

:ACTIVE動態僞類選擇器用來尋找被激活的元素

選擇器的次序很是重要，若是次序反過來，鼠標停留和激活樣式就不起做用了（這是由於因爲層疊的問題形成的，當兩規則具備相同特殊性時，後定義的規則優先）

僞類連接選擇器的次序

a:link;-----a:visited,-----------------a:hover,-------------a:active;

能夠用這個LOVe:HAte這個單詞記住的使用的次序  L表明link,V表明visited,H表明hover,A表明active;

4.2讓下劃線更有趣

4.3突出顯示不一樣類型的連接

這裏沒有什麼重點，把其中的稍微有點用的東西，記錄一下

離站連接的圖標已經出現了一種約定: 一個框加一個箭頭

提一下屬性選擇器：屬性選擇器容許特定的屬性是否存在或屬性值來尋找元素。Css3擴展了的他的功能，提供了字符串匹配屬性選擇器。

字符串匹配屬性選擇器

 1.容許經過對屬性值的一部分和指定的文本進行匹配來尋找元素。

2.工做方式是使用[att^=val]屬性選擇器尋找一文本http:開頭的全部連接：

Demo:

a[href^=」http:」]{

Background:url(images/externalLink.gif) no-repeat right top:

}

可是這個有個問題，它也會選中使用絕對URL而不是相對URL的內部 連接，因此咱們須要從新設置指向本身的站點因此全部連接，

a[href^=」http:www.本身域名的連接.com」],a[href^=’http://yoursite.com’]{

Background-image:none;

}

連接本身域名的連接的刪除全部的外鏈圖標，

擴展：

對郵件連接也進行突出顯示

能夠給全部的Email 連接上添加一個小圖標

a[href^=」email:]{

Background:url(images/email,png) no-repeat right top

Pandding-right:10px;

}

顯示非標準的協議

a[href^=」aim:]{

Background:url(images/im,png) no-repeat right top

Pandding-right:10px;

}

顯示的效果：

突出顯示可下載的文檔和提要

Css也能夠幫助區分這些類型的連接，這要使用[att$=val]屬性選擇器，它尋找特定值（好比.PDF或.DOC）結尾的屬性：

pdf屬性

a[hret$=」.pdf」]{

Background:url(images/pdflink.gif) on-repeat right top;

Padding-right:10px;

}

Doc屬性

a[hret$=」.doc」]{

Background:url(images/doclink.gif) on-repeat right top;

Padding-right:10px;

}

在強調ie6和更低版本不支持屬性選擇器

4.4 建立按鈕和翻轉

Pixy樣式的翻轉

使用一個圖像並切換它的背景位置