CSSのリンクカラースタイルのベストプラクティス

Question

リンクのスタイルを設定するためのCSSサンプルが多数あります。

html5boilerplate.comは、リンクのために、このようなCSSコードを提供しています：

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

は、それはほとんどの場合には十分ですか？

リンクのスタイルを設定するためのCSSコードがありますか？

Answer 1

をクリックしたとき。

ジャストリンクのスタイルの正しい順序があることに注意してください：

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はあなたのために、「醜い」に見えるかもしれませんが、それは非常に重要なアクセシビリティ機能です。それを削除する場合は、現在の要素（大/太いフォント、高コントラストの背景など）を適切に区別する別の方法を提供してください。

Answer 2

スタイリングリンク（リンクではないアンカーではない）を確実に使用するには、aの代わりにa:linkを使用する必要があります。

最後にa:activeを追加できます。ここにはtutorialがあります。

Answer 3

いつも追加するのが良いと分かります。

{outline：none; }

一部のブラウザでは、リンクに迷惑なアウトラインを追加しますので、あなたは彼らに大多数のケースで十分でしょう間違いだ

Answer 4

ブラウザごとに異なる設定を常にリセットします。

私はまた、外部のウェブサイトへのリンクに、イメージ（ウィキペディアのものに類似したもの）を追加することによって異なるタグを付けるのが好きです。

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

Answer 5

アウトラインを削除しないでください。少なくともアウトラインを削除することは絶対に避けてください。すべてのアンカーに対してこれを行うと、キーボードのナビゲーションに使用される：focusに対しても削除されます。また、ホバーがタッチスクリーン上に存在しないので、ホバーにあまりにも多く依存することは非常に悪い。

私はすべてのリンクを他のコンテンツと簡単に区別できるようにしたいと思います。

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