第3章 CSSをHTMLに記述する その1
登録タグ： CSS スタイルシート セレクタ プロパティ 値 HTML
今回からはCSSを実際にHTMLファイル中に記述していきます。
記述する方法としては「直接タグに記述する方法」と「直接タグに記述しない方法」の２種類があります。
あまりに長くなるので、今回と次回の2回に分けていきます。
まずは以下のサンプルをご覧ください。
<html> <head> <title>CSSをHTMLに記述する</title> <style type="text/css"> <!-- p{ color: #FF0000; } --> </style> </head> <body> <h2 style="color: #009900;">CSSをHTMLに記述するテスト</h2> <p>このサンプルは、CSSをHTMLに記述するテストです。</p> </body> </html>
上のサンプルのうち、それぞれ赤字の部分は「<style>タグ」、緑字の部分は「コメントタグ」、紫字の部分は「style属性」となっています。
それでは順番に解説していきます。
<style>タグは、その名の通り「スタイルシート」を記述するためのタグです。
今回の例ではtype属性も一緒に記述しましたが、よく分からなければ書かなくても大丈夫です。
どうしても書きたい場合は、type属性の値に「text/css」を指定しましょう。
今回の例では<style>タグの中になぜかコメントタグがありますが、これはスタイルシート非対応のブラウザでスタイルシートがそのまま表示されるのを防ぐためです。
このようにコメントタグで囲むことによって、スタイルシート非対応のブラウザでスタイルシートが表示されないように防ぐことができます。
また、HTML内の各タグにスタイルシートを個別に設定する場合は、style属性を使って設定しましょう。
こうすることによって、各タグ個別にスタイルシートを適用させることができます。
ちなみにstyle属性を使用するときはプロパティと値のみで、セレクタは必要ありません。
もちろんstyle属性を使う時もプロパティと値を複数設定することができます。
カテゴリー:CSS編
2011/09/11 18:02:50 更新