如何更改 HTML 中链接的颜色?

htmlweb developmentfront end technology更新于 2025/3/13 3:56:17

链接是从一个网页到另一个网页的连接。

我们可以将页面链接添加到网页。HTML 链接是超链接。<a> 标签定义超链接，用于从一个页面链接到另一个页面。 href 属性与 <a> 标签一起使用，指示链接的目标。

要在 HTML 页面中创建页面链接，请使用 <a> 和 </a> 标签，并使用 href 属性定义链接。我们应该在 <body>…</body> 标签内使用 <a>…</a> 标签。

链接文本可见。点击链接文本将导航到指定的 URL 地址。

默认情况下，链接在浏览器的网页上显示如下。

未访问的链接带有下划线且为蓝色
已访问的链接带有下划线且为紫色
活动链接带有下划线且为红色

语法

以下是在网页上创建页面链接的语法。

<a href="https://www.Google.com/">链接文本 </a>

我们可以使用样式表更改链接的颜色。

示例

以下是使用 CSS 更改链接颜色的示例程序。


<!DOCTYPE html>
<html>
<head>
   <style>
      a:link {
         color: greenyellow;
         background-color: transparent;
         text-decoration: none;
      }
      a:visited {
         color: deepskyblue;
         background-color: transparent;
         text-decoration: none;
      }
      a:active {
         color: yellow;
         background-color: transparent;
      }
   </style>
</head>
<body>
   <a href="https://www.youtube.com/watch?v=qz0aGYrrlhU" >HTML Tutorial</a>
</body>
</html>

我们已将未访问链接的颜色更改为绿黄。

我们已将已访问链接的颜色更改为深天蓝色，将活动链接的颜色更改为黄色。

示例

以下是另一个使用 CSS 更改链接颜色的示例程序。


<!DOCTYPE html>
<html>
<head>
   <title>HTML Link Color</title>
</head>
<body>
   <h2>About</h2>
   <p>
      Our <a href="/about/about_team.htm" style="color: red">Team</a> comprises of programmers, writers, and analysts.
   </p>
</body>
</html>

示例

下面是另一个使用 CSS 改变链接颜色的示例程序。


<!DOCTYPE html>
<html>
<head>
   <title>How to link pages using absolute URL in HTML?</title>
   <style>
      a:link {
         text-decoration: none;
      }
      a:visited {
         text-decoration: none;
      }
      a:hover {
         text-decoration: underline;
      }
      a:active {
         text-decoration: underline;
      }
   </style>
</head>
<body>
<h2>Click the link below to redirect to facebook login page</h2>
<a href="https://www.facebook.com/login/">facebook login</a>
</body>
</html>