CSS教程(三)偽類——動態鏈接
2006/1/23 21:48:00

 

偽類可以看做是一種特殊的類選擇符,是能被支持CSS的瀏覽器自動所識別的特殊選擇符。它的最大的用處就是可以對鏈接在不同狀態下定義不同的樣式效果。
1.  語法
偽類的語法是在原有的語法里加上一個偽類(pseudo-class):
selector:pseudo-class {property: value}
(選擇符:偽類 {屬性: 值})
偽類和類不同,是CSS已經定義好的,不能象類選擇符一樣隨意用別的名字,根據上面的語法可以解釋為對象(選擇符)在某個特殊狀態下(偽類)的樣式。
類選擇符及其他選擇符也同樣可以和偽類混用:
selector.class:pseudo-class {property: value}
(選擇符.類:偽類 {屬性: 值})
2.  錨的偽類
我們最常用的是4種a(錨)元素的偽類,它表示動態鏈接在4種不同的狀態:link、visited、active、hover(未訪問的鏈接、已訪問的鏈接、激活鏈接和鼠標停留在鏈接上)。我們把它們分別定義不同的效果:
a:link {color: #FF0000; text-decoration: none} /* 未訪問的鏈接 */
a:visited {color: #00FF00; text-decoration: none} /* 已訪問的鏈接 */
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠標在鏈接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活鏈接 */
(上面這個例子中,這個鏈接未訪問時的顏色是紅色并無下劃線,訪問后是綠色并無下劃線,激活鏈接時為藍色并有下劃線,鼠標在鏈接上時為紫色并有下劃線)
注意:有時這個鏈接訪問前鼠標指向鏈接時有效果,而鏈接訪問后鼠標再次指向鏈接時卻無效果了。這是因為你把a:hover放在了a:visited的前面,這樣的話由于后面的優先級高,當訪問鏈接后就忽略了a:hover的效果。所以根據疊層順序,我們在定義這些鏈接樣式時,一定要按照a:link, a:visited, a:hover, a:actived的順序書寫。
3.  偽類和類選擇符
將偽類和類組合起來用,就可以在同一個頁面中做幾組不同的鏈接效果了,例如,我們定義一組鏈接為紅色,訪問后為藍色;另一組為綠色,訪問后為黃色:
a.red:link {color: #FF0000}
a.red:visited {color: #0000FF}
a.blue:link {color: #00FF00}
a.blue:visited {color: #FF00FF}
現在應用在不同的鏈接上:
<a class="red" href="...">這是第一組鏈接</a>
<a class="blue" href="...">這是第二組鏈接</a>
4.  其他偽類
此外CSS2還定義了首字和首行(first-letter和first-line)的偽類,可以對元素的首字或首行設定不同的樣式。
下面看這個例子,我們在段落標記里定義文本首字尺寸為默認大小的3倍:
<style type=”text/css”>
p:first-letter {font-size: 300%}
</style>
……
<p>
這是一個段落,這個段落的首字被放大了。
</p>
我們再定義一個首行樣式的例子:
<style type=”text/css”>
div:first-line {color: red}
</style>
……
<div>
<p>
這是段落的第一行
這是段落的第二行
這是段落的第三行
</p>
</div>
(上例中段落的第一行為紅色,第二、三行為默認顏色)
注意:首字和首行的偽類需要IE5.5以上的版本支持。


返回列表
返回首頁 主站蜘蛛池模板: 国产伦精品一区二区三区视频金莲| 精品人妻久久久久久888| 成年在线观看免费人视频草莓| 伊人久久大香线蕉观看| 4480yy苍苍私人| 扒开两腿中间缝流白浆在线看| 人人妻人人澡人人爽人人dvd| 五月婷婷一区二区| 在线观看h网站| 一卡二卡三卡在线| 无码人妻精品一区二区三18禁| 乡村大乱淫交换第一章| 窝窝午夜看片成人精品| 国产福利萌白酱喷水视频铁牛| 99久久99久久免费精品小说| 日本黄色电影在线| 亚洲乱码国产一区三区| 精品人妻无码一区二区色欲产成人 | 激情偷乱人伦小说视频在线| 国产欧美va欧美va香蕉在| 一级做a爱片就在线看| 日本在线高清版卡免v| 人人妻人人做人人爽精品| 精品欧美高清不卡在线| 国产精品亚洲аv无码播放| 中文字幕亚洲欧美| 日本卡三卡四卡免费| 久久精品私人影院免费看| 浮生陌笔趣阁免费阅读| 国产乱人伦偷精品视频免下载| 91福利电影福利在线观看 | 日韩丰满少妇无码内射| 亚洲av永久无码精品三区在线4| 精品国产第一国产综合精品| 国产第一页福利| 1024香蕉视频| 好吊色青青青国产在线播放| 久久精品老司机| 有没有毛片网站| 人夫的堕落变装| 精品一二三区久久AAA片|