設定方法
head要素内にstyle要素を配置して、その中にスタイルの設定内容を記述します。
<style type="text/css">
ここにスタイルシートを記述します
</style>
属性 | 値 |
---|---|
type="" |
text/css を指定 |
media="" |
メディアタイプ を指定 (初期値は screen ) |
- 具体的な指定方法については、スタイルシートを指定するをご覧ください。
この方法で設定されたスタイルは、その文書内でのみ有効となります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
h1 { color: #ff0000; }
p { color: #808080; }
</style>
</head>
<body>
<h1>サンプル</h1>
<p>サンプルテキスト、サンプルテキスト。</p>
<p>サンプルテキスト、サンプルテキスト。</p>
<p>サンプルテキスト、サンプルテキスト。</p>
</body>
</html>
media属性を使用すると、そのスタイルをどのメディアに対して適用させるかを指定することができます。
この属性の値(メディアタイプ)は、カンマ( ,
)で区切って複数指定することが可能です。
例えば、以下のように指定した場合は、スタイルAはコンピュータ(screen
)とテレビ(tv
)で、スタイルBはプリンタ(print
)で使用されることになります。
<style type="text/css" media="screen, tv">
スタイルA
</style>
<style type="text/css" media="print">
スタイルB
</style>
コメントアウトについて
style要素に対応していない古いブラウザを考慮する場合は、次のようにスタイルシートの記述コメントアウトしておきます。(XHTMLでは不可)
<style type="text/css">
<!--
ここにスタイルシートを記述します
-->
</style>