次に、リンク部分の色を設定する。ブラウザの標準色では大抵暗すぎて、暗い背景色には合はないのだ。リンクを示すa要素に対して次の様に設定する。
a:link { color:#ff6 ; background-color:transparent ; } /* リンク部の色 */
a:visited { color:#fc6 ; background-color:transparent ; } /* 一度訪れたことのあるリンクの色 */
a:hover { color:#fff ; background-color:#933 ; } /* マウスのポインタが重なつた時の色 */
a:active { color:#993 ; background-color:#fff ; } /* クリックした瞬間の色 */
特に重要なのは上の二つ。下二つは必要ないといへばないし、遊びの範囲だ。なほ、link、visited、hover、activeはこの順番で書かないと狙ひ通りに機能しない。CSSは常に「後から書いたものを優先」するからだ。理屈を考へてみよう。
それから、キーワードリンクのスタイルを別に設定する。キーワード用のa要素にはクラス名"keyword"が与へられるので、これを記述に加へる。
a.keyword { color:#fff ; border-bottom: 1px #99c dashed ; } /* キーワードリンクのスタイル */
文字色を本文と同じ白にして、下に点線を表示。これで普通のリンクとキーワードリンクの区別がつく様になつた。サンプル文書4。
