スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

サイト内で複数のリンク色パターンを作る(CSS)

本日はリンクの色について
通常時、訪問済み、マウスオーバー時、クリック時と色を変えられますが、
メニューとナビではリンク色を変えたい場合。
つまり複数のパターンのリンク色を設定したい場合のCSS記述方法を紹介します。

通常CSSファイルに以下のような記述をするとします。

a:link { color: #000000; }
a:visited { color: #800000; }
a:hover { color: #191970; }
a:active { color: #ff0000; }

これだと、すべてのリンク色に反映されてしまいます。
例えば
通常のリンク色を設定した上で、<div id="navi">の中に貼られているリンク色だけは個別で設定したい場合は、
以下の様にCSSを記述します。

a:link { color: #000000; }
a:visited { color: #800000; }
a:hover { color: #191970; }
a:active { color: #ff0000; }

#navi a:link { color:#CCC; }
#navi a:visited { color:#CCC; }
#navi a:hover { color:yellow; }
#navi a:active { color:red; }

ポイントは、a: の前に #div名を付ける事により、下4行はdiv指定でリンク色を設定できるという事です。




トラックバック

コメント

コメントを残す

Secret


スポンサードリンク

最新記事

最新コメント

プロフィール

かっこいいデザイン、にぎやかなデザイン、きゅ~となデザイン、シンプルで洗練されたデザイン。
想像するだけで心がモワモワしてきます♪
いいデザインにいっぱい出会いますように★

好きな言葉は、旋律と色彩

ブログランキングに参加しています。こちらにも是非♪

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。