Since: 26th/May/2002; Last modified: 24th/Dec./2006
前項で用意した HTML 文書に対して、リンクアンカーの次のように表示指定をしてみましょう。
a:link) に対しては、文字色を navy、テキスト装飾を下線a:visited) に対しては、文字色を maroon、テキスト装飾を下線a:hover) に対しては、文字色を #ccf、背景色を navy、テキスト装飾を無し文字色と背景色は color プロパティ と background プロパティを使います。テキスト装飾は text-decoration プロパティを使います。
common.css を次のように編集／保存してください。
@charset "utf-8";
* { font-style: normal;
font-weight: normal;
font-family: 'Meiryo', sans-serif }
html { background: url(./rindou5.gif) navy;
color: #ccf }
h1 { font-style: italic;
font-size: 3em;
font-family: cursive;
text-align: center;
text-decoration: overline underline }
div.section { background : #ccf;
color: navy }
p { line-height: 1.5;
font-family: serif;
text-indent: 1em;
letter-spacing: 0.2em }
p:first-child { font-weight: bold;
text-indent: 0 }
p:first-child:first-letter { color: red;
font-size: 2em }
address { font-style: normal;
font-variant: small-caps;
font-weight: bold;
font-size: 0.9em;
line-height: 1;
font-family: 'Andale Mono Bold','Osaka等幅','Consolas',monospace;
text-align: right }
/* リンクアンカー擬似要素 */
a:link { color: navy }
a:visited { color: maroon }
a:hover { color: #ccf }
ここで、 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 要素の中のリンクアンカーは読みにくくなってしまいます。段落の中のリンクアンカーに対する指定と、それ以外のリンクアンカーに対する指定を分けてみましょう。
最初に、上のリンクアンカーへの指定を次のように書き換えて、段落の中のリンクアンカーだけに適用されるようにしてみましょう。
.section a:link { color: navy }
.section a:visited { color: maroon }
.section a:hover { color: #ccf }
common.css のリンクアンカーに対する指定の部分を、上のように編集して保存すると、段落の中のリンクアンカー（p 要素の子要素である a 要素）以外は、ブラウザのデフォルトが使われます。index.html をブラウザで開くと、 address 要素の子要素である a 要素にはブラウザのデフォルトスタイルシートが適用されていることを確認できます。
このページの段落の子要素以外の a 要素に対する指定をする場合は、 a:hover と同じように a:link と a:visited を書くことになります。
common.css の a 要素に対する指定の部分のを次のように編集／保存してください。
a:link { color: #ccf;
text-decoration: underline }
a:visited { color: #fcf;
text-decoration: underline }
a:hover { color: #ccf; background: navy;
text-decoration: none }
.section a:link { color: navy }
.section a:visited { color: maroon }
.section a:hover { color: #ccf }
index.html をブラウザで開くと、段落以外の a 要素に対しても表示体裁が指定されていることが確認できます。
さて、これでも良いのですが、 text-decoration への指定が何度も現れています。これを一箇所にまとめて指定する事も出来ます。
a:link,a:visited { text-decoration: underline }
a:link { color: #ccf }
a:visited { color: #fcf }
a:hover { color: #ccf; background: navy;
text-decoration: none }
.section a:link { color: navy }
.section a:visited { color: maroon }
.section a:hover { color: #ccf }
common.css のリンクアンカーへの指定の部分を上のように編集／保存して、 index.html をブラウザで開くと、編集前と同じ表示体裁が指定されていることが確認できます。
図：yonagahime.html の表示例 |
CSS の継承の規則は複雑な面もあるので、詳しくは別項「ＣＳＳとはなんだろうか」を参照ください。