css鏈接顏色樣式最佳實踐

html5boilerplate.com提供了這樣的CSS代碼的鏈接：

a { color: #00e; } 
a:visited { color: #551a8b; } 
a:hover { color: #06e; }

是它在大多數情況下不夠好？

或者也許更好的css代碼存在鏈接樣式的顏色？

來源

2012-08-14 webvitaly

愛恨（http://meyerweb.com/eric/css/link-specificity.html）曾經是建議。 – j08691 2012-08-14 15:26:33

這絕對會在絕大多數的情況下足夠了。

只需記住的樣式鏈接正確的順序是：

a:link { color: #c00 } /* unvisited links */ 
a:visited { color: #0c0 } /* visited links */ 
a:hover { color: #00c } /* user hovers  */ 
a:active { color: #ccc } /* active links */

的outline看起來「醜」爲你，但是這是一個非常重要的輔助功能。如果刪除 - 請大家提供了一個替代的方式來妥善區分當前元素（大/大膽的字體，高對比度的背景等）

來源

2012-08-14 15:28:24

查看'a'和'a：link'選擇器之間的區別http://stackoverflow.com/questions/2638229/css-alink-vs-just-a-without-the-link-part – 2015-04-03 08:08:18

如果你想確保你是樣式鏈接（而不是鏈接錨），你應該使用a:link而不是a。您可以在最後添加a:active。這裏有一個tutorial。

來源

2012-08-14 15:25:33 Oriol

-2

我覺得它總是很好添加

a {outline：none; }

因爲有些瀏覽器添加惱人的輪廓來鏈接，當你點擊它們

來源

2012-08-14 15:26:11

請不要*只是*做到這一點。外線是出於可訪問性的原因。如果刪除它，請用其他東西替換它。見http://www.outlinenone.com/ – SandRock 2013-11-15 10:52:54

謝謝你打開我的眼睛。我一直都是出於設計原因。 – 2014-01-11 20:03:35

我總是重置設置，可能是瀏覽器之間的不同的服務。

我也喜歡標記外部網站鏈接不同，通過添加圖像（類似於一個在維基百科）。

a, 
a:link, 
a:active, 
a:visited, 
a:hover { 
    color:   #d30; 
    text-decoration: none; 
} 

a:hover { 
    text-decoration: underline; 
} 

/* Links to external websites */ 
a.external:before { 
    content:   url(./pics/external.png); 
}

來源

2012-08-14 15:32:01

如果刪除默認下劃線可能無法區分那些色盲者或使用單色顯示器（如E Ink設備）的文本與其他文本的鏈接。 – tomasz86 2014-08-16 17:38:25

@ tomasz86：好點。但是：我不知道一個強調鏈接的網站。可能是因爲它使文本（很多鏈接）難以閱讀。當我對可訪問性更感興趣時，我發現有顏色問題的人會將自己的樣式表應用於網站。這就是爲什麼我決定讓大多數人都可以訪問網站。那些需要下劃線的鏈接將（可能）無論如何應用他們自己的風格。你有什麼經驗？ – 2014-08-18 23:07:59

英國政府網站（https://gov.uk）鏈接下劃線。至於使用自定義樣式表，我認爲它可能很有用，但前提是您使用的是私人臺式機/筆記本電腦。如果您需要依賴移動設備或公共電腦等，那麼您很可能不得不使用其默認樣式查看這些網站。順便說一下，在上面的代碼中將'a：focus'添加到'a：hover {text-decoration：underline;}'將對鍵盤用戶有所幫助。 – tomasz86 2014-08-20 16:31:53

永遠不要刪除該輪廓，或至少刪除它只適用於：活動。如果您爲所有錨點執行此操作，那麼它也將被移除以用於：用於鍵盤導航的焦點。由於懸停在觸摸屏上不存在，因此依靠懸停太多是非常糟糕的。

我喜歡將所有鏈接與其他內容輕鬆區分開來。這是我個人的偏好：

2016版本

/* The order is important! Do not use fixed values like px! Always check contrast between text and background for accessibility! */ 

a { border-bottom: thin solid; 
    color: rgb(0,0,192); 
    font-weight: bolder; 
    text-decoration: none; 
} 
a:visited { color: rgb(160,0,160); } 
a:active { color: rgb(192,0,0); } 
a:active, a:focus, a:hover { border-bottom-width: medium; }

2015年版

a { border-bottom: thin solid; 
    color: rgb(0,0,192); 
    font-weight: 700; 
    text-decoration: none; 
} 
a:visited { color: rgb(128,0,128); } 
a:active { color: rgb(192,0,0); } /* :active MUST come after :visited */ 
a:active, a:focus, a:hover { border-bottom-width: medium; }

2014版本

a { border-bottom: 1px solid; 
    color: rgb(0,0,166); 
    font-weight: 700; 
    text-decoration: none; 
} 
a:visited { color: rgb(122,0,122); } 
a:active { color: rgb(166,0,0); } /* :active MUST come after :visited */ 
a:active, a:focus, a:hover { border-bottom: 3px solid; }

2013版本

a { color: rgb(0,0,166); 
    font-weight: 700; 
    border-bottom: 1px dotted; 
    text-decoration: none; 
} 
a:visited { color: rgb(122,0,122); } 
a:hover, a:focus, a:active { border-bottom: 2px solid; } 
a:focus, a:active { color: rgb(166,0,0); }

來源

2013-09-28 05:54:33 tomasz86

css鏈接顏色樣式最佳實踐

回答

相關問題