CSS3 Reference


@import

外部スタイルシートを導入

試す

コード

@import url('screen.css') screen;
@import "print.css" print;

サンプル

この要素の背景は、ディスプレイでは黄色く、印刷時には赤くなります。

対応ブラウザ

Firefox
すべて
Chrome/Safari
すべて
Opera
すべて
InternetExplorer
すべて

パラメータ

レベル1
参考文献CSS3 module: Syntax#7.5. Style sheets including other style sheets: the @import rule

解説

外部CSSファイルを導入する方法です。

書式は、以下のようになります。
@import url("otameshi.css");
@import url(hogehoge.css);
@import "mogemoge.css";
@import 'foobar.css';

これで、otameshi.cssとhogehoge.css、mogemoge.css、foobar.cssというファイルをインポート出来ます。

url()か引用符のどちらかは省略できます。

次に、書く場所ですが、この@規則は、どの規則集合よりも前に書かないといけません。つまり、@charsetの直後、無い場合は一番初めに、この@規則を記述し、その後にほかの@規則や規則集合を記述します。

つまり、以下の2つの例が正解で、

  • style要素を使った例
    <head>
    <style type="text/css">
    <!--
      @import url(guts.css);
      li { margin: 0.8em }
      em { font-weight: bold }
    -->
    </style>
    </head>
  • 外部CSSファイルの例
    @import url("guts.css");
    @import url("rurara.css");
    em { font-weight: bold }
    th { font-style: italic }

以下の2つの例が間違いという事です。

  • style要素を使った例
    <head>
    <style type="text/css">
    <!--
      li { margin: 0.8em }
      em { font-weight: bold }
      @import url('guts.css');
    -->
    </style>
    </head>
  • 外部CSSファイルの例
    em { font-weight: bold }
    @import url('guts.css');
    th { font-style: italic }

何故途中で@importが出て来たらダメなのかは、よく分かりません。

後ろにメディアタイプを指定して、そのメディア専用のCSSファイルとしてインポートする事も可能です。このように書きます。
@import "klankey.css" print; /* printメディアの場合にのみ適用 */

この場合、メディアタイプがprintの場合だけ、そのCSSファイルをインポートします。以下のようにして、複数のメディアタイプを指定する事も可能です。
@import "klankey.css" projection, tv; /* projection、tv両メディアの場合に適用 */

コメントする


トラックバック

投稿されたコメント