CSS文法[ステートメント]＠ルールと規則集合
CSSスタイルシート文法[ステートメント]＠ルールと規則集合
<< CSS利用可能文字
CSSの＠ルールと規則集合ステートメントとは
CSSの＠ルールと規則集合ステートメントは以下の通りです。
※このページは、W3Cの4 CSS2 syntax and basic data types[英文]を当サイト管理人が2008年08月25日、意訳したものですが、構文解釈の違いや翻訳の違いが含まれるかもしれません。正式文書はW3C 各種仕様書(英語版)である事を予めご了承ください。
ステートメント
CSSスタイルシートにはステートメントのリストとして構成されるいくつかのバージョンがあり、
|
「＠ルール(at-rule)」 |
と
|
「規則集合」 |
という2種類のステートメントがあります。(ステートメントの前後にホワイトスペースが含まれる場合もあり得ます)
CSSスタイルシートの仕様上では、直前または直後にあるホワイトスペースやコメントに邪魔されないという事を意味しています。
@ルールについて
at-rules[@ルール]は、at-keyword[@]という文字とその直後に続く識別子から構成されており、@importや@media、@pageなどがこれに当たります。
@ルールは、[例)@import xxx.css;]のように構成され、CSSのユーザーエージェント(ブラウザ)は、解析する際に未知の@ルールがあった場合には無視して次の解析をしなければならない事になっています。
CSS2のユーザーエージェント(ブラウザ)は、ブロック内にある@importを無視するか@ルールがCSS規則集合を優先しないようにしなければならない事になっています。
|
◆CSS2設定の良い例と悪い例 @import "subs.css"; h1 { color: blue } @import "list.css"; という指定があった場合、２つめの@importは「CSS2では」不正です。 |
また、次のように@ルール内に@ルールをネストしてはいけません。
|
◆CSS2設定の良い例と悪い例 @import "subs.css"; @media print { @import "print-main.css"; body { font-size: 10pt } } h1 { color: blue } |
ブロック
ブロックは、{ 左波カッコで始まり、その終わりは } 右波カッコと一致していなければいけません。
例外としてこのブロックの始まりである { と } の間に ( ) 丸かっこ、 [ ] ブラケット、 { } 波カッコの(常に開始と終了が一致している)対の記述がネストされる事もあり得ます。
' ' シングルクォートや " " ダブルクォートもまた開始と終了が一致している必要があり、それらの間に文字があれば、string文字として解析されます。
|
◆CSS設定の良い例と悪い例 { causta: "}" + ( {7} * '\'' ) } ・最初のダブルクォートで括られた波カッコ( "}" )は、開始の波カッコとペアではないので不正。 ・シングルクォートで括られたエスケープされたシングルクォート( '\'' )もペアではないので不正。 ・それ以外の ( ) 丸かっこ、 { } 波カッコは、いずれもペアなので妥当。 |
CSS2ではこのペアでないカッコの組み合わせのケースを認めませんが、(2008/08/25現在)CSS2仕様には未だに掲載されており、定義から削除されていません。
CSS規則集合・定義ブロック・セレクタ
CSS規則集合(規則)は、セレクタが続く定義ブロックで構成されています。
|
◆セレクタの例 div { color:blue ; font-size:10pt } ・この場合、[div]をセレクタと言います。 |
定義ブロック( { } 波カッコで括られたテキストの続き)は、( { で始まり、 } で終わる構成でこの内側に記述されるリストは(リスト１つの場合または、複数の場合の最後のリスト項目の末尾は付けてもつけなくても構いませんが)リストが複数で構成される場合には、リストごとに ; セミコロンで区切る必要があります(区切らないとその行やブロックの指定が無視されてしまいます)。
セレクタ(セレクタ上のセクション)は、常に { 左波カッコの前にある構成(この場合 { はセレクタではありません)となっていて常に { } 波カッコブロックと共にあり、CSS2の仕様上不正とされるケースが含まれている場合には、不正部分だけでなく、この { } 波カッコブロック全てが解析できないという事になります。
セレクタ内のカンマ規則変更の可能性
CSS2では、セレクタ内の[ , ]カンマに特別な意味を持たせていますが、将来のCSSバージョンでは違う意味として扱われる可能性もありますから、CSSプロセッサは、たとえCSS2として妥当であるように見えたとしてもセレクタ内のどこかにカンマがある場合には無視すべきであるとされています。
CSS/スタイルシート情報
