1. 程式人生 > >鏈接偽類

鏈接偽類

鼠標 line one pre type 文本 color erl active

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7     /* 鏈接默認狀態 */
 8         a:link{
 9             color:red;
10             /* 默認沒有下劃線 */
11             text-decoration
:none; 12 } 13 /* 鏈接訪問之後的狀態 */ 14 a:visited{ 15 color:pink; 16 } 17 /* 鼠標放到鏈接上顯示的狀態 */ 18 a:hover{ 19 color:#958304; 20 /* 鼠標經過有下劃線 */ 21 text-decoration:underline; 22 23 } 24 /* 鏈接激活的狀態 */ 25 a:active
{ 26 color:yellow; 27 } 28 29 </style> 30 </head> 31 <body> 32 <a href="#">大家</a> 33 </body> 34 </html>

鏈接偽類:
寫法:a:link{屬性:值;}與a{屬性:值;}效果一樣
a:link{屬性:值;}鏈接默認狀態
a:visited{屬性:值;}鏈接訪問之後的狀態
a:hover{屬性:值;}鼠標放到鏈接上顯示的狀態
a:active{屬性:值;}鏈接激活的狀態(鼠標按在鏈接上不動)
:focus{屬性:值;}獲取焦點
文本修飾:


text-decoration:none(沒有下劃線) underline(有下劃線) line-through(刪除線)

鏈接偽類