<HEAD>〜</HEAD>に下記のようにそれぞれの場合の処理を書き込みます。
効果はページ全体に及びます。
<STYLE TYPE="text/css"><!--
A:link {未訪問のページ}
A:visited {訪問したページ}
A:active {現在選択中}
A:hover {マウスが重なった時}
--></STYLE>
A:link {未訪問のページ}
A:visited {訪問したページ}
A:active {現在選択中}
A:hover {マウスが重なった時}
--></STYLE>
サンプル
<STYLE TYPE="text/css"><!--
A{text-decoration:none;}
A:link {color:#00ff00}
A:visited {color:#ff0000}
A:active {color:#0000ff}
A:hover {color:#cccccc;background-color:#000000;}
--></STYLE>
■上記設定のリンク見本■
A{text-decoration:none;}
A:link {color:#00ff00}
A:visited {color:#ff0000}
A:active {color:#0000ff}
A:hover {color:#cccccc;background-color:#000000;}
--></STYLE>
リンクのスタイルを部分的に変更します
■このページでの通常のリンク設定はこんな感じ■
<A>タグにclassを設定してそれに対してスタイル設定。
class="link2"とした場合、下のようにAの後に.クラス名をつけて書きます
A.link2:link {color:#ff8c00;}
A.link2:visited {color:#0000ff;}
A.link2:active {color:#ffd700;}
A.link2:hover {color:#ff1493;background-color:#ffc0cb;}
■class="link2"のリンクスタイル設定サンプル■
A.link2:visited {color:#0000ff;}
A.link2:active {color:#ffd700;}
A.link2:hover {color:#ff1493;background-color:#ffc0cb;}
リンクの下線を消したい時は上のソースに↓の一行追加をします
A{text-decoration:none;}
text-decorationの要素色々下線 text-decoration:underline;
上線 text-decoration:overline;
打ち消し線 text-decoration:line-through;
例えばマウスが重なった時打ち消し線を出したい場合には
A:hover {text-decoration:line-through;}
■打ち消し線見本■
枠線solid border: 1px solid #ff0000;
枠線dotted border: 1px dotted #ff0000;
枠線dashed border: 2px dashed #ff0000;
枠線double border: 3px double #ff0000;
点線上下枠 border-width:1 0 1 0;border-style:dotted;border-color:#ff0000;
点線左右枠 border-width:0 1 0 1;border-style:dashed;border-color:#ff0000;
などなど、書いていたらきりがない(^^;;
まとめて指定する場合は
border:太さ スタイル 色;
細かく指定したい時は
border-width:上 右 下 左; ←それぞれの太さ
border-style:スタイル; border-color:色;
border:太さ スタイル 色;
細かく指定したい時は
border-width:上 右 下 左; ←それぞれの太さ
border-style:スタイル; border-color:色;
hoverに枠線をつける場合、マウスを載せた時だけ枠線が出来るように記述すると
テキストが線の幅分ガタガタと動いてしまいます。
■ここにマウスを乗せてみて下さい■ リンクの横にある文字や場合によっては下の文字も動きます。
それを防ぎたい場合には
<STYLE TYPE="text/css"><!--
A:link {border:1px solid #背景と同じ色;}
A:visited {border:1px solid #背景と同じ色;}
A:active {border:1px solid #背景と同じ色;}
A:hover {border:1px dashed #ff0000;}
--></STYLE>
というようにhoverで付けたい枠線と同じ幅の背景と同色線で囲んでおきます。A:link {border:1px solid #背景と同じ色;}
A:visited {border:1px solid #背景と同じ色;}
A:active {border:1px solid #背景と同じ色;}
A:hover {border:1px dashed #ff0000;}
--></STYLE>
これは背景が画像の時は使えないので、TABLEなどでレイアウトします
background-color:色;
と指定します。例） ■マウスを乗せると背景色がつきます■
透過画像をリンクに使用して背景色を設定すれば
←こんな感じに<STYLE TYPE="text/css"><!--
A:link {background-color:#FFFFD0;}
A:visited {background-color:#FFFFD0;}
A:active {background-color:#FFFFD0;}
A:hover {background-color:#FF80C0;}
--></STYLE>
A:link {background-color:#FFFFD0;}
A:visited {background-color:#FFFFD0;}
A:active {background-color:#FFFFD0;}
A:hover {background-color:#FF80C0;}
--></STYLE>
マウスが乗った時にリンクが移動します
←こういう奴ですA:hover {position:relative;top:1px;left:1px}
赤字部分の設定を変えることによって色々に動きます
top:1px;left:-1px top:-1px;left:1px top:3px;left:3px