ホーム   »  スポンサー広告  »  スポンサーサイト  »  HTML   »  リンク知識  »  同じページにある各リンクの色を変える【HTMLテクニック】

スポンサーサイト

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


Yahoo!ブックマーク Googleブックマーク はてなブックマーク livedoorClip del.icio.us newsing FC2 Technorati ニフティクリップ iza Choix Flog Buzzurl 
ランキングはこちらをクリック!
▲ Page Top     

同じページにある各リンクの色を変える【HTMLテクニック】

広告
  

同じページにある各リンクの色を変える【HTMLテクニック】

Tableなど背景色によって、リンクの色を変えたい場合がある。そんなときに役に立つHTMLテクニックです。
リンク部分にスタイルを適用する場合 a:link、a:visited、a:hover、a:active とそれぞれの状態にスタイルを記述し、 ページ全体のリンクに適用することができますが、スタイルの適用先をクラスに指定することで、 ページにあるそれぞれのリンクに違ったスタイルを適用することができます。


CSSスタイルシートの記述内容

リンクの色を個別にデフォルト(青)、赤、黒を定義する。
a { text-decoration:none; }
a:link, a:visited { color:#0000FF; } /* Blude */
a:hover { background:gray;color:#8B0000; }/*-- Darkred */
a.red:link, a.red:visited { color:#FF0000; }/*Red */
a.black:link, a.black:visited{ color:#000000; }/* Block */

※補足:
link 「通常時」のリンク
visited 「訪問済み」のリンク
active 「クリックした時」リンク
hover 「マウスポインタが触れた時」のリンク



HTML内の書き方

・デフォルト(classを指定しない場合)

<a href="/" target="_new ">■TOPに戻ります</a>


・リンク色を赤にする(classにredを指定する場合)

<a href="/" target=" _new " class="red">■TOPに戻ります</a>


・リンク色を黒にする(classにblackを指定する場合)

<a href="/" target=" _new " class="black">■TOPに戻ります</a>




関連記事
スポンサーサイト


Yahoo!ブックマーク Googleブックマーク はてなブックマーク livedoorClip del.icio.us newsing FC2 Technorati ニフティクリップ iza Choix Flog Buzzurl 
ランキングはこちらをクリック!
▲ Page Top     

Comment
Trackback
Trackback URL
Comment Form
管理者にだけ表示を許可する
サイト紹介

仕事で遭遇したトラブル対応をまとめたサイト。インフラエンジニア、サーバエンジニアとしてスキルアップするための情報(IT講座、Linux、Postfix、PostgreSQL、MySQL、Apache、Java、セキュリティ対策、おすすめ書籍)提供します。
全記事表示リンク
カテゴリ
スポンサーリンク

サーバエンジニアのための書籍
プロフィール

hotally

Author:hotally
仕事:インフラエンジニア
取得資格:第2種基本情報処理
     情報セキュリティスペシャリスト
     ネットワークスペシャリスト
     PostgreSQLCE シルバー

アクセスランキング
[ジャンルランキング]
コンピュータ
618位
アクセスランキングを見る>>

[サブジャンルランキング]
Webサービス
27位
アクセスランキングを見る>>
ブログ
最新記事
カテゴリークラウド
スポンサーリンク


RSSリンクの表示
リンク
ブロとも申請フォーム
QRコード
QR
Lc.ツリータグリスト
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。