使用CSS控制超鏈接樣式
你對(duì)CSS中超鏈接的概念是否了解，這里和大家分享一下如何用CSS控制超鏈接樣式，超鏈接通俗地指從一個(gè)網(wǎng)頁指向一個(gè)目標(biāo)的連接關(guān)系。
用CSS控制超鏈接樣式
本文將講解通過CSS樣式或通過CSS來控制超鏈接樣式。這里主要講文字類型的超鏈接，超鏈接的樣式包括通過CSS來控制設(shè)置超鏈接有無下劃線、超鏈接文字顏色等樣式。
什么是超鏈接？
超鏈接通俗地指從一個(gè)網(wǎng)頁指向一個(gè)目標(biāo)的連接關(guān)系，這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁,也可以是相同網(wǎng)頁上的不同位置，還可以是一個(gè)圖片，一個(gè)電子郵件地址，一個(gè)文件，甚至是一個(gè)應(yīng)用程序。而在一個(gè)網(wǎng)頁中用來超鏈接的對(duì)象，可以是一段文本或者是一個(gè)圖片。當(dāng)瀏覽者單擊已經(jīng)鏈接的文字或圖片后,鏈接目標(biāo)將顯示在瀏覽器上，并且根據(jù)目標(biāo)的類型來打開或運(yùn)行。
超鏈接的代碼
- <ahrefahref="http://www.divCSS5.com/"target="_blank"
- title="關(guān)于divCSS的網(wǎng)站">DIV+CSS</a>
解析如下：
href后跟被鏈接地址目標(biāo)網(wǎng)站地址這里是http://www.divCSS5.com/
target
_blank--在新窗口中打開鏈接
_parent--在父窗體中打開鏈接
_self--在當(dāng)前窗體打開鏈接,此為默認(rèn)值
_top--在當(dāng)前窗體打開鏈接，并替換當(dāng)前的整個(gè)窗體(框架頁)
◆title后跟鏈接目標(biāo)說明，也就是超鏈接被鏈接網(wǎng)址情況簡要說明，或標(biāo)題
CSS可控制超鏈接樣式-CSS鏈接樣式如下
a:active是超級(jí)鏈接的初始狀態(tài)
a:hover是把鼠標(biāo)放上去時(shí)的狀況
a:link是鼠標(biāo)點(diǎn)擊時(shí)
a:visited是訪問過后的情況
超鏈接樣式案例
1、通常對(duì)全站超鏈接樣式化方法
- a{color:#333;text-decoration:none;}
- //對(duì)全站有鏈接的文字顏色樣式為color:#333;
- 并立即無下劃線text-decoration:none;
- a:hover{color:#CC3300;text-decoration:underline;}//對(duì)鼠標(biāo)放到超鏈接上文字顏色樣式變?yōu)?
- color:#CC3300;
- 并文字鏈接加下劃線text-decoration:underline;
2、通過鏈接內(nèi)設(shè)置類控制超鏈接樣式CSS方法
案例超鏈接代碼
- <ahrefahref="http://www.divCSS5.com/"class="yangshi">
- CSS
- </a>
對(duì)應(yīng)CSS代碼
- a.yangshi{color:#333;text-decoration:none;}
- a.yangshi:hover{color:#CC3300;text-decoration:underline;}
通過這樣的設(shè)置可以控制鏈接內(nèi)的CSS類名為“yangshi”超鏈接的樣式
3、通過對(duì)應(yīng)超鏈接外的父級(jí)的CSS類的CSS樣式來控制超鏈接的樣式
案例超鏈接代碼
- <divclassdivclass="yangshi">
- <ahrefahref="http://www.divCSS5.com/">
- CSS</a>
- </a>
對(duì)應(yīng)CSS代碼
- .yangshia{color:#333;text-decoration:none;}
- .yangshia:hover{color:#CC3300;text-decoration:underline;}
這里值得注意的是a.yangshi與.yangshia的樣式CSS代碼區(qū)別，這里就是常見的通過divCSS來對(duì)超鏈接樣式設(shè)置案例及分析。
【編輯推薦】
- CSS中Position屬性用法及作用
- 實(shí)例解析CSS padding 屬性用法
- CSS清除浮動(dòng)行之有效的辦法
- CSS教程：詳解margin和padding屬性應(yīng)用場合
- 實(shí)現(xiàn)IE6、IE7、IE8多版本瀏覽器共存的五種方法
