CSS 外部スタイルシート

CSS 外部ファイルの読み込み方

外部ファイルを使ってスタイルシートを設定すと、複数の HTML で共用できるだけでなく、HTML のソースを修正せずにレイアウトも含むスタイルの変更ができます。W3C（ World Wide Web Consortium ）では、外部スタイルシートの使用を推奨しています。
外部スタイルシートを読み込む場合は、次のように記述します。複数の外部スタイルシートがある場合も、複数行書くことで読み込むことができます。

この例は、次のようなディレクトリとファイル構造の場合を想定しています。　の記号は、ディレクトリを表します。

• web_dir
  • html_dir
    • css_outside.html
  • css_dir
    • outside.css
    • child_dir
      • out1.css
      • out2.css

CSS 外部ファイルのインポート

機能や定義の種類ごとに分けた複数の外部スタイルシートを利用すると、ホームページ製作がかなり汎用化されます。ところが、前項のような HTML に複数の外部スタイルシートを読み込む記述では、追加の定義の新しいスタイルシートを追加する場合は、HTML を修正しなければなりません。おそらく複数の HTML を修正することになります。
そこで、新しいスタイルシートを追加する場合でも、スタイルシート側だけ修正すればよい方法があります。HTML からは、親の外部スタイルシートだけを指定し、親の外部スタイルシートから、子のスタイルシートをインポートします。こうすれば、外部スタイルシートの追加や削除があっても、HTML はそのままで親のスタイルシートだけを修正すれば済みます。
ディレクトリとファイルの階層は、前項と同じ構造として例を示します。

親の外部スタイルシートからインポートする css ファイルの相対 url は、親の外部スタイルシートが基準になります。
したがって、css で使用する背景画像などは、親の外部スタイルシートの下の階層のディレクトリに置くと使いやすいと思います。