style

概要

Style 要素は、文書のスタイル情報を含みます。スタイル情報は、この要素内に CSS の文法で記述します。

• コンテンツカテゴリ メタデータコンテンツ、scoped 属性が提供された場合: フローコンテンツ
• 許可された内容 type 属性の値に依存
• タグの省略 不可。開始と終了タグの両方が必要。
• 許可された親要素 ...
• DOM インターフェイス HTMLStyleElement

属性

他のすべての HTML 要素と同様に、この要素はグローバル属性を持ちます。

type

この属性は、スタイル言語を MIME タイプで定義します (文字セットは指定すべきではありません)。この属性を省略した場合、'text/css' として解釈されます。
【訳注: 省略時の動作は単に主用な実装の挙動にすぎませんでしたが、HTML5 で正式な仕様となりました。script 要素の type 属性についても同様です。】

media

このスタイルを適用するメディア。メディアクエリを指定します。http://dev.w3.org/csswg/css3-mediaqueries を参照してください。

scoped

この属性が指定された場合、スタイルは、その親要素にのみ適用されます。省略した場合、スタイルは文書全体に適用されます。WhatWG 仕様 を参照してください。

title

代替のスタイルシートセットを指定します。

disabled

この属性を記述すると、要素内に指定されたスタイル規則が Document に適用されなくなります。

例

シンプルなスタイルシート

<style type="text/css">
body {
  color:red;
}
</style>

スコープ限定のスタイルシート

<article>
  <h1>Scoped stylesheet</h1>
  <div>The scoped attribute allows for you to include style elements mid-document.
   Inside rules only apply to the parent element.</div>
  <p>This text should be black.</p>
  <section>
    <style scoped>
      p { color: red; }
    </style>
    <p>This should be red</p>
  </section>
</article>

実動サンプル

仕様

ブラウザ実装状況

[1] Chrome 20 以降で、"Enable <style scoped>" または "experimental WebKit features" フラグを chrome://flags で勇往にすることでサポートされます。
[2] Gecko 20 以降は :scope 疑似クラスを実装していますが、設定項目 layout.css.scope-pseudo.enabled に true を設定しなければなりません。これは Nightly および Aurora テストバージョンのみデフォルトで有効です。

関連情報