※カラーリスト(ブラウザ対応色名)
※線種リスト
※サイズ指定単位リスト
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;…これがないとネットスケープで背景画像が正しく表示されない!