css 超链接添加其他样式实例 - 自学教程(runoops.com)

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <title>css 超链接添加其他样式 实例 - 自学教程(runoops.com)</title>
 <style>
 a.one:link {
 color: #ff0000;
 }

a.one:visited {
            color: #0000ff;
        }

a.one:hover {
            color: #ffcc00;
        }

a.two:link {
            color: #ff0000;
        }

a.two:visited {
            color: #0000ff;
        }

a.two:hover {
            font-size: 150%;
        }

a.three:link {
            color: #ff0000;
        }

a.three:visited {
            color: #0000ff;
        }

a.three:hover {
            background: #66ff66;
        }

a.four:link {
            color: #ff0000;
        }

a.four:visited {
            color: #0000ff;
        }

a.four:hover {
            font-family: Georgia, serif;
        }

a.five:link {
            color: #ff0000;
            text-decoration: none;
        }

a.five:visited {
            color: #0000ff;
            text-decoration: none;
        }

a.five:hover {
 text-decoration: underline;
 }
 </style>
</head>

<body>
 将鼠标移至链接上改变样式.

<a class="one" href="//runoops.com/css-link.html" target="_blank">这个链接改变颜色</a>
 <a class="two" href="//runoops.com/css-link.html" target="_blank">这个链接改变字体大小</a>
 <a class="three" href="//runoops.com/css-link.html" target="_blank">这个链接改变背景颜色</a>
 <a class="four" href="//runoops.com/css-link.html" target="_blank">这个链接改变字体类型</a>
 <a class="five" href="//runoops.com/css-link.html" target="_blank">这个链接改变文字修饰</a>
</body>

</html>