"@
"から始まる命令を@規則(at-rule)と言います。@規則には次の四つがあります。
@charset
@import
@media
@page
スタイルシートに日本語などが含まれるとき、ユーザーエージェントはスタイルシートの文字コードを識別する必要があります。スタイルシートがソース文書中に埋め込まれている場合は(HTMLのstyle要素やstyle属性)、スタイルシートの文字コードはその文書全体の文字コードに一致します。外部スタイルシートが用いられている場合、ユーザーエージェントは次のようにしてそのスタイルシートの文字コードを判別します。
@charset
(後述)を探す。@charset
を用いるときは、以下のルールを守らなければいけません。
@charset "文字コード";
と記述します。@charset
はスタイルシートの先頭(1バイト目、BOMがあるときはその直後)に記述します。@charset
と "
の間は半角スペース一つのみ。これらのルールに反した@charset
は無視されます。
次の例ではスタイルシートの文字コードが"shift_jis"であることを明示しています。
@charset "shift_jis";
@import
を使うと別のスタイルシートを取り込むことができます。
@import url("スタイルシートのURI");
と記述します。@import "スタイルシートのURI";
と記述することもできます。all
"が指定されたものと見なされます。@import
は@charset
を除く、全ての規則の前に位置しなければいけません。@import
によって読み込まれたスタイルシートの規則は、後に続く規則よりも前に記述されていると扱われます。(読み込まれたスタイルシートの内容が@import
のあった位置に展開されると考えられます。)
@import url("common.css");
@import url("default.css") screen, print;
@import "print.css" print;
CSS 2.1では、コンピュータの画面を表す"screen
"、印刷媒体を表す"print
"などのメディアタイプを、「連続」か「ページ」か、「対話的」か「静的」か、などのメディアグループに分類しています。それぞれのプロパティに適用できるメディアは、個別のメディアタイプではなくメディアグループによって示されます。(例えば、font-size
プロパティが適用できるのは「視覚」グループのメディア、のように。)以下は、メディアタイプとメディアグループの一覧表です。
メディアタイプ | 説明 | メディアグループ | |||
---|---|---|---|---|---|
連続/ページ | 視覚/聴覚/音声/触覚 | グリッド/ビットマップ | 対話的/静的 | ||
braille |
点字 | 連続 | 触覚 | グリッド | 対話的、静的 |
embossed |
点字プリンタ | 連続 | 触覚 | グリッド | 静的 |
handheld |
携帯電話のブラウザなど | 連続、ページ | 視覚、聴覚、音声 | グリッド、ビットマップ | 対話的、静的 |
print |
印刷されたページや、印刷プレビュー | ページ | 視覚 | ビットマップ | 静的 |
projection |
投影機 | ページ | 視覚 | ビットマップ | 対話的 |
screen |
コンピュータの画面 | 連続 | 視覚、聴覚 | ビットマップ | 対話的、静的 |
speech |
音声ブラウザ、スクリーンリーダーなど | 連続 | 音声 | なし | 対話的、静的 |
tty |
テレタイプ、端末など | 連続 | 視覚 | グリッド | 対話的、静的 |
tv |
テレビ | 連続、ページ | 視覚、聴覚 | ビットマップ | 対話的、静的 |
all
"は全てのメディタタイプに適用されます。@media
規則は、スタイルの適用対象となるメディアタイプを特定します。@media
の次にメディタタイプをカンマで区切って列挙し、その後{ }
のブロックの中に規則集合を並べます。
@media print {
p { font-family: serif }
}
@media screen {
p { font-family: sans-serif }
}
@media screen, print {
p { line-height: 1.2em }
}
@page
規則については13.2 Page boxes: the @page rule - Paged mediaを参照してください。