style 要素
4.2.6 style 要素
- カテゴリー
- メタデータ・コンテンツ
scoped属性が存在する場合：フロー・コンテンツ- この要素を使うことができるコンテキスト：
scoped属性が存在しない場合：メタデータ・コンテンツが期待される場所scoped属性が存在しない場合：head要素の子となるnoscript要素の中scoped属性が存在する場合：フロー・コンテンツが期待される場所。ただし、style要素と要素間ホワイトスペース以外のあらゆるフロー・コンテンツより前- コンテンツ・モデル：
type属性の値に依存するが、下記本文で説明された要件に一致しなければいけない。- コンテンツ属性：
- グローバル属性
mediatypescoped- さらに、
title属性がこの要素で特別のセマンティクスを持ちます。 - DOMインタフェース：
-
interface HTMLStyleElement : HTMLElement { attribute boolean disabled; attribute DOMString media; attribute DOMString type; attribute boolean scoped; }; HTMLStyleElement implements LinkStyle;
style 要素は、ウェブ制作者がドキュメントにスタイル情報を組み込むことができるようにします。style 要素は、スタイリング処理モデルへの入力の一つとなります。この要素は、ユーザーに対してコンテンツを表しません。
type 属性はスタイリング言語を与えます。指定するなら、その値は、スタイリング言語を表す妥当な MIME タイプでなければいけません。charset パラメータを指定してはいけません。type 属性のデフォルト値は、この属性がない場合に使われるのですが、"text/css" です。[RFC2318]
指定の言語をサポートしているかを決定するためにタイプを調べるとき、ユーザーエージェントは、未知の MIME パラメータを無視してはいけません。 — 未知のパラメータを伴ったタイプは、未サポートであると見なさなければいけません。charset パラメータは、ここでは、MIME タイプを比較する目的においては、未知のパラメータとして扱わなければいけません。
media 属性は、どのメディアにそのスタイルが適用されるのかを指定します。その値は、妥当なメディア・クエリでなければいけません。ユーザーエージェントは、media 属性の値が、該当の環境に一致し、そして、他の関連の条件を満たすときは、そのスタイルを適用しなければいけません。そうでなければ、適用してはいけません。
スタイルは、さらに範囲を限定されるかもしれません。たとえば、@media ブロックが使われている CSS です。この仕様は、そのような追加の制限や要件に優先にすることはありません。
media 属性が省略された場合のデフォルトは、all です。デフォルトで、すべてのメディア対して、そのスタイルを適用するという意味です。
scoped 属性は論理属性です。もしこの属性がセットされれば、そのスタイルは、Document 全体ではなく、その style 要素の親要素をルートとするサブツリーに対してのみに指定のスタイル情報が適用されるものとして扱われます。
もし scoped 属性が存在すれば、ユーザーエージェントは、その style 要素の親要素（もしあれば）とその要素の子ノードにだけ、指定のスタイル情報を適用しなければいけません。そうでなければ、もし適用するなら、指定のスタイルをドキュメント全体に適用しなければいけません。
スコープ化された CSS リソースに対して、@ 規則の効果は、そのスコープ化されたシートとそのサブリソースにスコープ化されなければいけません。たとえ、該当の @ 規則が Document に影響を与えるすべてのスタイル・シートに普通に適用されるとしてもです。スコープ化された CSS リソースにあるあらゆる '@page' 規則は無視されなければいけません。
たとえば、スコープ化されたスタイル・シートで定義された '@font-face' 規則は、スコープ化されたセクションにおけるフォント規則という意味で、そのフォントを定義するだけになります。そのスコープ化されたセクションの外にあるスタイル・シートは、同じフォント名を使っていたとしても、その組込フォントを使うことにはなりません。
style 要素の title 属性は、代替えのスタイルシート・セットを定義します。もし style 要素が title 属性を持たないなら、それはタイトルを持ちません。祖先の title 属性がこの style 要素に適用されることはありません。[CSSOM]
style 要素の title 属性は、link 要素の title 属性のように、title がない style ブロックは親要素の title を継承しないという点で、グローバルの title 属性と違います。単に title がない状態となります。
style 要素の textContent は、次の ABNF にある style プロダクションに一致しなければいけません。キャラクター・セットは Unicode です。[ABNF]
style = no-c-start *( c-start no-c-end c-end no-c-start ) no-c-start = <any string that doesn't contain a substring that matches c-start > c-start = "<!--" no-c-end = <any string that doesn't contain a substring that matches c-end > c-end = "-->"
すべての子孫要素は、style 要素自身が評価される前に、そのセマンティクスに従って、処理されなければいけません。純粋なテキストからなるスタイリング言語に対して、ユーザーエージェントは、style 要素の直接の子要素となるすべてのテキスト・ノード（コメントや要素のようなノードではありません。）のコンテンツを連結したものを、ツリー順に、スタイル・システムに通すことによって、その style 要素を評価しなければいけません。。XML ベースのスタイリング言語に対しては、ユーザーエージェントは、その style 要素の子ノードすべてをスタイル・システムに通さなければいけません。
スタイリング言語のプロセッサーで見つかったすべての URL は、その要素に対応して（または、スタイリング言語によって定義されるように）、プロセッサーが呼び出されたときに、解決されなければいけません。
スタイルシートにクリティカル・サブリソースがあり、その取得の試行が完了したら、または、そのスタイルシートにクリティカル・サブリソースがなく、そのスタイルシートがパースされ処理されたら、ユーザーエージェントは、そのロードが成功したら、または、ロードするものが何もなければ、その style 要素で load という名前のシンプルなイベントを発出するタスクをキューイングしなければいけません。スタイルシートのクリティカル・サブリソースを完全にロードできなかったら（例：DNSエラー、HTTP 404 レスポンス、コネクションが途中で切断された、未対応のContent-Type）、その style 要素で error という名前のシンプルなイベントを発出するタスクをキューイングしなければいけません。スタイルシートやそのサブリソースの処理における非ネットワークエラー（例：CSS パース・エラー、PNG デコード・エラー）は、この段落の目的において、失敗ではありません。
これらのタスクに対するタスク・ソースは、DOM マニピュレーション・タスク・ソースです。
この要素は、スタイルシートにクリティカル・サブリソースがあれば、それらすべての取得試行が完了するまで、その要素のドキュメントの load イベントを遅らせなければいけません。
この仕様は、スタイル・システムを指定しません。しかし、CSS がほとんどのウェブブラウザでサポートされていると期待しています。[CSS]
media, type, scoped IDL 属性は、同じ名前の対応するコンテンツ属性を反映しなければいけません。
disabled IDL 属性は、代替えスタイルシート DOM に規定されているとおりに動作します。
LinkStyle インタフェースは、この要素でも実装されなければいけません。スタイリング処理モデルでその方法を定義しています。[CSSOM]
次のドキュメントには、強調されているところがありますが、イタリック体のテキストではなく、明るい赤色のテキストとしてスタイルされています。一方、作品名とラテン語の単語は、デフォルトのイタリック体のままになっています。これは、どうやって、適切な要素を使って、ドキュメントを簡単に再スタイルできるのかを示しています。
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>My favorite book</title>
<style>
body { color: black; background: white; }
em { font-style: normal; color: red; }
</style>
</head>
<body>
<p>My <em>favorite</em> book of all time has <em>got</em> to be
<cite>A Cat's Life</cite>. It is a book by P. Rahmel that talks
about the <i lang="la">Felis Catus</i> in modern human society.</p>
</body>
</html>
※ 原文：http://www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-style-element