リンクの書式を変えるには。
リンクを意味するa要素（<a href="URL">文字列</a>）はWebページを作成する場合、 必ず使用する要素です。デザイン上、a要素の色や見栄えを制御したい場合があると思います。
そんな時は、リンク擬似クラスを利用して、スタイルシートで設定してしまうことが出来ます。設定できるのは、未訪問リンク、 訪問済みリンク、a要素の上にマウスポインタがある時、a要素がアクティブ（クリックされているとき）の4パターンです。もちろん、 設定しなければデフォルトの設定で動作します。
リンクの書式を変える
【スタイルシート】
未訪問リンク：
a:link｛プロパティ：値; プロパティ：値; ・・・・｝
訪問済みリンク：
a:visited｛プロパティ：値; プロパティ：値; ・・・・｝
a要素の上にマウスポインタがある時：
a:hover｛プロパティ：値; プロパティ：値; ・・・・｝
a要素がアクティブ（クリックされているとき）：
a:active｛プロパティ：値; プロパティ：値; ・・・・｝
上記の記述だと、Webページすべてのリンクに適用されてしまいます。ページの一部のリンクだけに設定を適用したい時は、 適用したいリンクでクラスを指定したり、子孫セレクタを使うなどしなければなりません。
a.rei:link｛プロパティ：値; プロパティ：値; ・・・・｝
とすれば、「rei」クラスのa要素のみに設定が適用されます。
a:link strike ｛プロパティ：値; プロパティ： 値; ・・・・｝
とすれば、未訪問リンクでstrike要素の部分だけに設定が適用されます。
"リンクの書式を変えるには。 "のサンプルはコチラをクリック
- サンプルページのコードは以下の通りです。
|
<html> <head> <title>リンクの書式を変えるサンプル</title> <meta http-equiv="content-type" content="text/html"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- a:link{ color: #00ff00;} a:visited{ color: #ff0000;} a:hover{color: #000000; background-color: aqua; border-bottom: double 3px;} a.sample:visited{background-color: yellow;} a:hover b {font-weight: normal;} --> </style> </head> <body> <h1>リンクの書式をスタイルシートで制御しています。</h1> <br><br> <a href="http://www.1css.net/sample/119.html">未訪問リンクは緑色に設定しています。</a><br><br> <a href="#">訪問済みリンクは赤色に設定しています。</a><br><br> <a href="http://www.1css.net/sample/119.html">リンクにマウスポインタを置くと文字が黒色、背景色が水色、下線が二重線になるよう設定しています。</a><br><br> <a href="#" class="sample">a要素にsampleクラスを指定した場合、訪問済みリンクの背景色を黄色になるように設定しています。</a><br><br> <a href="http://www.1css.net/sample/119.html"><b>b要素で太字設定にしたリンクはマウスポインタを置いた場合に文字の太さを普通に戻すように設定しました。</b></a><br><br> </body> </html> |
