<style type=”text/css”><!– セレクタ { プロパティ:値 ; … }–></style>
CSSの書き方
<style type=”text/css”>
<!–
セレクタ { プロパティ:値 ; プロパティ:値 ; … }
セレクタ { プロパティ:値 ; プロパティ:値 ; … }
…
–>
</style>
解説
スタイルシートは、HTMLファイルごとに設定することもできます。
この場合、HTML文書の冒頭でそのHTMLに必要なCSSを以上のように一括で記述し、ブラウザに読み込ませます。
上記の記述はHTMLのヘッダー(<head>〜</head>間)に挿入する必要があります。
<style>〜</style>間の<!–と–>は、CSSの指定をコメント化して、スタイルシートに対応していないWEBブラウザで、この部分が表示されるのを防ぐためのものです。
HTMLの冒頭部でこれらのCSSを定義し、さらに各要素で個別にスタイルシートを適用することもできます。
また、HTMLの冒頭部と各要素で同じプロパティを設定していた場合、後者の方が優先されます。
CSS/HTMLサンプル
HTML
<style type=”text/css”>
<!–
p { line-height:130% ; }
#sample { font-size:small ; background:#ffdff9 ; }
–>
</style>
HTML内
<p>段落に適用</p>
<div id=”sample”>DIV要素に適用</div>
サンプル 段落とDIV要素にスタイルシートを適用
参考:HTML内に記述する欠点
HTML内にこれらのスタイルシートの複数のプロパティを記述すると、HTMLの冒頭がこれらの情報で埋め尽くされ、やたらと頭でっかちなHTMLとなってしまいます。
このようなHTMLは検索エンジン対策の上で不利となります。