リンク部分のスタイルを指定

目次

Ⅰ．リンク部分の色の設定

A:link { スタイル }
←普通のリンク
A:visited { スタイル }
←すでに見たリンク
A:active { スタイル }
←クリックした時のリンク
A:hover { スタイル }
←カーソルが上に乗った時のリンク

リンク部分の下線を消す
A:link,A:visited,A:active,A:hover { text-decoration: none }

ソース例
<HTML>
<HEAD>
<TITLE>スタイルシート</TITLE>
</HEAD>
<STYLE type="text/css">
<!--
A:link    { color: #0000ff }
A:visited { color: #00ff00 }
A:active  { color: #ffff00 }
A:hover   { color: #ff0000 }
-->
</STYLE>
<BODY>
<a href="css.html">スタイルシート</a>
</BODY>
</HTML>


サンプル

Ⅱ．個別に指定したリンクだけ色を変える

A.クラス名:link { スタイル }
←普通のリンク
A.クラス名:visited { スタイル }
←すでに見たリンク
A.クラス名:active { スタイル }
←クリックした時のリンク
A.クラス名:hover { スタイル }
←カーソルが上に乗った時のリンク

ソース例
<HTML>
<HEAD>
<TITLE>スタイルシート</TITLE>
</HEAD>
<STYLE type="text/css">
<!--
A.koko         { font-weight: bold; font-family: fantasy; }
A.koko:link    { color: #0000ff }
A.koko:visited { color: #00ff00 }
A.koko:active  { color: #ffff00 }
A.koko:hover   { color: #ff0000 }
-->
</STYLE>
<BODY>
<a href="css.html" class="koko">スタイルシート</a>
</BODY>
</HTML>

サンプル

Ⅲ．特定の範囲のリンクだけ色を変える

.クラス名 A:link { スタイル }
←普通のリンク
.クラス名 A:visited { スタイル }
←すでに見たリンク
.クラス名 A:active { スタイル }
←クリックした時のリンク
.クラス名 A:hover { スタイル }
←カーソルが上に乗った時のリンク

ソース例
<HTML>
<HEAD>
<TITLE>スタイルシート</TITLE>
</HEAD>
<STYLE type="text/css">
<!--
.tokutei A:link    { color: #0000ff; font-weight: bold; text-decoration: none}
.tokutei A:visited { color: #0000ff; font-weight: bold; text-decoration: none}
.tokutei A:active  { color: #ff0000; font-weight: bold; text-decoration: none}
.tokutei A:hover   { color: #000000; font-weight: bold; text-decoration: underline}
-->
</STYLE>
<BODY>
<P class="tokutei">
｜<a href="css.html">スタイルシートーⅠ</a>
｜<a href="css.html">スタイルシートーⅡ</a>
｜<a href="css.html">スタイルシートーⅢ</a>｜
</P>
</BODY>
</HTML>

上記例は、リンクにカーソルが乗る前は下線が無く、乗った時色が変わり下線を引いています。

サンプル

［メインに戻る］