34

リンクの色をスタイリングするためのcssサンプルはたくさんあります。

html5boilerplate.comは、リンク用に次のようなcssコードを提供しています。

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

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

または、リンクの色をスタイリングするためのより良いcssコードが存在する可能性がありますか？

4

5 に答える 5

47

ほとんどの場合、これで間違いなく十分です。

リンクのスタイルの正しい順序は次のとおりです。

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

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

于 2012-08-14T15:28:24.933 に答える
5

ブラウザ間で異なる可能性のある設定を常にリセットします。

また、画像を追加することで、外部Webサイトへのリンクに別の方法でタグを付けるのが好きです（ウィキペディアのものと同様）。

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-14T15:32:01.253 に答える
4

リンクを（リンクではないアンカーではなく）スタイリングしていることを確認したい場合は、のa:link代わりにを使用する必要がありaます。

そして最後に追加することができますa:active。ここにチュートリアルがあります。

于 2012-08-14T15:25:33.367 に答える
3

そのアウトラインを削除しないでください。少なくとも、a：activeの場合にのみ削除してください。すべてのアンカーに対してこれを行うと、キーボードナビゲーションに使用されるa：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); }


于 2013-09-28T05:54:33.350 に答える
-3

私はそれを追加するのは常に良いと思います

a {概要：なし; }

一部のブラウザは、リンクをクリックすると迷惑なアウトラインをリンクに追加するためです。

于 2012-08-14T15:26:11.637 に答える