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>

亲自试一试

要了解更多关于 CSS 的知识，请访问我们的 CSS 教程。

HTML 链接标签

如需查看所有可用 HTML 标签的完整列表，请访问我们的 HTML 标签参考。