客服
超鏈接偽類-Web標(biāo)準(zhǔn)(div+css)教程
今天我們開始學(xué)習(xí)《十天學(xué)會web標(biāo)準(zhǔn)(div+css)》超鏈接偽類，包含以下內(nèi)容和知識點：
一、鏈接的四種樣式
二、將鏈接轉(zhuǎn)換為塊狀
三、用css制作按鈕
四、首字下沉
一、超鏈接的四種樣式
本來計劃這節(jié)課放到第九章中講解，但下邊的章節(jié)都涉及到了，所以提前來學(xué)習(xí)一下，上節(jié)課講解的內(nèi)容比較多，這節(jié)課就少講些，只要理解了偽類，就輕松多了。
超鏈接可以說是網(wǎng)頁發(fā)展史上一個偉大的發(fā)明，它使得許多頁面相互鏈接從而構(gòu)成一個網(wǎng)站。說到超鏈接，它涉及到一個新的概念：偽類，我們先看下超鏈接的四種樣式：
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標(biāo)移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */
以上分別定義了超鏈接未訪問時的鏈接樣式，已訪問的鏈接樣式，鼠標(biāo)移上時鏈接樣式和選定的鏈接樣式。之所以稱之為偽類，也就是說它不是一個真實的類，正常的類是以點開始，后邊跟一個名稱，而它是以a開始后邊跟個冒號，再跟個狀態(tài)限定字符；比如第三個a:hover的樣式，只有當(dāng)鼠標(biāo)移動到該鏈接上時它才生效，而a:visited只對已訪問過的鏈接生效。偽類使得用戶體驗大大提高，比如我們可以設(shè)置鼠標(biāo)移上時改變顏色或下劃線等屬性來告知用戶這個是可以點擊的，設(shè)置已訪問過的鏈接的顏色變灰暗或加刪除線告知用戶這個鏈接的內(nèi)容已訪問過了。西安網(wǎng)站建設(shè)推薦閱讀>>> html列表-Web標(biāo)準(zhǔn)(div+css)教程，
下面來做一個默認(rèn)狀態(tài)下是藍(lán)色，鼠標(biāo)放上是紅色加下劃線，選定（按下）時為紫色，已訪問過為灰色加刪除線的實例來講解一下。首先插入兩個帶超鏈接的內(nèi)容：
<p><a href="#">這里是鏈接</a></p>
<p><a href="10.html">這里也是鏈接</a></p>
從上圖中可以看出，插入的超鏈接默認(rèn)是藍(lán)色來下劃線的，這是標(biāo)簽的默認(rèn)樣式所致，下來我們在css樣式中定義
設(shè)置完a:link的樣式后，下面分別設(shè)置a:visited ，a:hover ，a:active的樣式
生成的源代碼如下：
|
<!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=gb2312" /> <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="#">這里是鏈接</a></p> <p><a href="10.html">這里也是鏈接</a></p> </body> </html> |
注意：四種狀態(tài)的順序一定不能顛倒，否則有些不生效
二、將鏈接轉(zhuǎn)換為塊級元素
鏈接在默認(rèn)狀態(tài)下是內(nèi)聯(lián)元素，轉(zhuǎn)換為塊級元素后可以獲得更大的點擊區(qū)域，可以設(shè)置寬度和高度，將鏈接轉(zhuǎn)換為塊狀，只需增加一個display:block的css屬性即可。西安網(wǎng)站建設(shè)推薦閱讀>>> 橫向?qū)Ш讲藛?Web標(biāo)準(zhǔn)(div+css)教程，
a { display: block; height: 30px; width: 100px; line-height: 30px; text-align: center; background: #CCC; }
這樣設(shè)置的結(jié)果是全局a都執(zhí)行這個樣式顯示，下面設(shè)置一下鼠標(biāo)劃過時 的狀態(tài)，其它幾種狀態(tài)設(shè)置方法相同
代碼如下：
|
<!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=gb2312" /> <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">這里也是鏈接</a></p> </body> </html> |
三、用css制作按鈕
學(xué)會了把超鏈接轉(zhuǎn)換為塊級元素，想制作個css按鈕簡直太簡單了，只需在上一步的基礎(chǔ)上增加一個按鈕的背景圖片即可實現(xiàn)。下面以制作淘寶網(wǎng)首頁的免費注冊按鈕來講解，設(shè)置最常用的默認(rèn)樣式和鼠標(biāo)移上時的樣式，如下圖
首先需要準(zhǔn)備默認(rèn)狀態(tài)和鼠標(biāo)劃過狀態(tài)的圖片如下：
修改之前的html如下，然后重新定義css樣式：
<p><a href="#">免費注冊</a></p>
代碼如下：
|
<!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=gb2312" /> <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="#">免費注冊</a></p> </body> </html> |
本例中運用到了背景圖片，有關(guān)背景圖片的詳細(xì)運用將在下一節(jié)中講解
四、首字下沉
首字下沉是css偽類上的又一個運用，它可以直接通過css樣式表向某個選擇器中的文本首字母添加特殊的樣式，而不需要把首字添加一個標(biāo)簽或通過程序來實現(xiàn)，今天以制作word里的首字下沉為例來講解，應(yīng)用如下偽元素：
:first-letter
在頁面中添加如下一段內(nèi)容，只用設(shè)置樣式就可以實現(xiàn)首字下沉了：
<p>標(biāo)準(zhǔn)之路[www.aa25.cn]提供DIV+CSS教程,DIV+CSS視頻教程,web2.0標(biāo)準(zhǔn),DIV+CSS布局入門教程,網(wǎng)頁布局實例,css布局實例,div+css模板,div+css實例解析,網(wǎng)站重構(gòu)，網(wǎng)頁代碼,水晶圖標(biāo),幻燈廣告圖片.教程適合初學(xué)者循序漸進(jìn)學(xué)習(xí)!</p>
為了便于觀察效果，我們設(shè)置p的樣式如下：
p { width: 400px; line-height: 1.5; font-size: 14px; }
然后設(shè)置p:first-letter的樣式
西安做網(wǎng)站推薦閱讀>>> 下拉及多級彈出菜單-Web標(biāo)準(zhǔn)(div+css)教程，
代碼如下：
|
<!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=gb2312" /> <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>標(biāo)準(zhǔn)之路[www.aa25.cn]提供DIV+CSS教程,DIV+CSS視頻教程,web2.0標(biāo)準(zhǔn),DIV+CSS布局入門教程,網(wǎng)頁布局實例,css布局實例,div+css模板,div+css實例解析,網(wǎng)站重構(gòu)，網(wǎng)頁代碼,水晶圖標(biāo),幻燈廣告圖片.教程適合初學(xué)者循序漸進(jìn)學(xué)習(xí)!</p> </body> </html> |
文章出處：標(biāo)準(zhǔn)之路 編輯：楊雨晨思
相關(guān)文章：
-
西安網(wǎng)站建設(shè)_西安做網(wǎng)站_西安網(wǎng)站制作——西安網(wǎng)絡(luò)公司...
-
CSS實現(xiàn)圖片裁剪居中 其實，css實現(xiàn)起來很簡單，只需要設(shè)置img的樣式：object-fit：none即可，不過你要給img一個高度，因為裁剪嘛 頁面：（圖片可以自己隨便截兩張來測試） !--長圖片-- div clas...
-
CSS背景圖片自適應(yīng)全屏 .bg{ background:url(bg.png) no-repeat; background-size:cover; filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )//IE特有的濾鏡 }...
-
Viewport viewport：可視窗口，也就是瀏覽器。 vw Viewport寬度， 1vw 等于viewport寬度的1% vh Viewport高度， 1vh 等于viewport高的的1% CSS3使用Calc calc()使用通用的數(shù)學(xué)運算規(guī)則，但是也提供更智能的功能：...
-
從企業(yè)建站角度講，最便捷、最適合企業(yè)的建站系統(tǒng)莫過于自助建站系統(tǒng)，市場上可供選擇的自助建站平臺也是一搜一大把。這些自助建站平臺采用傻瓜式建站風(fēng)格，容易上手，操作簡單方便...
-
現(xiàn)在想做一個網(wǎng)站成本很低了，買個域名，買個幾十塊空間，弄個網(wǎng)站建設(shè)程序就可以開始你的玩耍了，如果你還想找成本更低的，可以看下面的分享。 如何創(chuàng)建網(wǎng)站一直都是很多朋友想要知...
-
商城網(wǎng)站建設(shè)如何將吸引力提升 在信息如此豐富多樣的今天，商城網(wǎng)站建設(shè)如何才能夠在眾多的同類當(dāng)中脫穎而出，獲得大眾的吸引和青睞呢？這其實是相關(guān)網(wǎng)站建設(shè)人員一直在思考的一個問...
-
現(xiàn)在越來越多的企業(yè)重視網(wǎng)站的運營推廣，那怎樣推廣效果更好呢？西安蟠龍網(wǎng)絡(luò)小編認(rèn)為沒用永恒不變得，而且要根據(jù)企業(yè)的具體情況選擇合適的推廣方式才是最好的，如果你又運營推廣的...
-
隨著互聯(lián)網(wǎng)的發(fā)展，人們每時每刻已經(jīng)離不開網(wǎng)絡(luò)，而網(wǎng)站是網(wǎng)絡(luò)的基本組成部分，可以這么說，網(wǎng)絡(luò)是由各種各樣的網(wǎng)站組成的，當(dāng)下，網(wǎng)站是每個企業(yè)的標(biāo)配，很多個人都有自己的網(wǎng)站，...
-
網(wǎng)站現(xiàn)在是一個企業(yè)的標(biāo)配，很多沒有網(wǎng)站的企業(yè)不清楚網(wǎng)站對企業(yè)有什么作用，那么今天西安蟠龍小編總結(jié)一下網(wǎng)站對企業(yè)都有哪些好處，希望看完之后您對網(wǎng)站有更深一層的認(rèn)識。 一、低...