十天(tiān)學(xué)會web標準(zhǔn)DIV+CSS 超(chāo)鏈接偽類，包(bāo)含(hán)以下(xià)內容和知識(shí)點：
一，鏈接的四種樣式 二，將鏈接轉換為塊狀 三，用css製作按鈕 四，首字下沉
一，超(chāo)鏈接(jiē)的(dí)四種樣式
本(běn)來計劃這節(jié)課(kè)放到第九章(zhāng)中講解(jiě)，但下邊(biān)的(dí)章節(jié)都(dū)涉(shè)及(jí)到(dào)了(liǎo)，所以(yǐ)提前來學習一下(xià)，上(shàng)節(jié)課(kè)講解的內容(róng)比較多，這節(jié)課(kè)就少(shǎo)講些，隻要(yào)理解了偽(wěi)類(lèi)，就輕(qīng)鬆多了。
超鏈接可(kě)以說(shuō)是(shì)網(wǎng)頁發(fā)展史(shǐ)上一(yī)個偉大的(dí)發(fā)明，它(tā)使(shǐ)得許多頁(yè)麵相互鏈接從(cóng)而構成一個(gè)網站(zhàn)。說(shuō)到(dào)超鏈接(jiē)，它(tā)涉(shè)及(jí)到(dào)一(yī)個新(xīn)的概(gài)念：偽(wěi)類，我們先(xiān)看下(xià)超鏈接的四種(zhǒng)樣式：
a:link {color: #FF0000} /* 未(wèi)訪問的鏈接(jiē) */
a:visited {color: #00FF00} /* 已訪問的鏈(liàn)接 */
a:hover {color: #FF00FF} /* 鼠標移動到鏈接(jiē)上 */
a:active {color: #0000FF} /* 選定的鏈(liàn)接(jiē) */
以上分(fēn)別定義(yì)了超鏈(liàn)接(jiē)未訪問時的鏈接樣式(shì)，已(yǐ)訪(fǎng)問(wèn)的鏈接樣(yàng)式(shì)，鼠標(biāo)移(yí)上(shàng)時鏈接樣(yàng)式和(hé)選定(dìng)的鏈(liàn)接(jiē)樣式(shì)。之所以稱之為(wéi)偽(wěi)類，也(yě)就(jiù)是說(shuō)它(tā)不(bù)是一個(gè)真實的類，正常(cháng)的類是(shì)以點(diǎn)開始，後邊(biān)跟(gēn)一個(gè)名稱，而(ér)它(tā)是以a開始(shǐ)後(hòu)邊(biān)跟(gēn)個(gè)冒號，再(zài)跟個(gè)狀態限定(dìng)字符(fú)；比(bǐ)如第三(sān)個a:hover的樣式(shì)，隻(zhī)有當鼠標移(yí)動到(dào)該鏈接上(shàng)時它才(cái)生(shēng)效，而a:visited隻(zhī)對已訪問過(guò)的鏈接(jiē)生(shēng)效。偽類使得用戶(hù)體驗大大(dà)提高，比如我(wǒ)們可以設置(zhì)鼠標移上時(shí)改變顏色(sè)或(huò)下劃(huá)綫等屬(shǔ)性(xìng)來(lái)告(gào)知用戶這(zhè)個是(shì)可以(yǐ)點擊的(dí)，設(shè)置已訪問過的(dí)鏈(liàn)接(jiē)的(dí)顏色變(biàn)灰(huī)暗(àn)或加刪(shān)除(chú)綫告知用戶這(zhè)個鏈(liàn)接的內(nèi)容已訪問(wèn)過了。
下麵(miàn)來做(zuò)一個(gè)默認(rèn)狀態下(xià)是藍(lán)色，鼠標放(fàng)上(shàng)是紅色(sè)加下(xià)劃綫，選定（按下(xià)）時(shí)為紫(zǐ)色，已(yǐ)訪問(wèn)過(guò)為灰色(sè)加刪(shān)除綫(xiàn)的實(shí)例(lì)來講(jiǎng)解一(yī)下。首(shǒu)先插入(rù)兩個帶(dài)超鏈(liàn)接(jiē)的內(nèi)容：
<p><a href="#">這(zhè)裏(lǐ)是(shì)鏈接</a></p>
<p><a href="10.HTML">這裏(lǐ)也(yě)是(shì)鏈接</a></p>
從上圖中(zhōng)可(kě)以看出(chū)，插入的超鏈(liàn)接(jiē)默(mò)認(rèn)是藍色(sè)來下(xià)劃綫的，這是標簽(qiān)的默認樣式所致，下(xià)來(lái)我們在css樣式中定義(yì)
設置(zhì)完a:link的(dí)樣式後，下(xià)麵分別設(shè)置(zhì)a:visited ，a:hover ，a:active的樣式
生成的源(yuán)代(dài)碼如(rú)下(xià)：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
a:link { color: #06F; text-decoration: none; }
a:visited { color: #999; text-decoration: line-through; }
a:hover { color: #F00; text-decoration: underline; }
a:active { color: #F0F; }
</style>
</head>
<body>
<p><a href="#">這(zhè)裏是鏈接(jiē)</a></p>
<p><a href="10.html">這(zhè)裏也是鏈接(jiē)</a></p>
</body>
</html>
注(zhù)意(yì)：四種(zhǒng)狀(zhuàng)態的順(shùn)序(xù)一(yī)定不能(néng)顛(diān)倒，否則有(yǒu)些不(bù)生效
二(èr)，將鏈接轉換為塊(kuài)級元素(sù)
鏈接在(zài)默認狀態(tài)下(xià)是內聯元(yuán)素，轉換(huàn)為塊(kuài)級(jí)元素後(hòu)可(kě)以(yǐ)獲得更(gēng)大的(dí)點擊(jī)區(qū)域，可以設(shè)置寬度和高度(dù)，將(jiāng)鏈接轉(zhuǎn)換為(wéi)塊(kuài)狀(zhuàng)，隻需增加一個display:block的css屬性即可。
a { display: block; height: 30px; width: 100px; line-height: 30px; text-align: center; background: #CCC; }
這樣設置的結果是(shì)全(quán)局a都執行(háng)這個樣式(shì)顯示，下(xià)麵設(shè)置(zhì)一下鼠標(biāo)劃過(guò)時 的狀(zhuàng)態，其它幾(jī)種狀態設(shè)置方法相(xiāng)同(tóng)
代(dài)碼如(rú)下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
a { display: block; height: 30px; width: 100px; line-height: 30px; text-align: center; background: #CCC; }
a:hover { color: #FFF; text-decoration: none; background: #333; }
</style>
</head>
<body>
<p><a href="#">這裏是鏈接</a></p>
<p><a href="10.html">這(zhè)裏也(yě)是(shì)鏈接(jiē)</a></p>
</body>
</html>
三(sān)，用css製作(zuò)按鈕
學(xué)會(huì)了把超鏈接轉(zhuǎn)換為塊(kuài)級元(yuán)素(sù)，想(xiǎng)製作(zuò)個css按鈕簡直太簡單(dān)了(liǎo)，隻(zhī)需在(zài)上一(yī)步的基礎上增加(jiā)一個(gè)按(àn)鈕(niǔ)的背景圖片即(jí)可(kě)實(shí)現(xiàn)。下麵以製作淘寶(bǎo)網首頁的免(miǎn)費注冊(cè)按(àn)鈕來講解，設(shè)置(zhì)最常用(yòng)的默(mò)認(rèn)樣式(shì)和(hé)鼠(shǔ)標(biāo)移上(shàng)時(shí)的樣式，如(rú)下(xià)圖
首先(xiān)需要準備默認狀(zhuàng)態(tài)和鼠(shǔ)標(biāo)劃(huá)過(guò)狀態的(dí)圖片(piàn)如(rú)下：
修改(gǎi)之(zhī)前的html如下，然後(hòu)重新定(dìng)義css樣式：
<p><a href="#">免費注冊</a></p>
代碼(mǎ)如下(xià)：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
a { display: block; height: 34px; width: 107px; line-height: 2; text-align: center; background: url(/upload/2010-08/14/014304_btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-top: 3px; }
a:hover { background: url(/upload/2010-08/14/014304_btn_bg_hover.gif) no-repeat 0px 0px;}
</style>
</head>
<body>
<p><a href="#">免(miǎn)費注冊</a></p>
</body>
</html>
本例中(zhōng)運用到了(liǎo)背(bèi)景圖片，有(yǒu)關背(bèi)景(jǐng)圖(tú)片的(dí)詳(xiáng)細(xì)運用(yòng)將(jiāng)在(zài)下一節中(zhōng)講(jiǎng)解
四，首字下(xià)沉
首(shǒu)字下沉(chén)是(shì)css偽類上(shàng)的(dí)又(yòu)一個運用，它(tā)可以直(zhí)接通(tōng)過css樣(yàng)式(shì)表向(xiàng)某(mǒu)個(gè)選擇器(qì)中(zhōng)的文(wén)本(běn)首字(zì)母(mǔ)添(tiān)加特殊的(dí)樣(yàng)式，而不(bù)需要把(bǎ)首字添加一個標(biāo)簽或(huò)通(tōng)過(guò)程序(xù)來實(shí)現，今(jīn)天(tiān)以製作(zuò)word裏(lǐ)的(dí)首(shǒu)字下沉為(wéi)例(lì)來講解，應用如下偽(wěi)元素：
:first-letter
在頁麵中添(tiān)加如下(xià)一段(duàn)內容，隻用設置樣式就可以實(shí)現首(shǒu)字(zì)下沉了：
<p>標(biāo)準之路(lù)[www.100181.com]提(tí)供DIV+CSS教程,DIV+CSS視頻教程,web2.0標(biāo)準(zhǔn),DIV+CSS布局入(rù)門(mén)教(jiào)程,網(wǎng)頁(yè)布局實(shí)例(lì),css布局(jú)實例,div+css模(mó)板,div+css實例(lì)解析(xī),網站重構，網(wǎng)頁代(dài)碼,水晶圖(tú)標(biāo),幻(huàn)燈(dēng)廣(guǎng)告圖片(piàn).教(jiào)程適(shì)合(hé)初學(xué)者循(xún)序(xù)漸(jiàn)進(jìn)學習!</p>
為了便於觀察效(xiào)果，我(wǒ)們設置(zhì)p的樣(yàng)式(shì)如(rú)下(xià)：
p { width: 400px; line-height: 1.5; font-size: 14px; }
然(rán)後(hòu)設置p:first-letter的樣式(shì)
代碼(mǎ)如(rú)下(xià)：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p { width: 400px; line-height: 1.5; font-size: 14px; }
p:first-letter { font-family: "microsoft yahei"; font-size: 40px; float: left; padding-right: 10px; line-height: 1; }
</style>
</head>
<body>
<p>標準之路(lù)[www.100181.com]提(tí)供DIV+CSS教程,DIV+CSS視(shì)頻教程,web2.0標準,DIV+CSS布局入(rù)門教(jiào)程,網(wǎng)頁布局實例,css布局實例,div+css模(mó)板(bǎn),div+css實例(lì)解(jiě)析,網站重構，網(wǎng)頁代(dài)碼,水晶(jīng)圖標(biāo),幻燈廣告(gào)圖片.教程(chéng)適合(hé)初(chū)學(xué)者循(xún)序漸進學(xué)習(xí)!</p>
</body>
</html>
文(wén)章出處：標(biāo)準(zhǔn)之(zhī)路(lù) 編輯：楊(yáng)雨晨思(sī)
轉(zhuǎn)載請保留原文地址: https://antelcom.cn/show-339.html