全國(guó)咨詢(xún)/投訴熱線:400-618-4000

首頁(yè)技術(shù)文章正文

鏈接偽類(lèi)可以控制超鏈接的樣式嗎?是怎樣實(shí)現(xiàn)的?

更新時(shí)間:2021-03-09 來(lái)源:黑馬程序員 瀏覽量:

1577370495235_學(xué)IT就到黑馬程序員.gif


定義超鏈接時(shí),為了提高用戶體驗(yàn),經(jīng)常需要為超鏈接指定不同的狀態(tài),使得超鏈接在點(diǎn)擊前、點(diǎn)擊后和鼠標(biāo)懸停時(shí)的樣式不同。在CSS中,通過(guò)鏈接偽類(lèi)可以實(shí)現(xiàn)不同的鏈接狀態(tài),下面將對(duì)鏈接偽類(lèi)控制超鏈接的樣式進(jìn)行詳細(xì)地講解。

與超鏈接相關(guān)的4個(gè)偽類(lèi)應(yīng)用比較廣泛,這幾個(gè)偽類(lèi)定義了超鏈接的4種不同狀態(tài),具體如表1所示。

表1 超鏈接標(biāo)簽<a>的偽類(lèi)

超鏈接標(biāo)簽的偽類(lèi)描述
a:link{ CSS樣式規(guī)則; }超鏈接的默認(rèn)樣式
a:visited{ CSS樣式規(guī)則; }超鏈接被訪問(wèn)過(guò)之后的樣式
a:hover{ CSS樣式規(guī)則; }鼠標(biāo)經(jīng)過(guò)、懸停時(shí)超鏈接的樣式
a: active{ CSS樣式規(guī)則; }鼠標(biāo)點(diǎn)擊不動(dòng)時(shí)超鏈接的樣式


在實(shí)際工作中,通常只需要使用a:link、a:visited和a:hover定義未訪問(wèn)、訪問(wèn)后和鼠標(biāo)懸停時(shí)的超鏈接樣式。并且常常對(duì)a:link和a:visited應(yīng)用相同的樣式,使未訪問(wèn)和訪問(wèn)后的超鏈接樣式保持一致。


注意:

1、使用超鏈接的4種偽類(lèi)時(shí),對(duì)排列順序是有要求的。通常按照a:link、a:visited、a:hover和a:active的順序書(shū)寫(xiě),否則定義的樣式可能不起作用。

2、超鏈接的4種偽類(lèi)狀態(tài)并非全部定義,一般只需要設(shè)置3種狀態(tài)即可,如link、hover和active。如果只設(shè)定是2種狀態(tài),即link、hover來(lái)定義。

3、除了文本樣式之外,鏈接偽類(lèi)還常常用于控制超鏈接的背景、邊框等樣式。





猜你喜歡:

Dreamweaver屬性面板和常用功能介紹

怎樣在HTML中創(chuàng)建超鏈接?

CSS3顏色不透明度的設(shè)置方法【web前端】

黑馬程序員大數(shù)據(jù)培訓(xùn)課程

分享到:
在線咨詢(xún) 我要報(bào)名
和我們?cè)诰€交談!