CSS 基础教程-039 CSS 向链接添加不同的样式

hrs 提交于 2020/01/12 - 17:10 , 周日

这一节,我们来为链接添加各种样式。

实例代码:

<!doctype html>
<head>
<meta charset="utf-8">
<style type="text/css">

a.one:link{color:black;}
a.one:visited{color:green;}
a.one:hover{color:red;}
a.one:active{color:blue}
a.two:hover{font-size:30px;}
a.there:hover{background-color:green;
padding:10px;
}
a.four:hover{font-family:"微软雅黑";}
a.four:link{color:green;}
a.four:visited{color:blue;}


a.five:link{text-decoration:none;}
a.five:visited{text-decoration:none;}
a.five:hover{text-decoration:underline;}
a.five:active{text-decoration:underline;}
</style>
</head>
<html>
<body>
<h1>链接多样式实例</h1>
<p ><a class="one" href="https://dwoke.com" target="_blank">这个链接改变颜色</a></p>
<p > <a class="two" href="https://dwoke.com" target="_blank">这个链接改变字体尺寸</a></p>
<p ><a class="there" href="https://dwoke.com" target="_blank">这个链接改变背景颜色</a></p>
<p ><a class="four" href="https://dwoke.com" target="_blank">这个链接改变字体</a></p>
<p ><a class="five" href="https://dwoke.com" target="_blank">这个链接改变文本的装饰</a></p>

</body>
</html>

运行效果:

css_039.png

注意:这个改变字体的实例在运行后没有效果。

标签