トップページ ＞ 雑学・小技集 ＞ リンクを装飾する

<Title>〜</Title>のすぐ下に挿入して下さい。

• リンクの装飾を一括で指定。ポイント時だけ変化させる。
  <Style Type="text/css">
  <!--
  A{ text-decoration:none;}
  A:hover{ text-decoration:underline; color:#0000ff; }
  //-->
  </Style>
  
  
• リンクの装飾をそれぞれで指定。
  <Style Type="text/css">
  <!--
  A:link { text-decoration:none; color:#000080; }
  A:visited { text-decoration:none; color:#000080; }
  A:active { text-decoration:underline; color:#000080; }
  A:hover { text-decoration:underline; color:#1e78ff; }
  //-->
  </Style>

解説
a:link … リンク前

a:visited … リンク後

a:active … 押した時

a:hover … ポイント時

none	みんなのタグ辞書
underline	みんなのタグ辞書
overline	みんなのタグ辞書
line-through	みんなのタグ辞書
blink	みんなのタグ辞書

例）a:hover { text-decoration: underline overline line-through ; }
みんなのタグ辞書

cursor:タイプ;
例）a:hover { text-decoration:none; color:#000080; cursor:crosshair;}
※各文字の上にカーソルを乗せて見て下さい。

crosshair pointer move e-resize ne-resize nw-resize n-resize

se-resize sw-resize s-resize w-resize ne-resize wait help

→ その他のスタイルはこちら

a:hover { background-color:色;}

• リンク

a:hover { background-image:url(背景URL);}

• リンク

a:hover {position:relative; top:2;left:2;}
※赤い部分はleft、right、top、bottomで指定可能です。
動く距離は数字を変更します。

a {text-decoration: none;}

• これを<Title>〜</Title>のすぐ下へ入れましょう。
• 外部から呼び出す場合はコチラをご覧下さい。