Linking Style Sheets to HTML(jp)

スタイル・シートをHTMLへリンクするには多くの方法があり、それぞれ固有の利点と不利な点があります。新しいHTML要素や属性は、スタイル・シートとHTML文書との連携が容易になっています。

外部スタイル・シートは、HTMLの LINK要素を経てHTML文書にリンクされます：

<LINK>タグは、文書の HEADに置かれます。選択性の TYPEは、媒体タイプを特定するのに使われ－－カスケーディング・スタイル・シートには text/css－－サポートしていないスタイル・シート・タイプをブラウザは無視します。CSSファイル用の Content-typeとしてtext/cssを送るように、サーバーを設定することもいい考えです。

外部スタイル・シートは <HEAD>や <STYLE>のような如何なるHTMLタグも含むべきではありません。スタイル・シートは単にスタイル規則と声明だけから構成されるべきです。以下は一つからだけ構成されたファイルは、

P { margin: 2em }

外部スタイル・シートとして使うことができます。

<LINK>タグはまた選択性の MEDIA属性を取り、それでスタイル・シートが適用される媒体やメディアを特定すべきです。取り得る値は以下のようなものです。

多元メディアはコンマ区切りのリスト乃至はallで特定されます。

Netscape Navigator 4.xは、リンク乃至は組み込まれ、 screen以外の MEDIA値を宣言した、スタイル・シートを不正に無視します。例えば MEDIA="screen, projection"はNavigator 4.xによって無視されるスタイル・シートになり、描写装置がコンピューター画面であってもそうなります。Navigator 4.xはまた MEDIA=all宣言のあるスタイル・シートをも無視します。

REL属性は、リンクされたファイルとHTML文書の関係を定義するのに使われます。 REL=StyleSheetは 持続性(persistent)や好みの(preferred)スタイルを特定し、一方 REL="Alternate StyleSheet"は 代替えalternateスタイルを定義します。 持続性(persistent)スタイルは、スタイル・シートが可能な場合必ず適用させられるものです。 TITLE属性がないと、例での最初の<LINK>タグのように、永続スタイルを定義します。

好みの(preferred)スタイルは、例の二番目の<LINK>タグのように、自動的に適用されるものです。 REL=StyleSheetと TITLE属性の組み合わせは、好みのスタイルを特定します。制作者は一つ以上の好みのスタイルを特定することはできません。

代替え(alternate)スタイルはREL="Alternate StyleSheet"によって示唆されます。 exampleの三番目の<LINK>タグは代替え(alternate)スタイルで、ユーザーが好みのスタイルと置き代える選択ができます。

現在のブラウザは、代替えスタイルを選択する能力は一般的にないことに注意してください。

<LINK REL=StyleSheet HREF="basics.css" TITLE="Contemporary">

<LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary">

<LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary">

この例で、三つのスタイル・シートが一つの"Contemporary"スタイルに結び付けられ、好みのスタイルとして適用されています。多元のスタイル・シートを一つのスタイルに結び付けるには、各スタイル・シートで同じTITLEを使わなければなりません。

外部スタイル・シートは、そのスタイルが多数のページに適用される場合に理想的です。外部スタイル・シートで、制作者は一つのファイルを変更するするだけで、サイト全体の様子を変更することができます。同じ様に多くのブラウザは、外部スタイル・シートをキャシュし、それで一旦スタイル．シートをキャシュしページ表現上での遅延を回避します。

Windows 95/NT4のMicrosoft Internet Explorer 3は、リンクされたスタイル・シートからの BODY background imageやcolorsをサポートしていません。このバグのため、制作者は組み込まれたスタイルやインラインスタイルなどの別の機序を提供しようとし、 BODY要素の BACKGROUND属性を使おうとします。

スタイル・シートを組み込む

スタイル・シートは、 STYLE要素で文書に組み込まれます：

STYLE要素は文書のHEADに置きます。必須の TYPE属性はメディア・タイプを特定するのに使われ、 LINK要素の機能と似ています。同じ様に、 TITLEとMEDIA属性も STYLEで特定されなければなりません。

旧いブラウザは、STYLEに気付かなくて、普通は BODYの一部と見て、その内容を見せてしまいます。これを防ぐにはSTYLE要素の内容を前の例の様にSGMLコメント内に入れて置きます（ ）。

組み込まれたスタイル・シートは、一つの文書がユニークなスタイルを持っている場合に使われるべきです。同じスタイル・シートが幾つかの文書で使われる場合、外部スタイル・シートがより適切です。

スタイル・シートを移入する

スタイル・シートはCSSの@import声明を使って 移入(imported)されかもしれません。この声明はCSSファイルや STYLE要素内で使います：

別のCSS規則が STYLE要素に含まれているが、全ての @import声明はスタイル・シートの開始時に作動しなければならないことに注意してください。スタイル・シート自身で特定されている規則が、移入されたスタイル・シートの規則との衝突を上書きします。例えば、移入されたスタイル・シートに DT {background: aqua}があっても、定義用語はなお黄色い背景のままです。

スタイル・シートが移入される場合の序列は、それがどのように情報を流す（カスケードする）のかの決定で重要です。上の例でもし style.cssで、 STRONG要素が赤であると特定さたスタイル．シートを移入し、 punk.cssスタイル・シートは STRONG要素が黄色と特定されたスタイル・シートなら、後者の規則が優先し STRONG要素は黄色になります。

移入されたスタイル・シートはモジュール方式に適しています。例えば、サイトがセレクター使用によって異なるスタイル・シートを分けます。 BODY・ P・ H1そして H2などの共通要素の規則を与える一つの.css style sheetがあるかもしれません。更に、 CODE・ BLOCKQUOTEそして DFNなどの稀な規則を与える外部.css style sheetがあるかもしれません。 tables.css style sheetは、テーブル要素の規則を定義するのに使われます。これら三つのスタイル・シートはHTMLに含まれることができ、必要によっては、 @importもきます。これら三つのスタイル・シートはまた LINK要素を経て結び付けられることもできます。

