◇１．スタイルシート入門（２）

◇ 1-1　スタイルシート設定の場所と優先順位

◇第１の方法（リンク方式）◇ 予め外部にスタイルシート・フアイルを１個作り、拡張子を｢.css 」にして保存します。保存場所は、なるべく同一ホルダー内が良いのですが、上下の階層でも読み込みはできます。
<head> 内に<h5> <link rel="stylesheet" href="stylesheet.css" type="text/css"></h5>の形で記述することで、同一フォルダー内にある「フアイル名.css」を呼び込み、そこに設定された仕様を実行することになります。
従って上記の形で.CSSフアイルにリンク付けしておけば、1個のフアイルで複数のフアイルに同じ仕様のものが、行き渡ることになります。（このシリーズのような場合には、全ページに渡って統一した表現が望まれるところです。）
◇第２の方法（エンベッド：埋め込み方式）◇ そのページ<head>部にスタイルシートを設定します。
本ページの例では、<a>（アンカータグ）、<h2～6> （見出しタグ）<p> （段落タグ） <li> (リストタグ)に作用を及ぼすようスタイルを設定してあります。
この <head> の段階では「タグ」とは呼ばずに「セレクタ」と呼びます。文字どうり「選択部」です。
この設定が <body> 内に記述された<a> <h> <p> <li> 等のタグに伝達され実行されるのです。

設定内容は各要素名の直後に｢{ 」と｢}」で囲んだ部分、これを「宣言部」と言いますが、ここに記述します。宣言部は「属性：」と「値；」を記述しますが、複数あってもかまいません。属性の後にコロン、値の後にセミコロンを付ければ何個でも繋げることができます。下はその形です。

セレクタ｛属性名：値；属性名：値；属性名：値；属性名：値；属性名：値；｝
選択部｛ｰー　ー　ー　ー　ー　ー　ー宣言部ー　ー　ー　ー　ー　ー　ー　ーｰ｝
◇第３の方法（インライン方式）◇ <body> 内の <xx> タグに直接スタイルを設定する方法です。
例えばこのページでも、一番最初の見出し（桃色）のところの見出しタグ <h2> にスタイルを設定し、
<h2 style="font-family:ＭＳ明朝; color：#ff0000; text-align:center;">～</h2>
としました。
実は <h2> タグについては３箇所にもスタイルが設定してあります。この重複は現実に起こりうることなのです。

第一の方法の「外部に「スタイルシートフアイル.CSS」を作り、仕様は文字色を「空色」で設定スミです。（但し、サンプルとして作ったので、内容は <h2 > タグだけを対象にしてあります。）

h2｛font-weight: bold; color: #00ffff; text-align: center；｝

また、第２の方法の <head> 部にも、<h2> は文字色を「緑色」で下記に設定してあります。

Ｈ2｛FONT-SIZE： 22pt； COLOR： #00ff00； font-family：ＭＳ明朝；｝

更に、第３の方法の <body> 内にある <h2> タグに直接下記スタイルを設定しました。

<h2 style="font-family: ＭＳ明朝; color: #ff0000; text-align: center;">～</h2>

このように <h2> タグには３箇所から、異なったスタイルが設定してありますが、下記の優先順位があります。

１．「body内の１つのタグに直接設定」

２．「head内設定で同一フアイル全般に適用される」

３．「外部にスタイルフアイルを作り、リンクタグで読み込む」の順位になっています。

ということで、このページの「スタイルシート入門（２）」の文字色「赤色」の「ＭＳ明朝体」は、１番目が優先されたか結果になっています。なお、文中の赤書きは <head> 部の「h5」セレクタに、カラー＃ff0000とフォントサイズ11ptを設定しました。

トップへ戻るスタイルシート目次へ戻る

◇１．スタイルシート入門（２）

◇ 1-1 スタイルシート設定の場所と優先順位

◇ 1-1　スタイルシート設定の場所と優先順位