如何使用 CSS 設置鏈接樣式：詳細的初學者教程

已發表: 2022-09-02

在本教程中，我們將討論如何通過 CSS 設置 Web 鏈接樣式。 鏈接是任何網站的核心部分。 它們允許您將訪問者轉移到它的其他部分，參考來源以強調您正在提出的觀點，幫助讀者發現更多相關的博客文章等等。

學習如何更改他們的設計可以確保您可以將其識別為鏈接並適合您網站的其餘部分。 CSS為此提供了許多不同的方法和屬性，所以讓我們一一介紹。

鏈接標準和默認鏈接樣式

在我們討論如何更改鏈接設計之前，讓我們首先了解它們的構成。 這是 HTML 中的鏈接元素的樣子：

 <a href="https://torquemag.io/">TorqueMag</a>

如您所見，它由幾個部分組成：

  • <a> – 這是用於創建鏈接元素的運算符。 為什麼a ？ 因為在 HTML 中，鏈接也被稱為錨標籤。
  • href="" – 雙引號內的任何內容都是此鏈接指向的位置。 這是點擊它的人將登陸的地址。
  • TorqueMag – 這是出現在頁面上的鏈接文本，例如像這樣（不要點擊它，這個鏈接無處可去）。
  • </a> - 關閉鏈接元素並告訴瀏覽器鏈接文本到此結束的部分。

到目前為止，很容易。

默認情況下鏈接是什麼樣的

有趣的是，當您查看頁面上此類鏈接的外觀時。 你可能以前見過它。

鏈接默認樣式示例

如果您在 HTML 文檔中聲明任何舊鏈接並且不提供任何樣式信息，它將採用默認樣式：

  1. 鏈接文本為藍色，鏈接本身帶有下劃線。
  2. 當您將鼠標懸停在它上面時，光標會變成一個小手形圖標。
  3. 當您單擊它時，它會變成紅色一秒鐘。
  4. 訪問該鏈接後，其顏色將變為紫色。
  5. 當您通過鍵盤上的製表鍵導航到鏈接時，它周圍會有一個藍色輪廓。

這些標準是在 Internet 的早期建立的，自 90 年代以來沒有太大變化。 有趣的是，即使您從未有意識地考慮過這一點，在某種程度上，您可能只是通過網上沖浪就知道了上述大部分內容。

了解鏈接狀態

從上面也可以明顯看出，鏈接具有不同的狀態，這些狀態會影響它們的外觀。 您可以使用不同的 CSS 偽類來定位它們，這些偽類允許您影響它們各自的樣式。 這些是：

  • a – 這是前面提到的錨標籤。 它針對所有階段的所有鏈接。
  • a:link – 用於正常的、未訪問的鏈接。 用技術術語來說， :link以所有具有href屬性的錨標記為目標。 實際上，它並沒有用那麼多。 很多人只是簡單地使用a ，因為沒有href屬性的錨標記相當少見，所以通常不需要這種類型的區分。
  • a:visited – 描述當前用戶之前訪問過的鏈接，這意味著它存在於瀏覽器的歷史記錄中。
  • a:hover – 當用戶將鼠標光標懸停在鏈接上時顯示的目標樣式。
  • a:active – 在點擊鏈接的那一刻短暫可見的樣式。
  • a:focus – 一個有焦點的鏈接，例如用戶使用 tab 鍵導航到的鏈接。 hover和focus通常一起設計。

需要注意的是，一次更改多個鏈接狀態的樣式時，必須按以下順序進行。

  1. a
  2. a:link
  3. a:visited
  4. a:focus
  5. a:hover
  6. a:active

鏈接狀態的樣式建立在彼此的基礎上並向下級聯。 因此，順序很重要，以確保它們按預期工作。

滿足用戶期望

在我們討論如何通過 CSS 更改鏈接樣式之前的最後一點是討論用戶期望。 您很可能很容易將默認鏈接識別為鏈接的原因是因為某些默認值已經在我們作為用戶的很長時間內根深蒂固。

因此，我們——以及其他所有人——對鏈接的外觀有著非常明確的期望。 如果沒有實現，可能會使人們難以識別鏈接的期望。 出於這個原因，在進行網站設計時，最好保持接近這些期望。

