リンク設定のスタイルシート(CSS)

ここでは、 リンク設定のスタイルシート(CSS) に関する記事を紹介しています。
category : スタイルシート (CSS)  |  タグ : スタイルシート, CSS,
初心者のためのスタイルシート講座(CSS)

いろいろな方から、ブログのカスタマイズに関するご質問を頂きますが、なかなかすぐにはお答えできませんので、できる範囲で少しずつ、ブログのカスタマイズに関する事を、ご紹介させて頂きます。

とりあえず今回は、「リンク表示設定のスタイルシート」です。

■リンクする要素に対してスタイルを適用します
/* 記述例 */
a {
text-decoration: underline; color:#0000ff;
}

リンクするテキストにアンダーラインを表記し、青字で表示する
(underline ⇒ none ;アンダーラインを表記しない)

■リンクする要素のうち、未閲覧(キャッシュされていない)要素に対してスタイルを適用します
/* 記述例 */
a:link {
color : #ff6633!important;
}
(important=サイト制作者のスタイルよりもユーザーが設定した色を優先する)

■リンクする要素のうち、閲覧済(キャッシュされている)要素に対してスタイルを適用します
/* 記述例 */
a:visited {
color : #ff8800 !important; text-decoration: none;
}

閲覧済リンクテキストにアンダーラインを表記せず、オレンジ色で表示する

■リンクする要素のうち、未閲覧(キャッシュされていない)要素に対してスタイルを適用します
/* 記述例 */
a:hover {
color : #ff0000 !important; text-decoration: underline;
}

未閲覧リンクテキストにアンダーラインを表記し、赤色で表示する

■カーソルをその要素の上に置いているが、まだアクティブ状態でない時のスタイル
/* 記述例 */
a:hover {
color : #ff3333 !important; text-decoration: underline;
}

■アクティブ状態にされた時(クリックした時)のスタイル
a:active {
color : #ffff00 !important;
}


記事の内容にご満足戴けましたならクリックをお願いします ↓
JRANKブログランキング FC2ブログランキング 人気blogランキング!

この記事へのコメント
広告配信サービス「マイクロアドターゲット」 *
URL:
Comment:
Pass:   
この記事のトラックバックURL
この記事へのトラックバック
■リンクする要素に対してスタイルを適用します/* 記述例 */a {text-decoration: underline; color:#0000ff;}リンクするテキストにアンダーラインを表記し、青字で表示する(underline ⇒ none ;
2005/12/08(木) 13:24:00 | おすすめ無料ブログ(blog)比較