CSS中怎么是指a標(biāo)簽的樣式,很多新手對(duì)此不是很清楚,為了幫助大家解決這個(gè)難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來(lái)學(xué)習(xí)下,希望你能有所收獲。
??h網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站,??h網(wǎng)站設(shè)計(jì)制作,有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為??h成百上千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營(yíng)銷網(wǎng)站建設(shè)要多少錢,請(qǐng)找那個(gè)售后服務(wù)好的??h做網(wǎng)站的公司定做!
CSS中a標(biāo)簽的樣式介紹
CSS為一些特殊效果準(zhǔn)備了特定的工具,我們稱之為“偽類”。其中有幾項(xiàng)是我們經(jīng)常用到的,下面我們就詳細(xì)介紹一下經(jīng)常用于定義鏈接樣式的四個(gè)偽類,它們分別是:
定義鏈接樣式的四個(gè)偽類
view sourceprint?
1 :link 2 :visited 3 :hover 4 :active
因?yàn)槲覀円x鏈接樣式,所以其中必不可少的就是超級(jí)鏈接中的錨標(biāo)簽--a,錨標(biāo)簽和偽類鏈接起來(lái)書寫的方法就是定義鏈接樣式的基礎(chǔ)方法,它們的寫法如下:
view sourceprint?
1 a:link,定義正常鏈接的樣式; 2 a:visited,定義已訪問(wèn)過(guò)鏈接的樣式; 3 a:hover,定義鼠標(biāo)懸浮在鏈接上時(shí)的樣式; 4 a:active,定義鼠標(biāo)點(diǎn)擊鏈接時(shí)的樣式。
示例:
view sourceprint?
01 a:link { 02 color:#FF0000; 03 text-decoration:underline; 04 } 05 06 a:visited { 07 color:#00FF00; 08 text-decoration:none; 09 } 10 11 a:hover { 12 color:#000000; 13 text-decoration:none; 14 } 15 16 a:active { 17 color:#FFFFFF; 18 text-decoration:none; 19 }
上面示例中定義的鏈接顏色是紅色,訪問(wèn)過(guò)后的鏈接是綠色,鼠標(biāo)懸浮在鏈接上時(shí)是黑色,點(diǎn)擊時(shí)的顏色是白色。
如果正常鏈接和已訪問(wèn)過(guò)的鏈接樣式相同,鼠標(biāo)懸浮和點(diǎn)擊時(shí)的樣式相同,也可以將它們合并起來(lái)定義:
view sourceprint?
1 a:link, a:visited { 2 color:#FF0000; 3 text-decoration:underline; 4 } 5 6 a:hover, a:active { 7 color:#000000; 8 text-decoration:none; 9 }
鏈接定義的順序
沒有規(guī)矩不成方圓,雖然鏈接定義寫好了,但它也是有規(guī)則的,如果這四項(xiàng)的書寫順序稍有差錯(cuò),鏈接的效果可能就沒有了,所以每次定義鏈接樣式時(shí)務(wù)必確認(rèn)定義的順序,link--visited--hover-active,也就是我們常說(shuō)到的LoVe HAte原則(大寫字母就是它們的首字母)。
老外總結(jié)了一個(gè)便于記憶的“愛恨原則”(LoVe/HAte),即四種偽類的首字母:LVHA。定義A鏈接樣式的正確的順序:a:link、a:visited、a:hover、a:active。
為什么我們不能改變定義的順序?做下測(cè)試就可以了。
假設(shè)我們想實(shí)現(xiàn)下面的樣式:
鼠標(biāo)移入時(shí),并沒有變黃。而是當(dāng)這個(gè)鏈接已經(jīng)被訪問(wèn)過(guò)后,鼠標(biāo)移入才變黃:
view sourceprint?
1 a:visited{color:red;} 2 a:hover{ color:yellow;} 3 a:link{ color:blue;} 4 a:active{ color:green;}
這是因?yàn)椋粋€(gè)鼠標(biāo)經(jīng)過(guò)的未訪問(wèn)的鏈接同時(shí)擁有a:link,a:hover兩種屬性,在上述的CSS樣式中,a:link離他最近,先滿足a:link,而放棄a:hover的重復(fù)定義。
而使用LVHA順序聲明后,它首先檢查a:hover的符合標(biāo)準(zhǔn),先變色。
所以說(shuō),為了符合瀏覽器解釋CSS遵循的"就近原則"。我們?cè)诙xCSS中,宜將最一般的條件放在最上面,并依次向下,最下面放最特殊的。
在W3C規(guī)范中,也規(guī)定了鏈接的聲明順序:
在 CSS 定義中,a:hover 必須被置于 a:link 和 a:visited 之后,才是有效的。
在 CSS 定義中,a:active 必須被置于 a:hover 之后,才是有效的。
定義局部鏈接樣式
在CSS中寫上a:link{}這樣的定義會(huì)使整個(gè)頁(yè)面的鏈接樣式改變,但有些局部鏈接需要特殊化,這個(gè)問(wèn)題也不難解決,只要在鏈接樣式定義的前面加上指定的id或class就可以了。
view sourceprint?
1 #sidebar a:link, #sidebar a:visiteid { 2 color:#FF0000; 3 text-decoration:none; 4 } 5 6 #sidebar a:hover, #sidebar a:active { 7 color:#000000; 8 text-decoration:underline; 9 }
HTML調(diào)用:
view sourceprint?1
鏈接到aa頁(yè)面
class的定義方法和id相同,只要將#sidebar改為.sidebar就行了,還有一種方法是直接定義鏈接的樣式,那樣更直接,不過(guò)調(diào)用時(shí)比較麻煩,需要給每個(gè)特定的鏈接加上定義的代碼。
view sourceprint?
01 a.redlink a:link, a.redlink a:visiteid { 02 color:#FF0000; 03 text-decoration:none; 04 } 05 06 a.redlink a:hover, a.redlink a:active { 07 color:#000000; 08 text-decoration:underline; 09 background:#FFFFFF; 10 }
看完上述內(nèi)容是否對(duì)您有幫助呢?如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章,請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝您對(duì)創(chuàng)新互聯(lián)的支持。