先讓我們回顧下前端入門——html 超鏈接的用法 <a href="url"> , 超鏈接是一個非常偉大的發明，它鏈接了整個互聯網，沒有它就沒有互聯網。

超鏈接在發明之初就給它設計了一個默認的樣式，就是藍色帶下劃線的樣式，如下圖：

關于為什么超鏈接是藍色帶下劃線的歷史，可以參考這里：https://baijiahao.baidu.com/s?id=1710334071632114373&wfr=spider&for=pc

當網頁變得越來越豐富，用戶的需求越來越高的時候，這樣的樣式已經不符合大眾的審美，所以通過css來美化超鏈接非常有用和有趣。

設置鏈接樣式

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

如下圖：

除此之外，可以根據鏈接狀態來設置不同樣式，鏈接狀態分別有：

• 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 之后

以上是鏈接的各種偽類，描述了鏈接的不同狀態，你可以試試在不同狀態下給設置不同的屬性，比如背景色，字體或者文本修飾等等。

鏈接按鈕

鏈接通常用來當做按鈕使用，點擊它跳轉頁面或執行一些事件或js函數。如下示例：

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;
}

定義了一個背景色為紅色的按鈕，如下圖：

注意：如果想在點擊這個按鈕后禁止跳轉頁面，可以給href屬性設置javascript：void();,在以后會講到JavaScript在網頁中的使用，這里你已經看到，在href屬性中通過Javascript：的形式可以執行一段js語句或函數，這里void()就是阻止鏈接跳轉。

上面只是一個簡單的例子，當然你也可以制作更漂亮的按鈕，比如加上圓角、陰影、或漸變背景等。

改變光標

當鼠標移動到鏈接上時，你會看到鼠標變成一個手形，通過css cursor 屬性可以改變鼠標指針的形狀，如下圖：

可以嘗試按照上面的屬性依次練習一遍，鏈接的樣式到此就介紹完了，感謝關注。

上篇：前端入門——css字體和文本