HTMLヘッダーで宣言しておく方法

これは、 HTMLの<head>と</head>の間にあらかじめ、 「このタグはこういうスタイルで表示する。」 というのを設定しておく方法です。 例えば、

<head>
<style type=text/css>
	h3{color:red;}
	h4{font-size:x-small;text-decoration:underline;}
</style>
</head>
などと書いておくと、
<h3>レベル3の見出し</h3>
<h4>レベル4の見出し</h4>
と書くだけで、

レベル3の見出し

レベル4の見出し

と表示されるようになります。

この方法だと、例えば、「模様替えしてレベル3の表示方法を変更しよう」と思ったとき、 ヘッダー部のh3{}を編集するだけですみます。 また基本的なスタイルだけ先にヘッダーで定義しておいて、 細かな変化をつけるときははタグに直接書く。という事ができます。 さて、次の例を見て下さい。
<h3 style="font-size:x-large">レベル3の見出し</h3>
<h4 style="text-decoration:none">レベル4の見出し</h4>

レベル3の見出し

レベル4の見出し

レベル3の見出しにフォントサイズの指定を追加し、 レベル4の見出しは下線をなしにしています。 例のように、ヘッダー部に書いたのとタグに直接書いたのとでは、 タグに直接書いた方が優先されます。

ヘッダーでスタイルを指定する方法は、タグに直接書き込む方法と比べると 断然使いよいのですが、これでも面倒な場合があります。 それはページが複数にわたってある場合で、この方法で指定したスタイルを変更するには、 全部のファイルを開いて、一つ一つヘッダーのスタイル宣言を変更していかなくてはなりません。

そこで最後の方法。 もっとも、本来はこの方法で使うもので、これが普通なのですが。

3.CSSファイルに記述する
1ページ目に戻る
目次に戻る