1.CSS链接
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。
这四个链接状态是：
· a:link - 正常，未访问过的链接
· a:visited - 用户已访问过的链接
· a:hover - 当用户鼠标放在链接上时
· a:active - 链接被点击的那一刻
2.a:link、a:visited、a:hover、a:active属性
当设置为若干链路状态的样式，也有一些顺序规则：
· a:hover 必须跟在 a:link 和 a:visited后面
· a:active 必须跟在 a:hover后面
以下的这些实例，只是放上一张大概的截图，至于这个链接的四种属性特征均已在代码中实现，大家可以自行在编辑器中运行查看结果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style type="text/css"> a:link {color: #000000;}/*未访问时，链接的样式*/ a:visited {color: #0000FF;}/*访问过之后，链接的样式*/ a:hover {color: #FF0000;}/*鼠标放在链接上，链接的样式*/ a:active {color: #7FFF00;}/*鼠标点击链接不松，链接的样式*/ </style> </head> <body> <p> <b><a href="https://www.jd.com" target="_blank">这是一个链接</a></b> </p> <p> <b>注意：</b> a:hover 必须设置在 a:link 和 a:visited 之后，只有严格排序才可以看到效果。<br /> <b>注意：</b> a:active 必须设置在 a:hover 之后。 </p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style type="text/css"> a:link {text-decoration: none;}/*设置链接的文本修饰，默认没有下划线*/ a:visited {text-decoration: none;} a:hover {text-decoration: underline;}/*鼠标移动到链接上、点击链接时，显示下划线*/ a:active {text-decoration: underline;} </style> </head> <body> <p> <b><a href="https://www.jd.com" target="_blank">这是一个链接</a></b> </p> <p> <b>注意：</b> a:hover 必须设置在 a:link 和 a:visited 之后，只有严格排序才可以看到效果。<br /> <b>注意：</b> a:active 必须设置在 a:hover 之后。 </p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style type="text/css"> a:link {background-color: #00FFFF;} a:visited {background-color: #0000FF;} a:hover {background-color: #FF0000;} a:active {background-color: #8A2BE2} </style> </head> <body> <p> <b><a href="https://www.1688.com" target="_blank">这是一个链接</a></b> </p> <p> <b>注意：</b> a:hover 必须设置在 a:link 和 a:visited 之后，只有严格排序才可以看到效果。<br /> <b>注意：</b> a:active 必须设置在 a:hover 之后。 </p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style type="text/css"> a.one:link {color: #0000FF;} a.one:visited {color: #FF0000;} a.one:hover {color: #8A2BE2;} a.two:link {color: #0000FF;} a.two:visited {color: #FF0000;} a.two:hover {font-size: 36px;} a.three:link {color: #0000FF;} a.three:visited {color: #FF0000;} a.three:hover {background-color: #8A2BE2;} a.four:link {color: #0000FF;} a.four:visited {color: #FF0000;} a.four:hover {font-family: "楷体", serif;} a.five:link {color: #0000FF; text-decoration: none;} a.five:visited {color: #FF0000; text-decoration: none;} a.five:hover {text-decoration: underline;} </style> </head> <body> <p><b><a class="one" href="https://www.huawei.com" target="_blank">这个链接改变字体颜色</a></b></p> <p><b><a class="two" href="https://www.mi.com" target="_blank">这个链接改变字体大小</a></b></p> <p><b><a class="three" href="https://www.heytap.com" target="_blank">这个链接改变背景颜色</a></b></p> <p><b><a class="four" href="https://shop.vivo.com.cn" target="_blank">这个链接改变字体类型</a></b></p> <p><b><a class="five" href="https://www.tmall.com" target="_blank">这个链接改变文字修饰</a></b></p> </body> </html>
