外部スタイルシートのインポート - wicky @ ウィキ

外部スタイルシートのインポート

　link要素で指定の外部スタイルシートを読み込む方法のほかに、CSSには、@importによって、外部スタイルシートをインポートする方法がある。

●外部スタイルシートのインポート

<style type="text/css">
    <!--
    @import url(mono.css);
    h1 { color : blue }
    -->
</style>

---

　外部スタイルシートの中で、さらに外部スタイルシートをインポートすることもできる。

●外部スタイルシート内でのインポート

@import url("mono.css");
@import url("big.css");
h1 { color : blue }

---

　また、次のようにメディアを指定することも可能。複数のメディアを指定する場合は、カンマ「,」で区切って記述する。

●出力メディアの指定

@import 'print.css' tty, tv;

　※CSS2に対応している場合は、次のようにダブルクォーテーション「"」で括ってURIを指定することができる。

　※出力メディアを指定する方法として、次のように指定することも可能。
　　@media print{
　　 body { font-size : 120% }
　　}

---

　ただし、@importは、style要素および外部スタイルシートの冒頭に記述する必要がある。従って、次のような例は誤りとなり、最後のbig.cssは読み込まれない。

●インポートの誤り

@import "mono.css";
h1 { color : blue }
@import "big.css";