FC2ブログ
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
【--/--/--】 | スポンサー広告 | page top↑
リンクが貼ってある文字の色をそれぞれに指定する。
リンクを貼る(<a>タグを使う)と、マウスオン時・マウスオフ時などの色は、ブラウザごとに決められている色やスタイルに自動的に変わる。
これを、ページ内の好きなリンクを好きなスタイルに変える方法。
<例>
<div id="menu">
  <a href="http://~~>メニューの中のリンク</a>
</div>
      (中略)
<address>
  <a href="http://~~>アドレスの中のリンク</a>
</address>

の場合、同じページ内にメニューとフッターと2つの領域があり、それぞれリンクが貼ってある。
通常IEの場合、このリンクは2つとも
・オフマウス時は
・オンマウス時は
・訪問済みリンクは
となる。

これをそれぞれのリンクごとに好きな色に変えるための記述はCSSで以下のように書く。

<CSS>

/*ID指定メニュー内のリンク色の指定*/
#menu a{color:#339900;}  (文字色)→オフマウス時の色の指定
#menu a:hover{color:#0066CC;}  (文字色)→オンマウス時の色の指定
#menu a:visited{color:#FF33CC;}  (文字色)→訪問済みリンクの色の指定

/*addressタグ内のリンク色の指定*/
address a{color:#000000;}  (文字色)→オフマウス時の色の指定
address a:hover{color:#33FF33;}  (文字色)→オンマウス時の色の指定
address a:visited{color:#FF00CC;}  (文字色)→訪問済みリンクの色の指定

※今回はCSS内で色だけを指定したが、同様に文字の大きさfont-sizeや、太さfont-weight、フォントの種類font-familyなど、様々なスタイルを指定することができる。
※その他にa:activeというのがあり、これは、リンクをクリックした瞬間のスタイルを指定できる。

スポンサーサイト
【2006/09/18】 | CSS/リンク | コメント(0) | page top↑
<<DLリストにおいて、定義語と説明文を左右に並べて表示する方法 | ホーム | フォームをくくる線を表示させる。>>
コメント
コメントの投稿














管理者にだけ表示を許可する

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