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

　　一、鏈接的四種樣式

　　二、將鏈接轉換為塊狀

　　三、用css制作按鈕

　　四、首字下沉

　　一、超鏈接的四種樣式

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

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

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

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

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

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

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

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

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

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

　　從上圖中可以看出，插入的超鏈接默認是藍色來(lái)下劃線(xiàn)的，這是標簽的默認樣式所致，下來(lái)我們在css樣式中定義

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

　　生成的源代碼如下：

　　注意：四種狀態(tài)的順序一定不能顛倒，否則有些不生效

　　二、將鏈接轉換為塊級元素

　　鏈接在默認狀態(tài)下是內聯(lián)元素，轉換為塊級元素后可以獲得更大的點(diǎn)擊區域，可以設置寬度和高度，將鏈接轉換為塊狀，只需增加一個(gè)display:block的css屬性即可。西安網(wǎng)站建設推薦閱讀>>> 橫向導航菜單-Web標準(div+css)教程，

　　a { display: block; height: 30px; width: 100px; line-height: 30px; text-align: center; background: #CCC; }

　　這樣設置的結果是全局a都執行這個(gè)樣式顯示，下面設置一下鼠標劃過(guò)時(shí) 的狀態(tài)，其它幾種狀態(tài)設置方法相同

　　代碼如下：

　　三、用css制作按鈕

　　學(xué)會(huì )了把超鏈接轉換為塊級元素，想制作個(gè)css按鈕簡(jiǎn)直太簡(jiǎn)單了，只需在上一步的基礎上增加一個(gè)按鈕的背景圖片即可實(shí)現。下面以制作淘寶網(wǎng)首頁(yè)的免費注冊按鈕來(lái)講解，設置最常用的默認樣式和鼠標移上時(shí)的樣式，如下圖

　　首先需要準備默認狀態(tài)和鼠標劃過(guò)狀態(tài)的圖片如下：

　　修改之前的html如下，然后重新定義css樣式：

　　<p><a href="#">免費注冊</a></p>

　　代碼如下：

　　本例中運用到了背景圖片，有關(guān)背景圖片的詳細運用將在下一節中講解

　　四、首字下沉

　　首字下沉是css偽類(lèi)上的又一個(gè)運用，它可以直接通過(guò)css樣式表向某個(gè)選擇器中的文本首字母添加特殊的樣式，而不需要把首字添加一個(gè)標簽或通過(guò)程序來(lái)實(shí)現，今天以制作word里的首字下沉為例來(lái)講解，應用如下偽元素：

　　:first-letter

　　在頁(yè)面中添加如下一段內容，只用設置樣式就可以實(shí)現首字下沉了：

　　<p>標準之路[www.aa25.cn]提供DIV+CSS教程,DIV+CSS視頻教程,web2.0標準,DIV+CSS布局入門(mén)教程,網(wǎng)頁(yè)布局實(shí)例,css布局實(shí)例,div+css模板,div+css實(shí)例解析,網(wǎng)站重構，網(wǎng)頁(yè)代碼,水晶圖標,幻燈廣告圖片.教程適合初學(xué)者循序漸進(jìn)學(xué)習!</p>

　　為了便于觀(guān)察效果，我們設置p的樣式如下：

　　p { width: 400px; line-height: 1.5; font-size: 14px; }

　　然后設置p:first-letter的樣式

　　西安做網(wǎng)站推薦閱讀>>> 下拉及多級彈出菜單-Web標準(div+css)教程，

　　代碼如下：

　　文章出處：標準之路 編輯：楊雨晨思