這里需要注意的是書寫鏈接變化的代碼時,順序是一定的,即按照
A:link 鏈接文字的普通狀態
A:visited 鏈接被鼠標點擊過后的狀態
A:hover 鼠標移到鏈接文字上的狀態
A:active 鼠標點擊了鏈接,但新頁面還沒出現時的狀態
的順序定義,否則可能出現意想不到的問題
從以上超級鏈接的形式可總結如下格式
A:link {屬性名稱1:屬性值1;屬性名稱2:屬性值2;………}
A:visited {屬性名稱1:屬性值1;屬性名稱2:屬性值2;………}
A:hover {屬性名稱1:屬性值1;屬性名稱2:屬性值2;………}
A:active {屬性名稱1:屬性值1;屬性名稱2:屬性值2;………}
文本修飾屬性text-decoration允許通過以下屬性值來修飾文本
Underline (下劃線),overline(上劃線),line-through(刪除線),blink(閃爍)和默認的none
問題引出:要是想在一個頁面中實現不同的鏈接效果,請看如下例子
<html>
<head>
<style type="text/css">
A.a1:link {color:blue; text-decoration:none; font-size:12pt}
A.a1:visited {color:brown; text-decoration:none; font-size:12pt}
A.a1:hover {color:red; text-decoration:underline; font-size:12pt}
A.a1:active {color:green; text-decoration:underline;font-size:12pt}
A.a2:link {color:red; text-decoration:underline; font-size:12pt}
A.a2:visited {color:blue; text-decoration:none; font-size:12pt}
A.a2:hover {color:green; text-decoration:underline; font-size:12pt}
A.a2:active {color:brown; text-decoration:underline;font-size:12pt}
A.a3:link {color:yellow; text-decoration:none; font-size:12pt}
A.a3:visited {color:navy; text-decoration:none; font-size:12pt}
A.a3:hover {color:white; text-decoration:underline; font-size:12pt}
A.a3:active {color:oranage; text-decoration:underline;font-size:12pt}
</style></head>
<a href="http://www.sohu.com" class=a1>搜狐</a>
<a href="http://www.newhua.com" class=a2>華軍</a>
<a href="http://www.chinaren.com" class=a3>中國人</a>
</body></html>
新聞熱點
疑難解答
