如何在 HTML 中更改链接颜色

2025年3月25日 | 阅读 4 分钟

在所有浏览器中，链接以以下四种方式显示：

未访问的链接：未点击的链接称为未访问的链接。默认情况下，其颜色为蓝色。

已访问的链接：已点击的链接称为已访问的链接。默认情况下，其颜色为紫色。

活动链接：已点击且仍处于活动状态的链接称为活动链接。默认情况下，其颜色为红色。

悬停链接：当鼠标光标悬停在链接上时，该链接称为悬停链接。此链接的颜色在悬停时不会改变。如果悬停在已访问的链接上，则颜色将与已访问的链接相同。同样，如果悬停在未访问的链接和活动链接上，则颜色将与未访问的链接和活动链接相同。我们可以利用 HTML 和 CSS 手动更改悬停链接颜色。

我们可以借助 “style” 属性在 HTML 中更改链接状态颜色。我们将使用 “color” 属性为链接指定颜色。

如果我们想使用用于链接到另一个页面的内联样式属性来更改链接颜色，那么我们必须遵循以下步骤。通过这些步骤，我们可以轻松更改链接的颜色。

步骤 1：首先，我们必须在任何文本编辑器中输入 HTML 代码，或打开我们想要使用 “style” 属性更改链接颜色的现有 HTML 文件。

<!DOCTYPE html>  
<html>     
<head>      
<title>     
Change the link color using the style attribute  
</title>  
</head>  
<body>   
This page helps you to understand how to change the link color using the style attribute.  
<br>  
Click <a href="">here</a> to move to the home page of our site.   
</body>  
</html>  

步骤 2：现在，将光标放在我们想要更改其链接颜色的起始 a 标签内。然后，在该标签内输入内联样式属性。

步骤 3：现在，我们必须在样式属性中输入 color 属性。然后，我们必须指定我们想要显示的颜色名称。

步骤 4：最后，我们必须保存 HTML 文件，然后运行该文件。

<!DOCTYPE html>  
<html>     
<head>      
<title>     
Change the link color using the style attribute  
</title>  
</head>  
<body>   
This page helps you to understand how to change the link color using the style attribute.  
<br>  
Click <a href="" style="color: red">here</a> to move to the home page of our site.   
</body>  
</html>  

上面 HTML 代码的输出显示在以下屏幕截图中

我们可以使用 CSS 属性来更改链接颜色。

让我们看一些使用 CSS 属性更改链接颜色的示例。

示例 1

在此示例中，我们将未访问的链接应用粉红色，将已访问的链接应用珊瑚色，将活动链接应用绿色，将悬停链接应用洋红色。

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Link colors</title>
<style>
a:link {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: coral;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: magenta;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: green;
  background-color: transparent;
  text-decoration: underline;
}
</style>
</head>
<body>

<h2>Link Colors</h2>

<p>We can alter the colors of the links using the color CSS property.</p>

<a href="#link" target="_blank">HTML link</a> 

</body>
</html>

输出

未访问的链接为粉红色

悬停链接为洋红色

已访问的链接为珊瑚色

活动链接为绿色

示例 2

在此示例中，我们将利用 CSS 的“color”属性将未访问的链接应用橙红色，将已访问的链接应用酸橙色，将活动链接应用海绿色，将悬停链接应用深红色。

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Changing link colors utilizing CSS</title>
<style>
a:link {
  color: orangered;
}
a:visited {
  color: lime;
}
a:hover {
  color: darkred;
}
a:active {
  color: seagreen;
}
</style>
</head>
<body>

<h2>Link Colors</h2>

<a href="#link" target="_blank">Click here!!</a> 

</body>
</html>

输出

未访问的链接为橙红色

悬停链接为深红色

已访问的链接为酸橙色

活动链接为海绿色

结论

在本文中，我们了解了如何在 HTML 中更改链接颜色。以下是一些需要记住的要点：

使用 “style” 属性，并在其中指定 “color” 属性来为链接提供颜色。
使用 <style> 标签，并在 <style> 标签内定义一个名为 “color” 的 CSS 属性来提供链接颜色。

下一主题如何在Html中将图像制成链接

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

如何在 HTML 中更改链接颜色

示例 1

示例 2

结论

相关帖子

如何创建 Discord 机器人

HTML required 属性