リンク

カラーリスト(ブラウザ対応色名)
線種リスト 
サイズ指定単位リスト

1.リンク文字の装飾

a:link {
color: green;
text-decoration: none;
}

a:visited {
color: red;
text-decoration: none;
}

a:hover {
color: blue;
background-color: yellow;
text-decoration:underline overline;
position : relative;
top:5px; left:3px;

}
未訪問リンク文字
色:緑
装飾:なし

訪問済みリンク文字
色:赤
装飾:なし

オンマウスの時のリンク文字
色:青
背景色:黄
装飾:上下ライン
オンマウスの時、上(TOP)から5px、
左から3px余白を設ける。(字下げの効果)

a:link…未訪問のページ
a:visited…訪問済みのページ
a:hover …オンマウスした時

…画像を使ったリンクの場合もこれでOK♪

●指定内容の、color(色)、background-color(背景色)、 text-decoration(文字の装飾)は、共通して指定可。

◆text-decoration: underline overline;
  =上下に線を引く(片方にすれば片方のみになる)
◆text-decoration: none;
  =通常リンク文字の装飾の下線がなくなる

2.背景画像で装飾(オンマウスで画像変化)

a:link
a:visited,
a:active {
color:navy;
text-decoration:none;
background-image: url(botan-k1.jpg);  /* リンク部分背景画像の指定*/
background-repeat: no-repeat;
width: 250px;  /* リンク部分の幅*/
height: 100px;  /* リンク部分の高さ*/
display: block;
padding-top: 10px;   /* 上余白*/
padding-left: 20px;   /* 左余白*/
}

a:hover {
background-image: url(botan-n2.jpg);/* オンマウス時のリンク部分背景画像の指定*/
サイズ */
width: 250px;
height: 100px;
display: block;

}
htmlには、テキストでリンク先名を書けば、まるで画像ボタンのように表示してくれる。

参考:魔法陣グルグルトップページ、右側にある3つのリンクボタン

a:link…未訪問のページのリンク文字
a:visited…訪問済みのページのリンク文字
a:active…移動中のリンク文字
a:hover …オンマウスした時のリンク文字
/*  と */ で挟んだ部分はスタイルシートとして読み込まれない(注釈) 
display: block;…これがないとネットスケープで背景画像が正しく表示されない!