Since: 26th/May/2002
前項で用意した HTML 文書に対して、リンクアンカーの次のように表示指定をしてみましょう。
a:link) に対しては、文字色を navy、テキスト装飾を下線a:visited) に対しては、文字色を maroon、テキスト装飾を下線a:hover) に対しては、文字色を #ccf、背景色を navy、テキスト装飾を無し文字色と背景色は color プロパティ と background プロパティを使います。テキスト装飾は text-decoration プロパティを使います。
ango.css を次のように編集／保存してください。
body { background: url("./rindou5.gif") navy;
color: #ccf }
h1 { font-style: italic;
font-weight: normal;
font-size: 3em;
font-family: cursive;
text-align: center;
text-decoration: underline overline }
p { background : #ccf;
color: navy;
font-weight: bold;
line-height: 1.5;
font-family: serif;
text-indent:1em;
letter-spacing: 0.2em }
address { font-style: normal;
font-variant: small-caps;
font-weight: bold;
font-size: 0.9em;
line-height: 1;
font-family: monospace;
text-align: right }
a:link { color: navy;
text-decoration: underline }
a:visited { color: maroon;
text-decoration: underline }
a:hover { color: #ccf; background: navy;
text-decoration: none }
ここで、 a:link, a:visited, a:hover の指定順序は固定的です。たとえば、 a:hover への指定と a:visited への指定の順番を逆転させると、、 a:visited 状態にカーソルが乗っても、 a:hover への指定ではなく、 a:visited への指定が適用されます。CSS では、後ろに書いたものが、前に書いたものを上書きしてしまうからです。
index.html をブラウザで開くと、リンクアンカーの文字列が、状態によって変化していることが確認できます。
訪問済みのリンクアンカーを、未訪問に戻すには、MS I.E. の場合は、メニューバーの「ツール(T)」から「インターネット オプション(O)」を選んで、「全般」タブのなかの「履歴のクリア(H)」ボタンを押してください。
このままだと、段落の中のリンクアンカーは読みやすいのですが、 address 要素の中のリンクアンカーは読みにくくなってしまいます。段落の中のリンクアンカーに対する指定と、それ以外のリンクアンカーに対する指定を分けてみましょう。
最初に、上のリンクアンカーへの指定を次のように書き換えて、段落の中のリンクアンカーだけに適用されるようにしてみましょう。
p a:link { color: navy; text-decoration: underline } p a:visited { color: maroon; text-decoration: underline } p a:hover { color: #ccf; background: navy; text-decoration: none }
ango.css のリンクアンカーに対する指定の部分を、上のように編集して保存すると、段落の中のリンクアンカー（p 要素の子要素である a 要素）以外は、ブラウザのデフォルトが使われます。index.html をブラウザで開くと、 address 要素の子要素である a 要素にはブラウザのデフォルトスタイルシートが適用されていることを確認できます。
このページの段落の子要素以外の a 要素に対する指定をする場合は、 a:hover と同じように a:link と a:visited を書くことになります。
a:link は文字色を #0ff、a:visited は文字色を red にして、両方ともテキスト装飾を下線に指定してみましょう。ango.css の a 要素に対する指定の部分のを次のように編集／保存してください。
a:link { color: #0ff;
text-decoration: underline }
a:visited { color: red;
text-decoraiont: underline }
a:hover { color: #ccf; background: navy;
text-decoration: none }
p a:link { color: navy;
text-decoration: underline }
p a:visited { color: maroon;
text-decoration: underline }
p a:hover { color: #ccf; background: navy;
text-decoration: none }
index.html をブラウザで開くと、段落以外の a 要素に対しても表示体裁が指定されていることが確認できます。
さて、これでも良いのですが、 text-decoration への指定が何度も現れています。これを一箇所にまとめて指定する事も出来ます。
a:link, a:visited { text-decoration: underline } a:link { color: #0ff } a:visited { color: red } a:hover { color: #ccf; background: navy; text-decoration: none } p a:link, p a:visited { text-decoration: underline } p a:link { color: navy } p a:visited { color: maroon } p a:hover { color: #ccf; background: navy; text-decoration: none }
ango.css のリンクアンカーへの指定の部分を上のように編集／保存して、 index.html をブラウザで開くと、編集前と同じ表示体裁が指定されていることが確認できます。
図：yonagahime.html の MS I.E. での表示例 |
CSS の継承の規則は複雑な面もあるので、詳しくは別項「ＣＳＳとはなんだろうか」を参照ください。