スタイルシートの位置

style 要素

いままでどおりheaderの中のstyle要素（styleタグで囲まれた部分）の中に書く方法

<style type="text/css">
 h1 {color:blue; }
 h2 {color:green;  background-color:palegreen; }
 p  {color:teal; }
 body {background-color:ivory; }
</style>

外部に用意された CSS ファイル

htmlとは別のファイルにスタイルを書いて保存し、htmlファイルのhead要素の中に次のような記述をする。URLは別ファイルの場所を示す。

<link rel="stylesheet" type="text/css" href="URL" />

たとえば

htmlとは別のファイルにいつものようにスタイルの指定を書いて、kihon.cssという名前でhtmlファイルと同じ場所に保存する。(普通は拡張子を.cssにする)

 h1 {color:blue; }
 h2 {color:green;  background-color:palegreen; }
 p  {color:teal; }
 body {background-color:ivory; }

そのファイルのURLを次のように指定する

<link rel="stylesheet" type="text/css" href="kihon.css" />

複数のhtmlファイルに対して共通のデザインを施す場合に便利です。

別ファイルは複数あってもかまいません。そのときは、linkの行を増やせばいいのです。

style 属性

効率の悪い方法。おすすめしないが、一時的に特定の箇所にだけスタイルを適用させる場合に簡便な方法。

開始タグの中に属性として指定する方法です。

<p style="color:red">

この属性を書いたタグの内容にだけ効果がでます。

３つの方法の混在と優先度

まず、別ファイルを指定して、その後にstyle要素で付け加えや訂正をするというのが普通です。

相反しない指定ならば両方有効になります。ぶつかるような指定をした場合は、基本的に後から読み込むものが有効になります。

たとえば、別ファイルで

 h1 {color:blue; }
 h2 {color:green;}
 p  {color:navy; }

その後のstyle要素で、

<style type="text/css">
 h1 {color:#006666; }
 h2 {background-color:#ccffcc; }
 span.chuui  {color:red; }
</style>

とすると、結果としてこのような指定したことになります。

 h1 {color:#006666; }
 h2 {color:green; background-color:#ccffcc;}
 p  {color:navy; }
 span.chuui  {color:red; }

課題　css2.html

css.html のcss部分をcss2.cssという名前で保存し、それを使用してレイアウトをするcss2.htmlを作りなさい。css2.htmlのstyle要素は削除すること。

css.html　→style要素の削除+<link …　href="css2.css" />　を追加→　css2.html
css.html　→styleの内容だけ→　css2.css

もちろん index.html からのリンクと、戻るリンクを作成します。目次のリンクは「レイアウト２」という文字列にすること。

余裕があればcss2.cssを使うもう一つのcss3.htmlを作ってみなさい。