從文本鏈接中刪除下劃線的步驟和要注意的問題
默認情況下，使用或“anchor”元素鏈接到HTML的文本內容使用下劃線進行樣式化。 通常情況下，網頁設計師會選擇通過刪除下劃線來刪除此默認樣式。
許多設計師不關心下劃線文字的外觀，特別是在密集的內容鏈接很多的情況下。 所有那些帶下劃線的單詞可以真正打破文檔的閱讀流程。 許多人認為，由於強調改變自然字母的方式，這些下劃線實際上使得單詞更難以區分和閱讀。
然而，在文本鏈接上保留這些下劃線有合理的好處。 例如，當您瀏覽大塊文本時，帶有下劃線的鏈接以及適當的顏色對比使讀者可以立即掃描頁面並查看鏈接的位置。 如果您查看About.com上的網頁設計文章以及網站上的其他文章，您將看到帶有下劃線鏈接的這種樣式。
如果您決定從文本中刪除鏈接（我們稍後會介紹一個簡單的過程），請務必找到設置文本風格的方法，以便與純文本保持區分什麼是鏈接。 這通常是通過上述顏色對比來完成的，但單獨使用顏色會對患有色盲等視覺障礙的訪問者造成問題。 根據他們特定的色盲形式，對比可能完全喪失，從而阻止他們看到鏈接和非鏈接文本之間的差異。 這就是為什麼加下劃線的文本仍然被認為是顯示鏈接的最佳方式。
那麼如果你仍然想這樣做，你如何關閉下劃線呢？ 由於這是我們所關心的視覺特性，因此我們將轉到我們網站的一部分，它處理所有可視的事情 - CSS。
使用級聯樣式表關閉鏈接上的下劃線
在大多數情況下，您並不希望只在一個文本鏈接上關閉下劃線。 相反，您的設計風格可能要求您從所有鏈接中刪除下劃線。您可以通過向外部樣式表添加樣式來完成此操作。
{text-decoration：none; }而已！ 一條簡單的CSS代碼將關閉所有鏈接的下劃線（實際上將CSS屬性用於“文本修飾”）。
你也可以用這種風格更具體。 例如，如果您只想關閉“nav”元素中的下劃線或鏈接，則可以編寫：
nav a {text-decoration：none; }現在，頁面上的文本鏈接將獲得默認下劃線，但導航中的這些鏈接會將其刪除。
許多網頁設計師選擇做的一件事是，當有人在文本上懸停時，將鏈接重新打開。 這將使用：懸停CSS偽類來完成，如下所示：
{text-decoration：none; } a：hover {text-decoration：underline; }使用內聯CSS
作為對外部樣式表進行更改的替代方法，您還可以將樣式直接添加到HTML中的元素本身，如下所示：
此鏈接沒有下劃線這種方法的問題在於它將風格信息放置在HTML結構中，這不是最佳實踐。 樣式（CSS）和結構（HTML）應該保持分開。
如果您希望網站的所有文字鏈接都刪除了下劃線，則將這種樣式信息添加到每個鏈接上將意味著將相當數量的額外標記添加到您網站的代碼中。 此頁面膨脹會減慢網站的加載時間，並使整體頁面管理變得更具挑戰性。 由於這些原因，最好總是轉向外部樣式表以滿足所有頁面樣式需求。
閉幕
就像從網頁的文本鏈接中刪除下劃線一樣簡單，您還應該注意這樣做的後果。 雖然它確實可以清理頁面的外觀，但它可能會犧牲整體可用性。 下次考慮更改頁面的“文本修飾”屬性時，請考慮到這一點。
Jennifer Krynin的原創文章。 由Jeremy Girard於9/19/16編輯