實際上，這意味著：

  • 確保以某種方式突出顯示鏈接。 只要您使鏈接在頁面上突出，顏色或下劃線都可以。 避免使用斜體或粗體。
  • 通過在懸停時更改鏈接來提供反饋，並且在較小程度上單擊（ a:active ，還記得嗎？）。 您也不應該將光標變成手形符號來表示交互元素。

在下文中，我們將告訴您如何更改以上所有內容。 但是，請記住，您應該適度地這樣做以避免讓您的用戶感到沮喪。

如何通過 CSS 更改鏈接文本的樣式

讓我們首先談談如何更改鏈接的文本部分，因為這是構成鏈接的內容。

修改鏈接文本顏色

我們在本節中介紹的內容與我們關於如何通過 CSS 聲明顏色的文章相對相似。 所以，如果你想真正了解細節，我建議你也看看那個帖子。

您可以通過幾種不同的方式更改鏈接文本的顏色：顏色詞和不同的顏色符號系統，如 HEX 代碼、 rgb() / rgba() 、 hsl() / hsla()等。

 #link-one { color: red; } #link-two { color: #3af278; } #link-three { color: rgb(61, 76, 128); }

以下是頁面上的上述內容：

通過 css 示例更改鏈接顏色

最常見的是，您將使用 HEX 或rgb()類的東西。 在簡單的測試用例之外，使用顏色名稱極為罕見。

您使用哪種顏色系統取決於不同的因素，例如瀏覽器兼容性或您是否需要透明度。 但是，如您所見，通過color屬性為鏈接分配顏色非常簡單，並且它對所有其他鏈接狀態的工作方式相同。 因此，您也可以輕鬆更改:hover或:focus的文本顏色。

調整背景顏色

除了更改文本顏色外，您還可以修改鏈接的背景顏色及其不同​​狀態。 這就像使用background-color屬性一樣簡單。

通過css示例樣式鏈接背景顏色

這是上面示例的標記：

 #link-one { background-color: #fadbd8; color: red; } #link-two { background-color: #f26c2e; color: #3af278; } #link-three { color: rgb(61, 76, 128); } #link-three:focus { background-color: rgb(61, 76, 128); color: #fff; }

其他文本樣式選項

由於鏈接只是文本，所有其他在 CSS 中設置文本樣式的方式也適用於它們。 這意味著，您可以為鏈接及其不同狀態分配其他屬性，並在用戶將鼠標懸停在鏈接上時讓它們更改字體大小、字體系列或其他內容。

替代鏈接 css 樣式

這對於某些設計來說是有意義的，但是，它們是通過 CSS 設置鏈接樣式的不太常見的方式。

這是實現上述效果的標記：

 #link-one { background-color: #fadbd8; color: red; font-family: Arial; } #link-two { color: #3af278; font-weight: 600; text-transform: uppercase; } #link-three { color: rgb(61, 76, 128); } #link-three:focus { font-size: 36px; }

使用下劃線

正如我們在一開始所了解的那樣，鏈接默認帶有下劃線。 如果你想擺脫它，你可以使用text-decoration: none; （這是text-decoration屬性最常見的用法）。

 a { text-decoration: none; }

有些人還喜歡只在懸停時添加下劃線，而不是在普通鏈接上添加下劃線。 這也很容易做到。

 a { text-decoration: none; } a:hover { text-decoration: underline; }

另外，你可以使用border: bottom; 而不是text-decoration: underline; 在您的鏈接下添加一行。 人們過去常常使用它，因為它提供了更好的樣式選擇。 但是，這些天來，我們為標準underline方法提供了新屬性，可以進行更多自定義。

例如， text-underline-offset允許您在使用text-decoration時控製文本與下方行之間的距離。 text-decoration-thickness允許您設置自定義線寬。 因此，走border路線不再像以前那樣有必要了。

除此之外，還有很多方法可以使用鏈接下的線條，包括動畫。 您可能可以就此寫另一篇文章。

更改懸停時的光標樣式

正如我們已經討論過的，當您將鼠標懸停在鏈接上時，鼠標光標會從一個小箭頭變為一個指向的小手。

鼠標懸停時光標變為指針 10

到目前為止，這是您正在處理可點擊 HTML 元素的通用標誌。 但是，您可能不知道您也可以將光標更改為其他東西，從十字準線過度調整箭頭到加載指示器。

 a { cursor: crosshair; } a { cursor: move; } a { cursor: wait; } a { cursor: n-resize; } a { cursor: grab; }

