1.<a>標(biāo)簽
<a>標(biāo)簽的功能:
<a>標(biāo)簽定義超鏈接特幔,用于從一張頁面鏈接到另一張頁面。
<a>元素最重要的屬性是href屬性闸昨,它指示鏈接的目標(biāo)蚯斯。
所有瀏覽器中,鏈接的默認(rèn)外觀是:
- 未被訪問的連接帶有下劃線而且是藍(lán)色的
- 已被訪問的鏈接帶有下劃線而且是紫色的
- 活動鏈接帶有下劃線而且是紅色的
<a>標(biāo)簽還有一個很重要的屬性:target饵较,它用于規(guī)定在何處打開鏈接文檔拍嵌,取值有:_blank;_parent;_self;_top。這個我們后面也會總結(jié)一下循诉。
2. a鏈接的四種狀態(tài)
偽類是css用于向某些選擇器添加的特殊效果横辆。
a標(biāo)簽中有四個:link、visited茄猫、hover狈蚤、active
(1)link
說明:設(shè)置a對象在其鏈接地址未被訪問前的樣式屬性。
(2)visited
說明:設(shè)置a對象在其鏈接地址已被訪問過時的樣式屬性划纽。
(3)hover
說明:設(shè)置對象在其鼠標(biāo)懸停時的樣式表屬性脆侮。
(4)說明:設(shè)置對象在被用戶激活(在鼠標(biāo)點擊與釋放之間發(fā)生的事件)時的樣式表屬性。
定義css時候的順序不同勇劣,也會直接導(dǎo)致鏈接顯示的效果不同他嚷。原因可能在于瀏覽器解釋css時遵循的“就近原則”。正確順序:a:link芭毙、a:visited、a:hover卸耘、a:active
解釋:
- link:鏈接平常的狀態(tài)
- visited:鏈接被訪問過后
- hover:鼠標(biāo)放到連接上的時候
- active:鏈接被按下的時候
舉例來說:
我相仿未被訪問鏈接為藍(lán)色退敦, 活動鏈接為綠色,已訪問鏈接為紅色:
第一種情況:我定義的順序是a:visited蚣抗、a:hover侈百、a:link瓮下,這時會發(fā)現(xiàn):把鼠標(biāo)放到未訪問過的藍(lán)色鏈接上時,他并不變成綠色钝域,只有放在已訪問的紅色鏈接上讽坏,鏈接才會變綠色;
第二種情況:我把css定義順序調(diào)整為:a:link例证、a:visited路呜、a:hover,這時织咧,無論你鼠標(biāo)經(jīng)過的鏈接有沒有被訪問過胀葱,他都會變成綠色。
這是因為笙蒙,一個鼠標(biāo)經(jīng)過的未訪問鏈接同時擁有a:link抵屿、a:hover兩種屬性,在第一種情況下捅位,a:link離他最近轧葛,所以他優(yōu)先滿足a:link,而放棄a:hover的重復(fù)定義艇搀。
在第二種情況尿扯,無論連接有沒有被訪問過,他首先要檢查是否符合a:hover的標(biāo)準(zhǔn)(即是否有鼠標(biāo)經(jīng)過它)中符,滿足則變成綠色姜胖,不滿足則繼續(xù)向上查找,一直找到滿足條件的定義為止淀散。
在css中右莱,如果對于相同元素有針對不同條件的定義,宜將最一般的條件放在最上面档插,并依次向下慢蜓,保證最下面的是最特殊的條件,這樣郭膛,瀏覽器在顯示元素時晨抡,才會從特殊到一般、逐級向上驗證條件则剃,才會是你的每一個css語句都起到效果耘柱。當(dāng)然,如果故意打亂順序棍现,也會造成一些特殊的效果调煎,比如,可以執(zhí)照出下劃線顏色與文字顏色的差異己肮。
有老外提出一個便于記憶的“愛恨原則”(LoVe/HAte)士袄,即四種偽類的首字母:LVHA悲关。
再重復(fù)一邊正確的順序:a:link、a:visited娄柳、a:hover寓辱、a:active。
經(jīng)驗補充:
- 鼠標(biāo)經(jīng)過的“未訪問鏈接”同時擁有a:link赤拒、a:hover兩種屬性秫筏,后面的屬性會覆蓋前面的屬性定義;
- 鼠標(biāo)經(jīng)過的“已訪問鏈接”同時擁有a:visited需了、a:hover 兩種屬性跳昼,后面的屬性會覆蓋前面的屬性定義;
所以說:a:hover定義一定要放在a:link肋乍、a:visited的后面鹅颊!