インライン・スタイル

スタイルはSTYLE属性を使ってインライン化します。 STYLE属性は、 BASEFONTを除く全ての BODY要素（ BODY自身も含めて）・ PARAMそして SCRIPTに適用されます。属性は値として幾つでもCSS宣言を取り、各宣言はセミコロンで区切ります。以下のような例があります：

<P STYLE="color: red; font-family: 'New Century Schoolbook', serif

">
This paragraph is styled in red with the New Century Schoolbook font,
if available.</P>

New Century Schoolbookは、 STYLE属性で一重引用符で囲まれていて、それ故にスタイル宣言を含むには二重引用符が使われていることに注意してください。

インライン・スタイルは、他の方法よりも柔軟性に欠けます。インライン・スタイルを使うためには、 Content-Style-TypeHTTPヘッダー拡張を使って全ての文書用に一つのスタイル・シートを宣言しなければなりません。インライン化されたCSSで、制作者は Content-Style-Type HTTPヘッダーとしてtext/cssを送るか HEADで以下のタグを含めなければなりません：

インライン・スタイルは、表現のある内容を混在させるとスタイル・シートの多くの利点を失います。同じ様にインライン・スタイルも当然全てのメディアに適用され、と言うのはインライン・スタイル用に企画されたメディアを特定する機序がありません。要素の一回の軌道でスタイルが全てのメディアに適用され場合などは、この方法は控えめに使われるべきです。スタイルが一つの要素実現値（インスタンス）に適用されても或るメディアだけなら、 STYLE属性の代わりに ID属性を使いましょう。

CLASS属性

CLASS属性は、要素が属するスタイル・クラスを特定するのに使われます。例えば、スタイル・シートは punkや warningクラスを作成しています：

これらのクラスは CLASS属性のあるHTMLで参照されることができます：

<H1 CLASS=punk>Proprietary Extensions</H1>

<P CLASS=warning>Many proprietary extensions can have negative
side-effects, both on supporting and non-supporting browsers...

この例でpunkクラスはどんなBODY要素にでも適用され、と言うのはスタイル・シートにそれと協力するHTML要素を持っていないからです。この例のスタイル・シートを使うことで、 warningクラスはP要素にだけ適用されています。

見え方でなく機能によってクラスを名付けるのが、実際上いいことです。前の例で warningクラスは redと名付けられていますが、制作者がクラスのスタイルを別の色に変更すると決めたりまた音声合成装置用の読み上げスタイルを定義したくなったら、この名前は意味がなくなります。

クラスは、HTML文書の構造的に同じセクションに異なるスタイルを適用するのに大変効果的な方法です。例えば、このページは、CSSコードやHTMLコードに異なるスタイルを与えるためにクラスを使っています。

ID属性

ID属性は要素にユニークなスタイルを定義するのに使われます。CSS規則は以下のようなもので、

各ID属性は文書とおしてでユニークな（唯一の）値をもたねばなりません。その値は文字からはじまり続いて文字や数値乃至はハイフェンが続づかなければなりません。

W3C HTML 4.0仕様書は ID属性値でピリオドを許していますが、 W3C CSS1仕様書はIDセレクターでピリオドを許していません。またCSS1は数値コードとしてエスケープ・ユニコード文字とユニコード文字161-255を許していますが、HTML 4.0は ID属性値でこれらの文字を許していません。

IDの使用は、スタイルだけが如何なる文書にでも適用される必要がある場合、適しています。媒体特有性のスタイルを許し多元文書に適用される形式（各文書でただ一回だけで）では、 IDはSTYLE属性と対照てきになります。

SPAN要素

SPAN要素は、構造的なHTML要素に添えつけられないスタイルを制作者が作れるようにとHTMLに導入されました。 SPANは、スタイル・シートのセレクターとして使われ、また STYLE・ CLASSそして ID属性をも受け入れます。

SPANは、インライン要素です、従って丁度HTMLで EMや STRONGの様に使えます。重要な違いは、 EMと STRONGは構造的な意味を持っていますが、 SPANはその様な意味を持っていません。それは純粋にスタイルを適用するためにあるもので、従ってスタイル・シートが禁止されているなら何の効果も持ちません。

DIV要素

DIV要素は、機能において SPAN要素と似ていて、主な違いは DIV（「区域区間　"division"」の省略語）はブロック－レベル要素です。 DIVは、パラグラフ・テーブルそしてその他の区間を内容に取ります。これは、 DIVを、章・要約・注意といった容器の異なるクラスを作るためには理想的です。例えば：

<DIV CLASS=note>

<H1>Divisions</H1>

<P>

DIV要素はHTML 3.2で定義されていますが、ただALIGN属性しかHTML 3.2でゆるされていません。HTML 4.0はCLASS・STYLEそしてID属性をその他の中で加えています。

</P>

<P>

DIVは別のブロック－レベル要素を内容に取りますので、この注意の様な文書の大きなセクションを作るのに役立ちます。

</P>

<P>閉じタグは必須です。</P>

</DIV>

検証についての注意

幾つかのCSSスタイル化された文書は HTML 3.2参考書 (Wilbur)レベルで検証されるかもしれません。HTML 3.2は SPAN要素も CLASS・ STYLE乃至は ID属性も定義していませんし、 LINKや STYLE要素での TYPEや MEDIA属性をサポートしていません。

これらのスタイル関連の要素や属性は、非サポートブラウザに害をおよぼさなくて、うまく無視されるからです。これらの要素や属性を使った文書は HTML 4.0仕様書に反していると検証されます。