如果你好奇，可以在本地開發環境中試試上面的，看看他們的效果。 還有更多選擇，您可以在此處找到。

但是，由於指針是如此通用，這絕對是用戶所期望的，您通常應該堅持使用它。 如果由於某種原因它不適用於您的鏈接，您可以使用以下代碼進行更正：

 a { cursor: pointer; }

如果您想在網站上使用自己的光標，甚至可以使用自定義圖像。 例如，一家德國音樂商品在線商店使用他們自己的主題指針光標。

自定義懸停光標示例

如果您通過瀏覽器開發人員工具檢查他們是如何做到的，您會發現以下代碼：

 a { cursor: url(../images/hand.cur),pointer; }

如您所見，您可以通過向圖像文件提供地址來簡單地使用自定義光標。

更改 a:focus

focus樣式是一項重要的輔助功能，因此請確保它始終存在。 默認情況下，高亮是通過outline屬性發生的，它會在其周圍出現一個框。

鏈接默認大綱示例

你問為什麼要outline而不是border ？

因為outline不佔用頁面空間。 它位於元素的背景之上。 這樣，聚焦鏈接不會改變頁面佈局跳轉或類似情況。

那麼，對於重點鏈接，您還有哪些其他樣式選項？

很多。 它包含從background-color到color 、 font-size 、 box-shadow的所有內容，應有盡有。

通過 css 示例樣式焦點鏈接

以下是實現上述目標的方法：

 #link-one:focus { color: red; } #link-two:focus { box-shadow: 0 0 14px 0px; } #link-three:focus { font-size: 36px; }

使用a:focus ，您基本上可以做任何您想做的事情。 然而，最有趣的應用程序之一可能是您還可以使用outline屬性簡單地自定義瀏覽器默認值。

 a:focus { outline: 3px dotted green; }

以下是頁面上的上述內容：

通過 css 示例樣式焦點鏈接大綱

鏈接按鈕和框

當然，鏈接不僅僅是文本鏈接。 在某些地方，它們通常顯示為框，例如導航菜單、表單的一部分或號召性用語。

鏈接為按鈕示例

這並不難實現。 基本上，您只需想辦法在鏈接文本周圍添加空間並提供背景或邊框/輪廓，以便將其顯示為按鈕或框。 除此之外，它們仍然是我們之前使用的相同鏈接元素。

有幾種方法可以實現這一點，從簡單地將填充添加到 flexbox 或網格等系統。 下面只是一個例子，你可以如何做到這一點，還有更多的選擇。

 a { background-color: #1a0dab; color: #fff; padding: 1.5rem; }

在這種情況下，CSS 既包含鏈接的樣式，也包含鏈接所在的容器。當然，您可以使用與以前相同的鏈接狀態來包含不同場景的不同行為。

在鏈接中包含圖標

值得一提的是，您還可以在鏈接中包含圖標。 有些人這樣做是為了更清楚地表明某些東西是一個將用戶帶離當前頁面的外鏈。

通過 css 示例將圖標添加到外部鏈接
圖標來源：Icons8

這是如何做到這一點的。 首先是 HTML：

 <a id=link-one href="#">Link Text</a> <a id=link-two href="#">Link Text</a> <a id=link-three href="https://wikipedia.org/">Link Text</a>

然後，CSS：

 a[href^="http"] { background: url('external-link-icon.png') no-repeat right center; background-size: 16px 16px; padding-right: 15px; }

a[href^="http"]僅針對在href=""中具有以http開頭的地址的錨標記。 為此，標記添加了一個背景圖像，即圖標，將其設置為不重複，將其一直向右移動，並將其垂直居中。 標記的其餘部分定義圖標大小並在它和文本之間創建一點空間。

最後的想法：鏈接的 CSS 樣式

一旦你掌握了基礎知識，通過 CSS 改變鏈接的樣式就不是那麼難了。 最重要的部分是理解它們具有不同的操作符和偽類所針對的不同狀態。 之後，只需使用常見的 CSS 屬性將其設計更改為您想要的任何內容。 您現在擁有開始使用所需的所有信息。

你最喜歡通過 CSS 設置鏈接樣式的方式是什麼？ 還有什麼技巧可以分享嗎？ 請在評論中這樣做！