
現在讓我們看看如何安排鏈接狀態(tài)的類(lèi)型在不產(chǎn)生沖突的情況下支持正常的翻滾效果,并且如何重新安排這些類(lèi)型順序以獲得不同的翻滾效果。
鏈接狀態(tài)
典型的CSS翻滾效果依賴(lài)于超鏈接中四個(gè)狀態(tài)之一的獨立類(lèi)型??梢越⒏綆SS預先類(lèi)的(超鏈接)類(lèi)型以指定鏈接狀態(tài):
a:link——常規,非訪(fǎng)問(wèn)超鏈接
a:visited——訪(fǎng)問(wèn)超鏈接
a:hover——訪(fǎng)問(wèn)者操作鼠標通過(guò)時(shí)的鏈接
a:active——點(diǎn)擊鏈接
為了能夠使典型的CSS翻滾效果正常工作,CSS代碼中的CSS類(lèi)型順序顯得非常重要,無(wú)論它是一個(gè)外部類(lèi)型表格或者是嵌入在HIML頁(yè)標題欄中的類(lèi)型規則。
a:link類(lèi)型出現的時(shí)間為最早,因為它可應用于所有的鏈接。a:visited類(lèi)型排第二,它將取代任何鏈接的a:link格式。(如果a:link類(lèi)型緊跟著(zhù)的是a:visited,a:link可能會(huì )取代a:visited類(lèi)型。)其次是a:hover類(lèi)型,此類(lèi)型只應用于訪(fǎng)問(wèn)鼠標下的鏈接。最后是a:active,所以,當鏈接被點(diǎn)擊時(shí),它可以取代所有其它的類(lèi)型。
以下是引用片段: 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代碼中的類(lèi)型順序確定了每一種類(lèi)型如何取代其它的類(lèi)型,即更多的類(lèi)型可以應用到特定的元素。正常情況下,a:hover類(lèi)型處于a:link和a:visited類(lèi)型之后,所以hover狀態(tài)的類(lèi)型可以應用于常規和訪(fǎng)問(wèn)的鏈接。但是,它也并非必須遵循這一方式,你可以改變類(lèi)型順序實(shí)現不同的效果。
假設你想在非訪(fǎng)問(wèn)鏈接中使用翻滾效果,但不想影響到其它訪(fǎng)問(wèn)鏈接,你或許想到通過(guò)代碼來(lái)處理這種外形上改變,然而你所要做的是重新組織CSS代碼。
從訪(fǎng)問(wèn)鏈接中移除翻滾效果,可以通過(guò)很簡(jiǎn)單地移除a:visited類(lèi)型。
注意,a:visited類(lèi)型中包含指定所有與a:hover相同屬性的規則,否則,當訪(fǎng)問(wèn)者的鼠標通過(guò)一個(gè)訪(fǎng)問(wèn)鏈接時(shí),沒(méi)有被a:visited類(lèi)型取代的任何a:hover類(lèi)型屬性將會(huì )繼續再現。
呢 稱(chēng): | |
表 情: | |
內 容: |
評論內容:不能超過(guò) 1000 字,需審核,請自覺(jué)遵守互聯(lián)網(wǎng)相關(guān)政策法規。 |
驗證碼: | |
您發(fā)布的評論即表示同意遵守以下條款:
一、不得利用本站危害國家安全、泄露國家秘密,不得侵犯國家、社會(huì )、集體和公民的合法權益;
二、不得發(fā)布國家法律、法規明令禁止的內容;互相尊重,對自己在本站的言論和行為負責;
三、本站對您所發(fā)布內容擁有處置權。