改變鏈接狀態(tài)教程--調(diào)整CSS類型的順序

2020-03-24 17:36:53

字體：大中小

供稿：網(wǎng)友

你也許已經(jīng)意識(shí)到，你可以通過(guò)指定每一鍵接的不同風(fēng)格以建立CSS翻滾效果，這些鏈接包括普通的鏈接link (normal), 訪問(wèn)，翻轉(zhuǎn)，以及激活。并且，你可能也知道CSS類型的順序可以產(chǎn)生效果上的差別，CSS代碼后順序的風(fēng)格將會(huì)取代針對(duì)于相同元素的前順序的風(fēng)格。建立翻滾效果的類型順序顯得相當(dāng)重要。現(xiàn)在讓我們看看如何安排鏈接狀態(tài)的類型在不產(chǎn)生沖突的情況下支持正常的翻滾效果，并且如何重新安排這些類型順序以獲得不同的翻滾效果。鏈接狀態(tài) 典型的CSS翻滾效果依賴于超鏈接中四個(gè)狀態(tài)之一的獨(dú)立類型。可以建立附帶CSS預(yù)先類的(超鏈接)類型以指定鏈接狀態(tài): a:link——常規(guī)，非訪問(wèn)超鏈接 a:visited——訪問(wèn)超鏈接 a:hover——訪問(wèn)者操作鼠標(biāo)通過(guò)時(shí)的鏈接 a:active——點(diǎn)擊鏈接為了能夠使典型的CSS翻滾效果正常工作，CSS代碼中的CSS類型順序顯得非常重要，無(wú)論它是一個(gè)外部類型表格或者是嵌入在HIML頁(yè)標(biāo)題欄中的類型規(guī)則。 a:link類型出現(xiàn)的時(shí)間為最早，因?yàn)樗蓱?yīng)用于所有的鏈接。a:visited類型排第二，它將取代任何鏈接的a:link格式。(如果a:link類型緊跟著的是a:visited，a:link可能會(huì)取代a:visited類型。)其次是a:hover類型，此類型只應(yīng)用于訪問(wèn)鼠標(biāo)下的鏈接。最后是a:active，所以，當(dāng)鏈接被點(diǎn)擊時(shí)，它可以取代所有其它的類型。 CODE:以下是引用片段：
a:link {
color: #0000FF;
text-decoration: underline;
font-weight: normal;
font-style: normal;
}
a:visited {
color: #3399FF;
text-decoration: underline;
background-color: #FFFFFF;
font-weight: normal;
font-style: italic;
}
a:hover {
color: #0000FF;
text-decoration: underline;
background-color: #FFFF00;
font-weight: bold;
font-style: normal;
}
a:active {
color: #FF0000;
text-decoration: none;
background-color: #CCCCCC;
font-weight: bold;
font-style: normal;
}
在CSS代碼中的類型順序確定了每一種類型如何取代其它的類型，即更多的類型可以應(yīng)用到特定的元素。正常情況下，a:hover類型處于a:link和a:visited類型之后，所以hover狀態(tài)的類型可以應(yīng)用于常規(guī)和訪問(wèn)的鏈接。但是，它也并非必須遵循這一方式，你可以改變類型順序?qū)崿F(xiàn)不同的效果。假設(shè)你想在非訪問(wèn)鏈接中使用翻滾效果，但不想影響到其它訪問(wèn)鏈接，你或許想到通過(guò)代碼來(lái)處理這種外形上改變，然而你所要做的是重新組織CSS代碼。從訪問(wèn)鏈接中移除翻滾效果，可以通過(guò)很簡(jiǎn)單地移除a:visited類型。注意，a:visited類型中包含指定所有與a:hover相同屬性的規(guī)則，否則，當(dāng)訪問(wèn)者的鼠標(biāo)通過(guò)一個(gè)訪問(wèn)鏈接時(shí)，沒(méi)有被a:visited類型取代的任何a:hover類型屬性將會(huì)繼續(xù)再現(xiàn)
本文作者:html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：分享怎樣用CSS控制文本左右對(duì)齊且首行縮進(jìn)的方法

下一篇：xhtml+css網(wǎng)頁(yè)制作問(wèn)題的解決方法