CSSとは?
CSSの世界
1. 基本的定義:「セレクタ」「属性」「値」を組み合わせて定義していく
(ア) セレクタ{属性:値}
@ 例 h1{background-color:#0000ff;}
入力の過程で、改行、半角スペース、タブはブラウザで解釈される際に無視
されます。
ただし、セレクタ名、属性名、値の途中で、改行、半角スペース、タブを入
れてはいけません。
(イ) 複数の属性をまとめて定義する方法
@ セレクタ{属性1:値1;属性2:値2}
例 div {
background-color:#0000ff;
color:#696969
}
A セレクタのグループ化
セレクタ1,セレクタ2{属性:値}
例 h1,h2 {
color:#0000ff;
}
B 子孫セレクタ
セレクタ,セレクタ{属性:値}
要素名をスペースで区切って複数並べると、ある特定の要素の子孫にあたる要
素にスタイルを適用することができる。
例えば、<a>の要素に含まれる<img>の枠線を赤色にする場合、
例 a img{
border-color:red
}
C 子供セレクタ
セレクタ>セレクタ{属性:値}
選択対象の要素がある別の要素の子供であるとき。
例えば、<body>要素の直接の子供である<p>要素だけ行間を1.8倍にする時、
例 body > p {
line-height:1.8cm
}
D コメントの書き方
/* コメントになる部分 */
例 h1{
color:#0000ff/* 文字色を青にする */
}
(ウ) セレクタの種類
@ 基本セレクタ
<h1>〜</h1>や<p>〜</p>などに設定する。
例 div {background-color : #ADFF2F}
A IDセレクタ:ID属性を設定した要素に対してスタイルシートを設定します。
HTML中で利用できるのは一回のみ。
#ID名{属性:値}
基本セレクタ名#ID名{属性:値}
例 #footer {
font-color:#dcdcdc
}
B CLASSセレクタ: CLASS属性を設定した要素に対してスタイルシートを設定します。
CSSのセレクタのの先頭に「.」を付けて定義します。
.CLASS名{属性:値}
基本セレクタ名.CLASS名{属性:値}
例 .honbun {
font-color:#dcdcdc
}
<body>
<div class=”honbun”>
このホームページは・・・・
</ div>
C 擬似クラス:文章中の性質とは関係ない性質に対して設定するクラス。
擬似クラスは「:」にあらかじめ決められた予約語を組み合わせて定義します。
主に<a>(アンカー)要素の色を変化させるために利用される。
|