第五章：超鏈接偽類(lèi)

　　今天我們開(kāi)始學(xué)習(xí)《十天學(xué)會(huì)web標(biāo)準(zhǔn)(div+css)》超鏈接偽類(lèi)，包含以下內(nèi)容和知識(shí)點(diǎn)：

　　一、鏈接的四種樣式

　　二、將鏈接轉(zhuǎn)換為塊狀

　　三、用css制作按鈕

　　四、首字下沉

　　一、超鏈接的四種樣式

　　本來(lái)計(jì)劃這節(jié)課放到第九章中講解，但下邊的章節(jié)都涉及到了，所以提前來(lái)學(xué)習(xí)一下，上節(jié)課講解的內(nèi)容比較多，這節(jié)課就少講些，只要理解了偽類(lèi)，就輕松多了。

　　超鏈接可以說(shuō)是網(wǎng)頁(yè)發(fā)展史上一個(gè)偉大的發(fā)明，它使得許多頁(yè)面相互鏈接從而構(gòu)成一個(gè)網(wǎng)站。說(shuō)到超鏈接，它涉及到一個(gè)新的概念：偽類(lèi)，我們先看下超鏈接的四種樣式：

　　a:link {color: #FF0000} /* 未訪問(wèn)的鏈接 */

　　a:visited {color: #00FF00} /* 已訪問(wèn)的鏈接 */

　　a:hover {color: #FF00FF} /* 鼠標(biāo)移動(dòng)到鏈接上 */

　　a:active {color: #0000FF} /* 選定的鏈接 */

　　以上分別定義了超鏈接未訪問(wèn)時(shí)的鏈接樣式，已訪問(wèn)的鏈接樣式，鼠標(biāo)移上時(shí)鏈接樣式和選定的鏈接樣式。之所以稱(chēng)之為偽類(lèi)，也就是說(shuō)它不是一個(gè)真實(shí)的類(lèi)，正常的類(lèi)是以點(diǎn)開(kāi)始，后邊跟一個(gè)名稱(chēng)，而它是以a開(kāi)始后邊跟個(gè)冒號(hào)，再跟個(gè)狀態(tài)限定字符；比如第三個(gè)a:hover的樣式，只有當(dāng)鼠標(biāo)移動(dòng)到該鏈接上時(shí)它才生效，而a:visited只對(duì)已訪問(wèn)過(guò)的鏈接生效。偽類(lèi)使得用戶(hù)體驗(yàn)大大提高，比如我們可以設(shè)置鼠標(biāo)移上時(shí)改變顏色或下劃線等屬性來(lái)告知用戶(hù)這個(gè)是可以點(diǎn)擊的，設(shè)置已訪問(wèn)過(guò)的鏈接的顏色變灰暗或加刪除線告知用戶(hù)這個(gè)鏈接的內(nèi)容已訪問(wèn)過(guò)了。

　　下面來(lái)做一個(gè)默認(rèn)狀態(tài)下是藍(lán)色，鼠標(biāo)放上是紅色加下劃線，選定（按下）時(shí)為紫色，已訪問(wèn)過(guò)為灰色加刪除線的實(shí)例來(lái)講解一下。首先插入兩個(gè)帶超鏈接的內(nèi)容：

　　<p><a href="#">這里是鏈接</a></p>

　　<p><a href="10.html">這里也是鏈接</a></p>

　　從上圖中可以看出，插入的超鏈接默認(rèn)是藍(lán)色來(lái)下劃線的，這是標(biāo)簽的默認(rèn)樣式所致，下來(lái)我們?cè)?/span>css樣式中定義

　　設(shè)置完a:link的樣式后，下面分別設(shè)置a:visited ，a:hover ，a:active的樣式