TOPページ >  リンクを貼る, スタイルシート(CSS)の記述 > 未リンク、訪問済み、リンク中、マウスが重なったときのリンク文字のスタイルを指定する

未リンク、訪問済み、リンク中、マウスが重なったときのリンク文字のスタイルを指定する

ホームページやブログなどのウェブサイトで 他のページにジャンプするための リンク文字のスタイルは、一括で指定する場合

a { スタイル }

という記述になりますが、未リンク、訪問済み、リンク中、マウスが重なったときのリンク文字のスタイルをそれぞれ指定することができます。

a : link { スタイル } 未訪問リンク文字に対して
a : visited { スタイル }訪問済みリンク文字に対して
a : hover { スタイル }リンク文字にマウスが重なったとき
a : active { スタイル }リンク中文字に対して

という記述になります。
例えば、

<style type="text/css">
<!--
.test7 {
background-color:white;
color:black;
}
.test7 a:link {
background-color:red;
color:#FFEEFF;
font-weight:bold;
text-decoration:none;
}
.test7 a:visited {
background-color:blue;
color:#AFEEEE;
font-weight:bold;
text-decoration:none;
}
.test7 a:hover {
background-color:yellow;
color:#FFA500;
font-weight:bold;
text-decoration:none;
}
.test7 a:active {
background-color:green;
color:#00FA9A;
font-weight:bold;
text-decoration:none;
}
-->
</style>

というふうに各種設定をすると、こんなふうに見せることができます。

ここは、一般の文字です。次の行は、リンクを貼っています。
トップページカテゴリ個別記事

マウスがリンク文字に重なったときのスタイル( a:hover ) と リンク中文字に対して ( a:active ) の両方を設定するときは、スタイルシートに a:hover を先に記述してください。逆だと期待通りに作動しないことがあります。

上記サンプルでは classを指定していますが、

<style type="text/css">
<!--
a:link {
text-decoration:none;
color:#FF00FF;
font-weight:normal;
}
-->
</style>

などとすると、ページ全体のリンク文字のスタイルを指定できます。

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
テーブルの余白などのスタイルを指定する
スタイルシートでボタン風リンク文字を表示する
スタイルの共通部分をまとめて記述する
タグを入れ子にして同じクラス/ID名を使い分ける
見出しタグ(H1~H6)のスタイルを指定する
未リンク、訪問済み、リンク中、マウスが重なったときのリンク文字のスタイルを指定する
リンク文字のスタイルを指定する
タグのスタイルを指定する
外部からスタイルシートを読み込む
ページ内で一回だけスタイルを使用する
複数のタグで同一のスタイルを指定する
一時的にスタイルシートを利用
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス