スタイルシートの設定 その１
スタイルを設定する方法は３通り！
1.スタイルシートの設定を別ファイルにしてページの外におく2.ＨＴＭＬ文書内にまとめて設定する3.インライン（タグに直接）でスタイルを埋め込む1.スタイルシートの設定を別ファイルにしてページの外におく
各ページの中ではスタイルの設定をせずに、スタイルシートをファイル化してページの外から操作する方法です
これは、通常のスタイルシート記述
セレクタ { 属性 : 値 }
この部分だけを抜き出して書き連ねたものをひとつのファイルにして(拡張子は.ｃｓｓ)、それを<LINK>タグでＨＴＭＬ文のなか取り込む方法です
この方法は、ページ数の多いサイトや、ひとつのスタイルをサイト全体に反映させ、サイトの統一感を出したい場合に有効です
書き方のサンプル → こちら
(ファイルの中身です これをメモ帳等に書いて保存するときに拡張子を .css に変えます)
例：見出しは赤い文字色、段落文は緑の文字にする
スタイルファイルの記述（ファイル名は○○.css）
H1 {color: red }
P {color: green }
HTML文書
<HTML>
<HEAD>
<LINK REL="stylesheet" HREF="○○.css" TYPE="text/css">
</HEAD>
<BODY>
<H1>見出し行</H1>
<P>段落文</P>
</BODY>
</HTML>
別のページにも同じようにリンクタグを貼って適応させてください
スタイルファイルは拡張子を.cssにすることで、スタイルシートとして認識されるので設定文の中にはスタイルタグはいりません
2.ＨＴＭＬ文書内にまとめて設定する
つくるページ毎、ＨＴＭＬ文書に<STYLE>タグで囲んでスタイルを記述します
ページ毎にスタイルを変えたいときに使えるし、一番多く使われてる方法です
書き込みは<HEAD>から</HEAD>の間です
例：見出しは赤い文字色、段落文は緑の文字にする
ＨＴＭＬ文書
<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
H1 {color: red }
P {color: green }
-->
</STYLE>
</HEAD>
<BODY>
<H1>見出し行</H1>
<P>段落文</P>
</BODY>
</HTML>
本サイトは基本的にこの方式の説明をしていきます
3.インライン（タグに直接）でスタイルを埋め込む
テキスト文の中で、タグに直接スタイルを記述していく方法です
特定の場所にだけスタイルを指定するときや、すでに外部CSSやヘッダでスタイルを指定している箇所に
新たに別のスタイルをつけるときに有効な方法です
例：見出しは赤い文字色、段落文は緑の文字にする
<HTML>
<HEAD></HEAD>
<BODY>
<H1 STYLE="color: red ">見出し行</H1>
<P STYLE="color: green ">段落文</P>
</BODY>
</HTML>
スタイルの優先順位
サイト全体、ページ指定、部分指定まで３段階のスタイル設定は重複してもＯＫです
たとえば１の方法(外部スタイルファイル)で段落文<P>の文字色を青に指定したとします
これでサイト全体の段落文が青色になりますが、特定のページだけ黒い文字色にしたいという場合、外部スタイルファイルのリンクをしたまま、２の方法が使えます
そうすることでサイト内のページ、5ページあったとして、４ページが段落文の文字色が青、２の方法を指定した１ページだけが段落文文字色黒になります
また、その黒文字色ページの中に、３つの段落文があったとします
上から２番目の段落だけ赤い文字色にしたいという場合、設定をそのままに３の方法が使えるということです
スタイルの優先順位はインラインが先で、ついでページ全体、最後に外部スタイルファイルという順になります
スタイルをつけられる対象に近い記述から順番に有効になっていくというわけです
ですから、最初に外部スタイルファイルで大まかな設定をしておいて、ついでページ毎、部分毎に細かな設定をしていくという方法をとる方が多いようです