基本的な書式
HTMLに見た目の装飾やスタイルを適用させるときに使うCSSの基本的な書式です。
上記図 引用元:『HTML5プロフェッショナル認定試験 レベル1 対策テキスト&問題集(マイナビ)』
名称 | 役割 |
---|---|
セレクタ | 適用させたい部分を指定する |
宣言ブロック | 適用させたい設定を記述する範囲 |
宣言 | 適用させたい設定 |
プロパティ名 | 適用する設定はどれか |
プロパティ値 | どんな設定にするか |
- 宣言は1つの宣言に対して1行ずつ
- 宣言ブロック内には改行、空白文字を入れてもOK
- ただしセレクタ内に空白文字を入れると、適用先が変わってしまう場合
- セレクタをカンマ(,)で区切ると複数指定できる
セレクタについて
要素の適用先を指定する方法(セレクタ)の書式がいくつかあります。
名称 | 書式 | 適用先 | 適用先例 | 使用例 |
---|---|---|---|---|
タイプセレクタ | 要素名 | 指定した要素 | h1{color:yellow;} | h1要素全ての文字色を黄色にする |
ユニバーサルセレクタ | * | 全要素 | *{color:yellow;} | 全要素の文字色を黄色にする |
クラスセレクタ | 要素名.class | 指定したclass属性の値を持つ要素 | p.fueki{color:yellow;} | class属性にfuekiが指定されているp要素全ての文字色を黄色にする |
IDセレクタ | 要素名#id | 指定したid属性の値を持つ要素 | p#fueki{color:yellow;} | id属性にfuekiが指定されているp要素全ての文字色を黄色にする |
属性セレクタ | [属性名] など | 属性の指定に方法よる | - | - |
疑似クラス | - | 指定した要素全体を対象にする | - | - |
疑似要素 | ::first-line ::first-letter ::before ::after |
指定した要素の一部分を対象にする | - | - |
結合子 | (半角スペース) > + ~ |
要素と指定した結合子の関係による | .fueki .nori | .fueki要素内に配置されている.nori要素全て など |
CSSで指定するものを宣言ということを知りませんでした。
前は適当に指定とかって言っていたような。言葉を知ることも大事ですね…!