「色の変更方法」の回で、カラーコードは

 ■■{
 ▲▲:#●●;
}

 

の形で書かれているというようなことをお話しました。

 

今日はこの■やら▲の部分から
 何の色が変わるのかを簡単にご説明します。

 

CSS(カスケードスタイルシート)では

 ■■{  の■■部分はセレクタと呼び
 ▲▲:  ▲▲の部分はプロパティと呼びます。

 プロパティ(▲▲:)がbackground(もしくはbackground-color)

 これは背景色の設定です。
 背景の色を変えたいときはここにカラーコードを入れます。

 セレクタ(■■})が「a{」で、プロパティ(▲▲:)がcolor:

 これはリンク文字色の設定です。

 検索で探すのは大変なんですが(^^;
 とりあえず「color」で検索してセレクタがaかどうか確認した方が早いかも。
 ※検索の仕方

 リンク文字は、通常の状態やマウスを合わせた状態
 リンククリック中の状態、訪問済の状態で色を変えられます。

閲覧者が何もしていない、通常の文字色を指定する
a:link{color: ●●}

すでにクリックされた(訪問済)のリンクの色
a:visited{color: ●●}

リンクの上にカーソルを合わせた状態の色
a:hover{color: ●●}

リンクをクリックしている最中の色
a:active{color: ●●}

 

テンプレにこれらのセレクタがなかったとしても
 上記のようにセレクタを書き加えれば変更できます。
 気をつけなければいけないのは、上からこの順番で書くことです。

 プロパティ(▲▲:)に 「border」が含まれる

 これは枠線の色の設定です。
 枠線は上下左右別々に色を設定できます。

 border-left-color:#RED;なら
 枠線の左側の色は赤ですよ、という意味。

 ですが大抵、枠線の設定は太さや線の太さまで
 ひとまとめに行われますので

 border-left:5px solid red;

 のような形になっていると思います。
 これは、枠線の左側は5ピクセル幅の赤い直線ですよという意味。
 ここで値の意味を覚える必要はありません。

 border-top:●●; → 枠線上部
 border-right:●●; → 枠線右部
 border-bottom:●●; → 枠線下部
 border-left:●●; → 枠線左部

 border:●●; のように特に方向の指定が無い場合は
 四方全ての設定をまとめて行います。

 プロパティ(▲▲:)が「color」

 これはリンク以外の文字の色です。

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。