XMLへのスタイルの適用方法

外部スタイルシート

チップ: ブラウザで 試してください。

HTMLは外部のスタイルシートにリンクするための リンク要素を持っていますが、すべてのXMLベースのフォーマットが そのような要素を持っているわけではありません。もし適当な要素がない場合、 あなたはそれでも下記のようなxml-styleshhetのプロセシング 命令の形で外部スタイルシートを添付することができます。

<?xml-stylesheet href="my-style.css" type="text/css"?>
... ドキュメントの残り ...

このプロセシング命令(PI:processing instruction)は、ドキュメントの最初の タグの前に記述されなければなりません。type="text/css"は必須 ではありませんが、ブラウザの助けになります。もしそのブラウザがCSSをサポート していない場合、このファイルをダウンロードする必要がないとわかるからです。

単にHTMLのlink要素と同じように、複数の xml-stylesheetPIがあり、それらはtypeやmedium、titleなどの 属性をセットすることができます。

ここからはより大きな例です。まず三つのスタイルシートを持っていると 仮定しましょう。そのうち一つは、それぞれの要素（inline, block, list-itemなど） の基礎的な表示タイプを設定し、他の二つはそれぞれのカラーと余白を設定します。 最後の二つは、お互いに代わりになれるたいうになっており、ドキュメントの読者は どちらを使用するか選ぶこともあるでしょう。ドキュメントが印刷される時をのぞいて、 最後のスタイルを使用するでしょう。これが 一般的なスタイル シートです。

/* common.css */
INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }

下記は、代替のスタイルシートの一つで、 "modern.css" という名のファイル内にあります。

/* modern.css */
ARTICLE { font-family: sans-serif; background: white; color: black }
AUTHOR { margin: 1em; color: red }
HEADLINE { text-align: right; margin-bottom: 2em }
PARA { line-height: 1.5; margin-left: 15% }
INSTRUMENT { color: blue }

そしてこれが、"classic.css"という名の別のスタイルです。

/* classic.css */
ARTICLE { font-family: serif; background: white; color: #003 }
AUTHOR { font-size: large; margin: 1em 0 }
HEADLINE { font-size: x-large; margin-bottom: 1em }
PARA { text-indent: 1em; text-align: justify }
INSTRUMENT { font-style: italic }

これらの三つのスタイルシートがリンクしているXMLドキュメントは以下の ようになっています。

<?xml-stylesheet href="common.css" type="text/css"?>
<?xml-stylesheet href="modern.css" title="Modern" media="screen"
  type="text/css"?>
<?xml-stylesheet href="classic.css" alternate="yes"
  title="Classic" media="screen, print" type="text/css"?>
<ARTICLE>
  <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
  <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
  <PARA>
    One evening, just as he was getting his 
    <INSTRUMENT>flute</INSTRUMENT> ready and his
    musicians were assembled, an officer brought him a list of
    the strangers who had arrived.
  </PARA>
</ARTICLE>

さらなる詳細については、W3C勧告“XMLドキュメントで想定されるスタイルシート”

埋め込み型スタイルシート

チップ: あなたのブラウザで、 試して みてください。

HTMLは、外部ファイルを必要とせずに、HTMLファイル内に直接スタイルシートを 埋め込むことができるstyle要素を持っています。 いくつかのケースではこれはもっと簡単で、特にスタイルシートがドキュメント に特定的なものである場合などです。

ほとんどのXMLベースのフォーマットはそのような要素は持っていませんが、 外部スタイルシートにリンクするのと同じPIが、ドキュメント自身に埋め込まれた スタイルシートにポイントするのに使用することができます。 2006年02月時点では、これはまだ技術的な問題を抱えており、公式の 仕様は存在しません。例えば、以下のようになります。

<?xml-stylesheet href="#style" type="text/css"?>
<ARTICLE>
  <EXTRAS id="style">
    INSTRUMENT { display: inline }
    ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
    EXTRAS { display: none }
  </EXTRAS>
  <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
  ...
</ARTICLE>

この例では、type="text/css"は必ず表示されていなければ なりません。そうでなければ、ブラウザ(もしくは他のプログラム)は、スタイルシート 言語を推定しなければなりません。xml-stylesheet PIは今は外部 スタイルシートにはポイントしていませんが、ドキュメント自身の要素にポイント しています。その要素は、リンクのターゲットとしての役割を持つid 属性として識別されます。(特定のXMLフォーマットに依っては、id属性 は、何か他のもので呼ばれます。また、いくつかのフォーマットでは、適切な 属性がまったくありません。)

インラインスタイル

HTMLはまた、 スタイル属性のような形で、個別の要素に直接スタイルを付加 することを許可しています。ほとんどのXMLベースのドキュメントフォーマットは、 そのような属性を持たないでしょうが、いくつかはドキュメントの内部で使用 することのできるHTMLの機能（モジュール）を許可しています。

クラス属性

チップ: ブラウザで試して みてください。

HTMLの要素のサブクラスを作ることを許可する クラス属性は、大多数のXMLベースのドキュメントフォーマット では利用することができないようです。もちろんCSSは、単にclass だけでなく、どんな属性ベースでも要素を選択することができますが、シンタックス はより利便性が低いです。

以下は例です。もしclass属性があってドキュメントフォーマットが それをHTML内で動作するように定義しているなら、ドット(.)でそれらを表記する ことができます。(ですので、この特定の例は動作しないでしょう。なぜなら、 <doc>は、ブラウザがclassを持つものとして知っている ものではないからです。)

<?xml-stylesheet href="#s1" type="text/css"?>
<doc>
  <s id="s1">
    s { display: none }
    p { display: block }
    p.note { color: red }
  </s>
  <p>Some text... </p>
  <p class="note">A note... </p>
</doc>

もしドキュメントフォーマットがclassがサブクラスを作成すること 明記していない場合、あなたはより長いセレクターを"[ ]"とともに使用 する必要はありません。

<?xml-stylesheet href="#s1" type="text/css"?>
<doc>
  <s id="s1">
    s { display: none }
    p { display: block }
    p[class~=note] { color: red }
  </s>
  <p>Some text... </p>
  <p class="note">A note... </p>
</doc>

もしclass属性がない場合、しかし他の何かを利用できるならば、 属性セレクター"[ ]"を適用することができます。

ブラウザで 試して見てください。

<?xml-stylesheet href="#s1" type="text/css"?>
<doc>
  <s id="s1">
    s { display: none }
    p { display: block }
    p[warning="yes"] { color: red }
  </s>
  <p>Some text... </p>
  <p warning="yes">A note... </p>
</doc>