HTML 链接 - 不同的颜色 | 图形开发学院

HTML 链接以不同的颜色显示，具体取决于它是否已被访问、未访问或处于活动状态。

HTML 链接颜色

默认情况下，链接将如下所示（在所有浏览器中）：

未访问的链接带有下划线和蓝色
访问过的链接带有下划线和紫色
活动链接带有下划线和红色

您可以使用 CSS 更改链接状态颜色：

在这里，未访问的链接将是绿色的，没有下划线。访问过的链接 将是粉红色的，没有下划线。活动链接将为黄色并带有下划线。 此外，当将鼠标悬停在链接上（a：hover）时，它将变为红色并带有下划线：

<style>  
a:link {  
  color: green;  
  background-color: transparent;  
  text-decoration: none;
}  

a:visited {
  color: pink;  
  background-color: transparent;  
  text-decoration: none;
}  

a:hover {
  color: red;  
  background-color: transparent;  
  text-decoration: underline;
}  

a:active {
  color: yellow;  
  background-color: transparent;  
  text-decoration: underline;
}  
</style>

尝试一下 »

链接按钮

通过使用 CSS，还可以将链接样式设置为按钮：

<style>  
a:link, a:visited {
  background-color: #f44336;  
  color: white;  
  padding: 15px 25px;  
  text-align: center;  
  text-decoration: none;  
  display: inline-block;
}  

a:hover, a:active {
  background-color: red;
}  
</style>