如何在HTML中更改連結的顏色？

連結是指從一個網頁到另一個網頁的連線。

我們可以在網頁中新增頁面連結。HTML連結是超連結。<a>標籤定義了一個超連結，用於在一個頁面之間建立連結。href屬性與<a>標籤一起使用，指示連結的目標。

要在HTML頁面中建立頁面連結，請使用<a>和</a>標籤，並使用href屬性定義連結。我們應該在<body>…</body>標籤內使用<a>…</a>標籤。

連結文字是可見的。點選連結文字將導航到指定的URL地址。

預設情況下，連結在瀏覽器網頁上的顯示如下。

  • 未訪問的連結帶下劃線且為藍色

  • 已訪問的連結帶下劃線且為紫色

  • 活動的連結帶下劃線且為紅色

語法

以下是建立網頁連結的語法。

<a href="https://www.Google.com/"> text of the link </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://#/login/">facebook login</a>
</body>
</html>

懸停在連結上後，它將更改樣式。

更新於：2023年9月6日

39K+ 次瀏覽

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告