偽類——?jiǎng)討B(tài)鏈接
偽類可以看做是一種特殊的類選擇符,是能被支持CSS的瀏覽器自動(dòng)所識(shí)別的特殊選擇符。它的大的用處就是可以對(duì)鏈接在不同狀態(tài)下定義不同的樣式效果。
1. 語(yǔ)法
偽類的語(yǔ)法是在原有的語(yǔ)法里加上一個(gè)偽類(pseudo-class):
selector:pseudo-class {property: value}
(選擇符:偽類 {屬性: 值})
偽類和類不同,是CSS已經(jīng)定義好的,不能象類選擇符一樣隨意用別的名字,根據(jù)上面的語(yǔ)法可以解釋為對(duì)象(選擇符)在某個(gè)特殊狀態(tài)下(偽類)的樣式。
類選擇符及其他選擇符也同樣可以和偽類混用:
selector.class:pseudo-class {property: value}
(選擇符.類:偽類 {屬性: 值})
2. 錨的偽類
我們最常用的是4種a(錨)元素的偽類,它表示動(dòng)態(tài)鏈接在4種不同的狀態(tài):link、visited、active、hover(未訪問(wèn)的鏈接、已訪問(wèn)的鏈接、激活鏈接和鼠標(biāo)停留在鏈接上)。我們把它們分別定義不同的效果:
a:link {color: #FF0000; text-decoration: none} /* 未訪問(wèn)的鏈接 */
a:visited {color: #00FF00; text-decoration: none} /* 已訪問(wèn)的鏈接 */
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠標(biāo)在鏈接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活鏈接 */
(上面這個(gè)例子中,這個(gè)鏈接未訪問(wèn)時(shí)的顏色是紅色并無(wú)下劃線,訪問(wèn)后是綠色并無(wú)下劃線,激活鏈接時(shí)為藍(lán)色并有下劃線,鼠標(biāo)在鏈接上時(shí)為紫色并有下劃線)
注意:有時(shí)這個(gè)鏈接訪問(wèn)前鼠標(biāo)指向鏈接時(shí)有效果,而鏈接訪問(wèn)后鼠標(biāo)再次指向鏈接時(shí)卻無(wú)效果了。這是因?yàn)槟惆補(bǔ):hover放在了a:visited的前面,這樣的話由于后面的優(yōu)先級(jí)高,當(dāng)訪問(wèn)鏈接后就忽略了a:hover的效果。所以根據(jù)疊層順序,我們?cè)诙x這些鏈接樣式時(shí),一定要按照a:link, a:visited, a:hover, a:actived的順序書寫。
3. 偽類和類選擇符
將偽類和類組合起來(lái)用,就可以在同一個(gè)頁(yè)面中做幾組不同的鏈接效果了,例如,我們定義一組鏈接為紅色,訪問(wèn)后為藍(lán)色;另一組為綠色,訪問(wèn)后為黃色:
a.red:link {color: #FF0000}
a.red:visited {color: #0000FF}
a.blue:link {color: #00FF00}
a.blue:visited {color: #FF00FF}
現(xiàn)在應(yīng)用在不同的鏈接上:
<a class="red" href="...">這是第一組鏈接</a>
<a class="blue" href="...">這是第二組鏈接</a>
4. 其他偽類
此外CSS2還定義了[u]首字[/u]和[u]首行[/u](first-letter和first-line)的偽類,可以對(duì)元素的首字或首行設(shè)定不同的樣式。
下面看這個(gè)例子,我們?cè)诙温錁?biāo)記里定義文本首字尺寸為默認(rèn)大小的3倍:
<style type=”text/css”>
p:first-letter {font-size: 300%}
</style>
……
<p>
這是一個(gè)段落,這個(gè)段落的首字被放大了。
</p>
我們?cè)俣x一個(gè)首行樣式的例子:
<style type=”text/css”>
div:first-line {color: red}
</style>
……
<div>
<p>
這是段落的第一行
這是段落的第二行
這是段落的第三行
</p>
</div>
(上例中段落的第一行為紅色,第二、三行為默認(rèn)顏色)
注意:首字和首行的偽類需要IE5.5以上的版本支持。
本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司!
文章題目:偽類——?jiǎng)討B(tài)鏈接
轉(zhuǎn)載來(lái)源:http://jinyejixie.com/news30/312030.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供移動(dòng)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)公司、品牌網(wǎng)站制作、企業(yè)網(wǎng)站制作、網(wǎng)站內(nèi)鏈、網(wǎng)站設(shè)計(jì)公司
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源:
創(chuàng)新互聯(lián)