構文とは
構文とは、
文および文中の
まとまりのある部分の、
形式面から見た
構成, 文の組立てです。
CSSの構文は、以下の様に構成されています。
ＣＳＳの文
文は、空白ではないすべての文字で始まり、
(文字列の外にあり、エスケープされておらず、
別の {} または () または [] の対の中に含まれていない)
最初の右中括弧またはセミコロンで終わる構成要素です。
(ページタイトル
「構文 - CSS: カスケーディングスタイルシート | MDN」
小見出し「CSS の文」より引用)
文には２種類あります。この２種類ではない文は、すべて妥当ではなく、無視されます。
- @charset "UTF-8";
- span { text-decoration : underline ; border-top : double ; }
- @-規則 [上記では1行目の記述です。詳細は別途に記述します。]
- 規則セット [上記では2行目の記述です。]
規則セット
セレクタと宣言ブロックの組を
規則セットと呼びます。
セレクタとは、要素やその他を選択する条件を記したものです。
- span { text-decoration : underline ; border-top : double ; }
- セレクタ [上記では、span]
- 宣言ブロック [{ (左中括弧)で始まり、} (右中括弧)で終わる]
ブロック
宣言をグルーブ化して
ブロックとできます。
{ (左中括弧)と } (右中括弧)で区切る事でグループ化でき、また入れ子になる事もあります。
(入れ子になる事がある為に、左中括弧と右中括弧の対応は必須です。)
個々の宣言は ; (セミコロン) で区切ります。
宣言ブロックの内容 (宣言ブロックから左中括弧と右中括弧を除いたもの)は、style属性の値として指定できます。
- { text-decoration : underline ; border-top : double ; }
- { (左中括弧)
- 宣言 [上記では、text-decoration : underline]
- ; (セミコロン)
- 宣言 [上記では、border-top : double]
- ; (セミコロン) [グループの最後尾であり区切りとしては不要ではあるが、追記などでのミス回避の為の習慣として記述推奨です。]
- } (右中括弧)
宣言
プロパティと値の組は、
宣言と呼ばれます。
プロパティとは人間が読むことができ、どのような特性か考えることのできる名前を定義したものです。
- text-decoration : underline
- プロパティ [上記では、text-decoration]
- : (コロン)
- 宣言値 [上記では、underline]
気を付ける点
まとまり
どれがどんなまとまりなのかを気を付ける必要があります。
規則セットなど中括弧でまとまっている物は、閉じ括弧を忘れないようにしないといけません。
宣言ブロックの中で宣言の区切りとしてセミコロンがあり、これも忘れないようにしないといけません。
採用されない記述があっても、それが無効な記述なのか優先度が低いからなのかが判りにくいので、まとまりは判りやすいように記述しましょう。