在浏览器中，超链接默认情况下字体为蓝色，带有下划线，鼠标单击时字体为红色，单击后为紫色
而在CSS中，我们可以使用超链接伪类来定义超链接在鼠标单击的不同时期的样式
a:link{...}
a:visited{...}
a:hover{...}
a:active{...}
定义四个伪类，必须按照link、visited、hover、active的顺序进行，不然浏览器可能无法正常显示这四种样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>字体样式</title>
<style type="text/css">
a{text-decoration: none;}
a:link{color: red;}
a:visited{color: purple;}
a:hover{color: yellow;}
a:active{color: blue;}
</style>
</head>
<body>
<a href="http://www.bilibili.com" target="_blank">BiliBili</a>
</body>
</html>text-decoration：none表示去掉下划线
在实际开发中，并不是每一个超链接都必须定义这四种状态下的样式，一般只会用到未访问和鼠标经过时的状态
对于未访问时状态，我们直接针对a元素定义就行了，没必要使用a:link
a{
color:red;
text-decoration:none;
}
a:hover{
color:blue;
text-decoration:underline;
}深入了解：hover
事实上，：hover伪类可以定义任何一个元素在鼠标经过时的样式
举例：”:hover”用于div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>字体样式</title>
<style type="text/css">
div{
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: lightblue;
}
div:hover{
background-color: lightcoral;
}
</style>
</head>
<body>
<div>我爱学习</div>
</body>
</html>在鼠标经过一张图片时为其添加边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>字体样式</title>
<style type="text/css">
img:hover{
border: 2px solid skyblue;
}
</style>
</head>
<body>
<img src="maomao.jpg" alt="">
</body>
</html>：hover伪类应用非常广泛，我们要好好掌握
今天的文章CSS基础笔记——超链接样式分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/23799.html
