1.为访问/未访问链接添加不同的颜色
a:link {
color: black; /* 未访问链接*/
}
a:visited {
color: greenyellow; /* 访问后的链接*/
}
a:hover {
color: lightcoral; /* 鼠标移动到链接上*/
}
a:active {
color: blue; /* 鼠标点击链接*/
}
<body>
<a href="https://www.baidu.com">这是一个链接</a>
<P><b>注意:</b>a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</P>
<p><b>注意:</b>a:active 必须在 a:hover 之后。</p>
</body>
2.在链接上使用文本装饰
a:link {text-decoration:none;} /* unvisited link */
a:visited {text-decoration:none;} /* visited link */
a:hover {text-decoration:underline;} /* mouse over link */
a:active {text-decoration:underline;} /* selected link */
<body>
<p><b><a href="/css/" target="_blank">This is a link</a></b></p>
<p><b>注意:</b> hover必须在:link和 a:visited之后定义才有效.</p>
<p><b>注意:</b>active必须在hover之后定义是有效的.</p>
</body>
3.指定链接的背景颜色
a:link {background-color:#B2FF99;} /* 未访问链接 */
a:visited {background-color:#FFFF85;} /* 已访问链接 */
a:hover {background-color:#FF704D;} /* 鼠标移动到链接上 */
a:active {background-color:#FF704D;} /* 鼠标点击时 */
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意:</b> hover必须在:link和 a:visited之后定义才有效.</p>
<p><b>注意:</b>active必须在hover之后定义是有效的.</p>
</body>
4.超链接添加其他样式
a.one:link {color:red;}
a.one:hover {color:yellow;}
a.one:visited {color:blue;}
a.two:link {color:red;}
a.two:hover {font-size:250%;}
a.two:visited{color:blue;}
a.three:link {color:red;}
a.three:hover {background-color:yellowgreen;}
a.three:visited{color:blue;}
a.four:link {color:red;}
a.four:hover {font-family:Georgia, serif;}
a.four:visited{color:blue;}
a.five:link {color:red; text-decoration:none;}
a.five:hover {text-decoration:underline;}
a.five:visited{color:blue;}
<p>将鼠标移至链接上改变样式.</p>
<p><a class="one" href="https://www.baidu.com">这个链接改变颜色</a></p>
<p><a class="two" href="https://www.baidu.com">这个链接改变字体大小</a></p>
<p><a class="three" href="https://www.baidu.com">这个链接改变背景颜色</a></p>
<p><a class="four" href="https://www.baidu.com">这个链接改变字体类型</a></p>
<p><a class="five" href="https://www.baidu.com">这个链接改变文字修饰</a></p>
5.高级-创建链接框
a:link,a:visited {
display: block;
text-decoration: none;
font-weight: bold;
color: white;
background-color: greenyellow;
text-align: center;
padding:4px;
width: 120px;
}
a:hover {
background-color: green;
}
<body>
<a href="#" target="_blank">这是一个链接</a>
</body>
