リンクの装飾
リンクに様々な装飾を付けるには、疑似クラスを使います。
疑似クラスには、次のようなものがあります。
:link | 未訪問のリンク |
---|---|
:visited | 訪問済みのリンク |
:active | アクティブな状態 |
:hover | カーソルが上に乗っており、且つアクティブでない要素 |
これ以外にも:focusや:first-childなどが定義されています。
カーソルが乗った時のみ下線をつける
下線を付けるには、 text-decoration を使う方法と border を使う方法が考えられます。
text-decorationを使用する場合、次のように記述します。
a:link {
color:#999999;
text-decoration:none;
}
a:hover [
color:#999999;
text-decoration:underline;
}
a:visited {
color:#999999;
text-decoration:none;
}
borderを使用する場合、次のように記述します。 borderを使用した場合、下線の色を変えたりすることもできます。
a:link,a:visited {
color:#999999;
text-decoration:none;
}
a:hover [
color:#999999;
text-decoration:underline;
border-bottom: 1px solid #F6800B;
}