サイト内で複数のリンク色パターンを作る(CSS)
2013-11-30
本日はリンクの色について
通常時、訪問済み、マウスオーバー時、クリック時と色を変えられますが、
メニューとナビではリンク色を変えたい場合。
つまり複数のパターンのリンク色を設定したい場合のCSS記述方法を紹介します。
通常CSSファイルに以下のような記述をするとします。
a:link { color: #000000; }
a:visited { color: #800000; }
a:hover { color: #191970; }
a:active { color: #ff0000; }
これだと、すべてのリンク色に反映されてしまいます。
例えば
通常のリンク色を設定した上で、
の中に貼られているリンク色だけは個別で設定したい場合は、
以下の様に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指定でリンク色を設定できるという事です。
WEBクリエイターになるための学習
http://dwcc.blog.fc2.com/blog-entry-33.html
0 件のコメント:
コメントを投稿