8.スタイルシートを使う

<style ①>~</style>

①:type=”MIMEタイプ” media=”対象メディア”

HTML文書にスタイルシートを組み込むにはいくつかの方法がありますが、該当のHTML文書全体に適用されるスタイルシートを1箇所にまとめて記述する場合は、style要素を使います。

■type属性
スタイルシート言語のMIMEタイプを指定します。デフォルトの値は「text/css」です。そのためWebページで一般的なCSSを利用する場合には、type属性を省略することができます。

■media属性
style要素の中に記述されたスタイルシートを、どのメディアに適用するのかを指定します。
例えは、PCの画面であれは「screen」、印刷時用であれは「print」のように指定します。
デフォルトの値は「all」です。media属性が省略されたときは、すべてのメディアに同じスタイルシートが適用されます。






■サンプル

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8”>
<title>スタイルシートを使う SAMPLE</title>
<style media=”screen”>
 em{
  color:#ffff00;
  font-style:normal;
 }
</style>
<style media=”print”>
 em{
  color:#00ffff;
  font-style:normal;
 }
</style>
</head>
<body>
<p>SAMPLE</p>
</body>
</html>

■要素解説

カテゴリー:メタデータ・コンテンツ。scoped属性が指定されている場合はフロー・コンテンツ
利用できる場所:scoped属性が指定されていない場合は、メタデータ・コンテンツが期待される場所、またはhead要素の子要素であるnoscript要素内。
scoped属性が指定されている場合は、フロー・コンテンツが期待される場所(ただし、style要素とホワイトスペース以外の他のフロー・コンテンツより前)。
コンテンツモデル:type属性の値による

■ブラウザ対応状況

IE10=○、IE9=○、Firefox=○、Chrome=○、Safari=○、Opera=○、iOS6=○、iOS5=○、Android=○