STEP.4 状況に応じて色を変化させる装飾を作る
最後に、状況別に色が変化するようスタイルシートを記述します。
a:hover {
background-color: #ccffff;
border-color: #0000ff;
}
/* ガイド文部分の表示色 */
a:link span.siteguide { color: black; }
a:visited span.siteguide { color: black; }
a:hover span.siteguide { color: blue; }
/* サイト名部分の表示色 */
a:link span.sitename { color: blue; }
a:visited span.sitename { color: #800080; }
a:hover span.sitename { color: blue; }
/* URL部分の表示色 */
a:link span.siteurl { color: green; }
a:visited span.siteurl { color: green; }
a:hover span.siteurl { color: #cc00ff; }
リンクの状態によって別々に装飾するには、link・visited・hover各疑似クラスを使います。 link疑似クラスはリンク先が未訪問だった場合、 visited疑似クラスはリンク先が訪問済みだった場合、 hover疑似クラスはリンクの上にマウスが載ったときの装飾を指定できます。
※選択中の場合を装飾できる active疑似クラスもありますがここでは使っていません。
このソースを使ってHTMLを表示させると、以下のように見えます。
その道のプロがあなたをガイド
All About
http://allabout.co.jp/
枠内にマウスを載せてみると、色が変化することが確認できるはずです。
上記のスタイルシートソースの意味は次の通りです。
■background-color: #ccffff;
背景色を水色（#ccffff）にする指定です。リンクの上にマウスを載せると、リンクの背景がこの色になるようにしています。
■color: blue;
文字色を青色（blue）にする指定です。上記のソースでは、値として「blue」（青）のほか、「black」（黒）・「green」（緑）・「#800080」（紫）などを用いています。
■border-color: #0000ff;
枠線の色を青色（#0000ff）にする指定です。枠線を描く際には、他に「太さ」と「線種」の指定が必要ですが、それはa要素に対する装飾として過去に記述しているのでここでは省略できます。 ここでは、線の色を変化させたいだけなので、border-colorプロパティのみを記述しています。 線種や太さも同時に変化させたいなら、border-styleプロパティ（線種）やborder-widthプロパティ（太さ）も記述します。
※色の指定は、「blue」と記述しても「#0000ff」と記述しても同じ（青色）です。
その他、以下のような表示色になるよう疑似クラスを用いて記述しています。
［ガイド文（紹介文）の部分］
・リンクが未訪問の場合： 黒色（black）
・リンクが訪問済みの場合： 黒色（black）
・リンクの上にマウスが載った場合： 青色（blue）
［サイト名の部分］
・リンクが未訪問の場合： 青色（blue）
・リンクが訪問済みの場合： 紫色（#800080）
・リンクの上にマウスが載った場合： 青色（blue）
［URLの部分］
・リンクが未訪問の場合： 緑色（green）
・リンクが訪問済みの場合： 緑色（green）
・リンクの上にマウスが載った場合： 青紫色（#cc00ff）
以上で装飾はほとんど終わりです。
今のままでは、リンクが横幅いっぱいに広がって表示されます。もし、横幅を制限したいならwidthプロパティを使って横幅を指定します。
