HTML超链接颜色怎么改？
2025-10-06 21:09:57
0浏览
收藏
想要修改HTML超链接的默认颜色吗？本文为你详细解读如何通过CSS轻松实现！浏览器默认的链接颜色（未访问蓝色、已访问紫色、点击红色）可以通过CSS的伪类选择器`a:link`、`a:visited`、`a:hover`和`a:active`进行自定义。分别对应链接的未访问、已访问、鼠标悬停和点击激活状态。通过示例代码，你可以学习如何为不同状态的链接设置个性化的颜色方案，并了解如何将样式应用到整个页面或特定区域。此外，文章还强调了可访问性的重要性，建议在修改链接颜色的同时，配合下划线等视觉提示，确保用户能够清晰地识别链接，提升网站的用户体验。快来学习如何打造更具个性化的网页链接风格吧！
默认链接颜色由浏览器设定，可通过CSS的a:link、a:visited、a:hover、a:active伪类自定义未访问、已访问、悬停和点击状态的颜色，并建议配合下划线等视觉提示以提升可访问性。
HTML超链接的默认字体颜色是由浏览器设定的，通常未访问的链接是蓝色，已访问的是紫色，点击时是红色。要修改这些默认颜色，你可以使用CSS来覆盖默认样式。
使用CSS修改链接颜色
通过 a:link、a:visited、a:hover 和 a:active 这四个伪类，可以分别设置链接在不同状态下的颜色：
- a:link：未访问的链接
- a:visited：已访问的链接
- a:hover：鼠标悬停时
- a:active：正在点击时
示例代码：
<style>
a:link {
color: #007bff; /* 自定义未访问颜色 */
text-decoration: none;
}
a:visited {
color: #6c757d; /* 自定义已访问颜色 */
}
a:hover {
color: #0056b3; /* 鼠标悬停颜色 */
text-decoration: underline;
}
a:active {
color: #dc3545; /* 点击瞬间颜色 */
}
</style>
应用到整个页面或特定元素
如果你想让全站链接统一风格，把上面的CSS放在 中的
