首頁 > web前端 > css教學 > 如何改變CSS中的連結顏色?

如何改變CSS中的連結顏色?

WBOY
發布: 2023-09-10 08:17:04
轉載
755 人瀏覽過

如何改變CSS中的連結顏色?

連結是指HTML錨點元素,以標籤表示。這個元素用於創建超鏈接,允許用戶在網頁和其他資源之間導航。

CSS (Cascading Style Sheets), is a powerful language used to control the visual presentation of web pages. One of the most important things we can do with CSS is changing the color of links on the webpage. will cover different ways to change the color of links in CSS.

透過使用 "a" 選擇器

This is the basic way to change the color of links in CSS. This selector targets all links on a webpage. The color property is used to change the color of the text of the link. Here is an example −

a{
   color:blue;
}
登入後複製

Example

的中文翻譯為:

範例

Here is an example to change the link color using “a” selector in CSS.

<html>
<head>
   <title>Change link color in CSS</title>
   <style>
      body{
         text-align:center;
      }
      a{
         color:blue;
      }
   </style>
</head>
<body>
   <h2>Change the link color in CSS</h2>
   <a href = "https://www.tutorialspoint.com/">  link to tutorialspoint </a>
</body>
</html>
登入後複製

By using "id" and "class" selector

如果我們想要改變特定連結的顏色,我們可以使用類別選擇器或ID選擇器。例如,如果我們在某些​​連結上有一個名為"special-link"的類,我們將使用以下程式碼來改變這些連結的顏色 −

.special-link{
   color:blue; (By using class seletor)
}
#special-link{
   color:blue; (By using id seletor)
}
登入後複製

Example

的中文翻譯為:

範例

這是一個使用「ID」和「Class」選擇器在CSS中更改連結顏色的範例。

<html>
<head>
   <title>Change link color in CSS</title>
   <style>
      body{
         text-align:center;
      }
      #special-link {
         color: red;
      }
      .special-link {
         color: green;
      }
   </style>
</head>
<body>
   <h2>Change link color in CSS</h2>
   <a id="special-link" href = "https://www.tutorialspoint.com/"> Change the link color with ID Selector in CSS </a>
   <p></p>
   <a class="special-link" href = "https://www.tutorialspoint.com/"> Change the link color with CLASS Selector in CSS </a>
</body>
</html>
登入後複製

透過使用「:hover」偽類別

To change the color of a link when it is hovered over, we use the ":hover" pseudo-class. For example

a:hover {
   color: red;
}
登入後複製

當滑鼠懸停在連結上時,此CSS將更改連結的顏色為紅色。

Example

的中文翻譯為:

範例

這是一個使用CSS中的「.hover」偽類別來改變連結顏色的範例。

<html>
<head>
   <title>Change link color in CSS</title>
   <style>
      body{
         text-align:center;
      }
      a {
         color: blue;
      }
      a:hover {
         color: red;
      } 
   </style>
</head>
<body>
   <h2>Change link color in CSS</h2>
   <a id="special-link" href = "https://www.tutorialspoint.com/"> Change the link color with Mouse-hover in CSS </a>
</body>
</html>
登入後複製

結論

在CSS中更改連結的顏色是增強網站視覺效果的簡單有效方法。透過使用選擇器、偽類和屬性,我們可以針對特定的連結或連結狀態,並將它們的顏色變更為與設計相符。

以上是如何改變CSS中的連結顏色?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:tutorialspoint.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板