Link:
1、a:link {color: #FF0000} /* 未访问时的状态 。
2、a:visited {color: #00FF00} /* 已访问过的状态 。
3、a:hover {color: #FF00FF} /* 鼠标移动到链接上时的状态。
4、a:active {color: #0000FF} /* 鼠标按下去时的状态 。
1 <style> 2 a:link{ 3 color: #ff0000; 4 } 5 a:visited{ 6 color: #00ff00; 7 } 8 a:hover{ 9 color: #0000ff; 10 } 11 a:active{ 12 color: #ff00ff; 13 text-decoration:underline; 14 } 15 </style>
(2)删除超链接的下划线：
【文本修饰】
text-decoration 属性主要用于删除链接中的下划线：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS-link删除下划线</title> 6 <style> 7 a:link {text-decoration:none;} /* unvisited link */ 8 a:visited {text-decoration:none;} /* visited link */ 9 a:hover {text-decoration:underline;} /* mouse over link */ 10 a:active {text-decoration:underline;} /* selected link */ 11 </style> 12 </head> 13 14 <body> 15 <p><b><a href="html5-2/chap2.html" target="_blank">This is a link</a></b></p> 16 <p><b>注意:</b> hover必须在:link和 a:visited之后定义才有效.</p> 17 <p><b>注意:</b>active必须在hover之后定义是有效的.</p> 18 </body> 19 </html>
【背景颜色】
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>菜鸟教程(runoob.com)</title> 6 <style> 7 a:link {background-color:#B2FF99;} /* 未访问链接 */ 8 a:visited {background-color:#FFFF85;} /* 已访问链接 */ 9 a:hover {background-color:#FF704D;} /* 鼠标移动到链接上 */ 10 a:active {background-color:#FF704D;} /* 鼠标点击时 */ 11 </style> 12 </head> 13 14 <body> 15 <p><b><a href="html5-2/chap2.html" target="_blank">这是一个链接</a></b></p> 16 <p><b>注意:</b> hover必须在:link和 a:visited之后定义才有效.</p> 17 <p><b>注意:</b>active必须在hover之后定义是有效的.</p> 18 </body> 19 </html>
2.List:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS-LINK</title> 6 <style> 7 a:link {color:#ff0000;} /* 未访问链接*/ 8 a:visited {color:#00FF00;} /* 已访问链接 */ 9 a:hover {color:#0000FF;} /* 鼠标移动到链接上 */ 10 a:active {color:#ff00FF;} /* 鼠标点击时 */ 11 </style> 12 </head> 13 <body> 14 <p><b><a href="html5-2/chap2.html" target="_blank">这是一个链接</a></b></p> 15 <p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p> 16 <p><b>注意：</b> a:active 必须在 a:hover 之后。</p> 17 </body> 18 </html>