W3G

外部の CSSファイルを取り込む

@import url("xxx.css");
@import url("xxx.css") media;
@import "xxx.css";
@import "xxx.css" media;

@importルールはスタイルシートのリストの記述が長くなった場合に、そのリストを複数にわけて整理することで編集を容易にする場合などに有用です。

@importルールの書式には2通りあり、@import に続いて、url(URI) の形式または直接、CSSファイルの所在を相対URI、または絶対URI で指定します(URIの形式について)。最後に終了を示すセミコロン（;）を記述します。メディア（環境）を限定する場合はセミコロン（;）の前にカンマ（,）区切りでメディアを列記します。CSS2.1では@importルールをリストの中で最初に記述する必要があります。唯一@charsetルールのみ先攻させることができます。

@import url("main.css");
@import url("sub.css");
body { ... }
......

<style type="text/css">
@import url("main.css");
@import url("sub.css");
</style>

CSSファイルの文字コードを指定

@charset "Shift_JIS";

スタイルシートのルールセットがいくつも並べられたリストになっている CSSファイルの文字コードを指定します。@charset に続いて、「"文字コード"」のように文字コードをダブルクォーテーション（"）で括ります。日本語の文字コードには "Shift_JIS", "EUC-JP", "ISO-2022-JP", "UTF-8" などがあります。文字コードは半角アルファベットの大文字・小文字が区別されません（case-insensitive）。

CSS ではスタイルシートのリストを整理するためにコメントを入れる場合やフォント名、生成内容などで半角英数字以外の漢字や平仮名などの日本語の文字列を値として扱うことがあるため、スタイルシートを参照する文書が記述されている文字コードと外部から参照する CSSファイル自体の文字コードが異なると、日本語部分などの文字列が文字化けを起こし、UA がその部分のスタイル情報を正しく解釈することができないことがあります。このため(X)HTML文書とCSSファイルとで文字コードが異なる場合は、@charsetルールで、CSSファイル自体の文字コードを指定すれば、UA がスタイル情報を正しく解釈できるように機能することが期待できます。

特に、この@charsetルールは、font-familyプロパティでの和文フォント名の指定時やcontentプロパティで ASCII文字列以外を含むCSSのプロパティの値を用いる際に有用です。

注意点として、@charsetルールは、CSSファイルの中でのみ記述することができ、そのリストの中で一番最初に記述する必要があります。コメントや @importルールを先行させることも許されません。

スタイルシートの出力先を振り分け

@media screen,handheld,tv {
......
}
@media print {
......
}

@mediaルールは、特定のメディア（環境）に対してのみスタイル情報を適用できるように振り分けることができます。指定方法は、@media に続いて、メディアの種類を指定し、中括弧（{ }）で囲んで中には、指定のメディアにのみ適用する専用のスタイル情報を記述します。複数のメディアを指定する場合は、メディアの種類をカンマ（,）で区切って列記します。CSS2.1 で定義されているメディアの種類には次の10種類があります。

all

すべての環境を出力対象とする

screen

パソコン画面を出力対象とする

tty

文字幅が固定の機器を出力対象とする

tv

テレビベースのウェブブラウザを出力対象とする

projection

プロジェクタを出力対象とする

print

プリンタを出力対象とする

handheld

携帯用機器を出力対象とする

braille

点字出力機器を出力対象とする

embossed

点字プリンタを出力対象とする

speech

合成音声出力機器を出力対象とする（CSS2.0のauralがCSS2.1でspeech に変更された）

(X)HTML では link要素と style要素に指定できる media属性と同じ役割ですが、media属性には点字プリンタを出力対象とする "embossed" は定義されていません。@mediaルールを使うことで、視覚環境用のスタイルと印刷用のスタイルなどを振り分けることができます。

ページボックスのスタイルを記述

@page {
......
}

コンピュータの画面は、文書の矩形（四角形の）領域を切り取って表示し、スクロール機構によって連続的にアクセス可能な連続メディアです。一方、ページメディアは、改ページによってアクセスされます。ページメディアとは、embossed（点字プリンタ）, print（プリンタ）, projection（プロジェクタ）を指します。handheld（携帯機器） と tv（テレビベースのウェブブラウザ）はページメディアと連続メディアの両方の特性を持つとされます。ページメディアは矩形（四角形の）領域のページボックスを生成して、文書をフォーマット化し、ページボックスを実際の紙や OHPシートに変換して出力します。

そこで、@pageルールはページメディアが印刷等でページとしてリソースを表示する際（プリントアウト時）の見た目を規定します。規定できるのはmarginプロパティ, orphansプロパティ, page-break-afterプロパティ, page-break-beforeプロパティ, page-break-insideプロパティ, widowsプロパティだけで、これ以外のCSS プロパティ指定しても無視されます。

指定方法は @page に続いて、中括弧（{ }）で囲んだ中にページメディア用のスタイル情報を記述します。