リンクの設定

リンク文字色の設定

A:link {color: ★}未リンク文字
A:active {color: ★}リンク済み文字
A:visited {color: ★}リンク中文字
A:hover {color: ★}カーソルが重なった時の文字色
A:hover {background-color: ★}カーソルが重なった時の背景色
★=カラー名または#カラーコード
ソースサンプル
<html>
<head>
<title>タグであそぼう!</title>
<style TYPE="text/css">
<!--
A:link {color: blue}
A:active {color: yellow}
A:visited {color: brown}
A:hover {color: red}
-->
</style>

</head>
<body>
</body>
</html>

リンク文字の下線を消す

A {text-decoration: none}
タグに直接記述する場合
<a href="" style="text-decoration: none">
普通、リンク文字には下線が自動的に表示されますが
その下線を表示されないように指定します

カーソル形状を変更しよう

だけの機能です
<a href=***.htm style="cursor: ★">〜</a>
★=カーソル形状(カーソルを乗せてみてください)
1//自動2//クロス3//デフォルト 4//ポインター5//十字矢印6//テキスト 7//砂時計

8//ヘルプ9//矢印、上 10//矢印、下11//矢印、左12//矢印、右 13//矢印、右上

14//矢印、左上15//矢印、右下 16//矢印、左下 17//all-scroll 18//not-allowed

19//progress
1234567
autocrosshairdefaultpointermovetextwait
891011121314
helpn-resizes-resizew-resizee-resizene-resizenw-resize
1516171819
se-resizesw-resizeall-scroll(IE6)not-allowed(IE6)progress(IE6)

オンマウスでリンク文字の浮上

a hover {position: relative; left:2px; top:-5px}

--リンク1----リンク2----リンク3----リンク4--

オンマウスで画像枠の表示

a img {border:3px solid white}
a:hover img {border:3px solid #990000}


オンマウスでリンク文字にアンダーライン

カーソルオンでアンダーライン   カーソルオンで2重線   カーソルオンで点線

a{text-decoration: none}
a:hover{border-bottom: solid 2 red}

解説
solid=実線、double=二重線、dotted=点線
2=線の太さ
red=線の色カラー名または#カラーコードで指定して下さい
ソースサンプル
<html>
<head>
<title>タグであそぼう!</title>
<style TYPE="text/css">
<!--
a{text-decoration: none}
a:hover{border-bottom: solid 2 red}
-->
</style>

</head>
<body>
</body>
</html>

またborder-bottomをborderとする事によりリンク文字全体を囲む事ができます
a:hover{border: solid 2 red}
カーソルオンで実線   カーソルオンで2重線   カーソルオンで点線