这篇文章主要介绍CSS如何为链接设置样式，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

CSS 链接
我们能够以不同的方法为链接设置样式。
能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
链接的四种状态：
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
实例

a:link{color:#FF0000;}/*未被访问的链接*/a:visited{color:#00FF00;}/*已被访问的链接*/a:hover{color:#FF00FF;}/*鼠标指针移动到链接上*/a:active{color:#0000FF;}/*正在被点击的链接*/

提示：当为链接的不同状态设置样式时，请按照以下次序规则：
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后

文本修饰
text-decoration 属性大多用于去掉链接中的下划线：

a:link{text-decoration:none;}a:visited{text-decoration:none;}a:hover{text-decoration:underline;}a:active{text-decoration:underline;}


背景色
background-color 属性规定链接的背景色：

a:link{background-color:#B2FF99;}a:visited{background-color:#FFFF85;}a:hover{background-color:#FF704D;}a:active{background-color:#FF704D;}


更多链接样式

<!DOCTYPEhtml><html><head><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:"微软雅黑";}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><p>请把鼠标指针移动到下面的链接上，看看它们的样式变化。</p><p><b><aclass="one"href="#">这个链接改变颜色</a></b></p><p><b><aclass="two"href="#">这个链接改变字体尺寸</a></b></p><p><b><aclass="three"href="#">这个链接改变背景色</a></b></p><p><b><aclass="four"href="#">这个链接改变字体</a></b></p><p><b><aclass="five"href="#">这个链接改变文本的装饰</a></b></p></body></html>


高级 - 创建链接框

<!DOCTYPEhtml><html><head><style>a:link,a:visited{display:block;font-weight:bold;font-size:14px;font-family:Verdana,Arial,Helvetica,sans-serif;color:#FFFFFF;background-color:#98bf21;width:120px;text-align:center;padding:4px;text-decoration:none;}a:hover,a:active{background-color:#7A991A;}</style></head><body><ahref="http://www.yisu.com/"target="_blank">HuluMiao</a></body></html>

注释：本实例演示了更高级的示例，结合了若干种 CSS 属性，来把链接显示为方框。

以上是“CSS如何为链接设置样式”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！