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>
亲自试一试 »
要了解有关 CSS 的更多信息,请访问我们的 CSS 教程。
HTML 链接标签
标签 | 描述 |
---|---|
<a> | 定义超链接 |
要查看所有可用 HTML 标签的完整列表,请访问我们的 HTML 标签参考。