リンクに対する効果一覧
ここで紹介しているリンクへの効果と、これまでに紹介したセレクタの指定、擬似プロパティなどを組み合わせることでリンクを自在に変化させることができます。１、アンダーラインを消す
プロパティ:text-decoration:
値:none
２、リンクの色を変える
プロパティ:color:
値:カラー名やRGB値
３、リンクの位置をずらす
プロパティ:position: top: left:
値:左から順に relative 下へのずれ幅 右へのずれ幅
４、リンク部分の背景色を変える
プロパティ:background-color:
値:カラー名やRGB値
ソース例(太字が学んだ内容です)
<html>
<head>
<title>リンクへの色々な操作</title>
<style type="text/css">
<!--
a.class1 { text-decoration:none; }
a:hover { color:#ff6600; }
a:hover.class2 { color:#ff0000; background-color:#ff00ff; }
a:visited { color:#0000ff; }
a:visited.class2 { color:#000000; }
a:active { color:#00ff00; }
a:hover.class3 { position:relative; top:3pt; left:3pt; }
-->
</style>
</head>
<body>
むちゃくちゃに改造しました。
<br><br>
<a href="http://www.homepagesakusei.biz/" class="class1">クラス１のリンク</a><br>
<a href="http://www.homepagesakusei.biz/" class="class2">クラス２のリンク</a><br>
<a href="http://www.homepagesakusei.biz/" class="class3">クラス３のリンク</a><br>
<a href="http://www.homepagesakusei.biz/">ホームページ作成、HTML</a><br>
Webサイト版<a href="http://www.homepagecreation.net/" target="_blank">ホームページ作成とHTML</a>
</body>
</html>
表示はこちら
2006年05月08日