CSS 鏈接

通過 CSS，可以用不同的方式設置鏈接的樣式。

文本鏈接 文本鏈接 鏈接按鈕 鏈接按鈕

設置鏈接樣式

鏈接可以使用任何 CSS 屬性（例如 color、font-family、background 等）來設置樣式。

實例

a {
  color: hotpink;
}

親自試一試

此外，可以根據鏈接處于什么狀態來設置鏈接的不同樣式。

四種鏈接狀態分別是：

  • a:link - 正常的，未訪問的鏈接
  • a:visited - 用戶訪問過的鏈接
  • a:hover - 用戶將鼠標懸停在鏈接上時
  • a:active - 鏈接被點擊時

實例

/* 未被訪問的鏈接 */
a:link {
  color: red;
}
/* 已被訪問的鏈接 */
a:visited {
  color: green;
}
/* 將鼠標懸停在鏈接上 */
a:hover {
  color: hotpink;
}
/* 被選擇的鏈接 */
a:active {
  color: blue;
}

親自試一試

如果為多個鏈接狀態設置樣式，請遵循如下順序規則：

  • a:hover 必須 a:link 和 a:visited 之后
  • a:active 必須在 a:hover 之后

文本裝飾

text-decoration 屬性主要用于從鏈接中刪除下劃線：

實例

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}

親自試一試

背景色

background-color 屬性可用于指定鏈接的背景色：

實例

a:link {
  background-color: yellow;
}
a:visited {
  background-color: cyan;
}
a:hover {
  background-color: lightgreen;
}
a:active {
  background-color: hotpink;
}

親自試一試

鏈接按鈕

本例演示了一個更高級的例子，其中我們組合了多個 CSS 屬性，將鏈接顯示為框/按鈕：

實例

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center; 
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active {
  background-color: red;
}

親自試一試

更多實例

為超鏈接添加不同的樣式
本例演示如何向超鏈接添加其他樣式。
高級 - 創建帶邊框的鏈接按鈕
這是如何創建鏈接框/按鈕的另一個例子。
改變光標
cursor 屬性指定要顯示的光標類型。本例演示了不同類型的光標（對鏈接有用）。