「色の変更方法」の回で、カラーコードは
■■{
▲▲:#●●;
}
の形で書かれているというようなことをお話しました。
今日はこの■やら▲の部分から
何の色が変わるのかを簡単にご説明します。
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」
これはリンク以外の文字の色です。