他のファイルで定義したスタイルを取り込むには

@import

HTMLへのスタイルシートの適用は、3つの方法があります。

  • 外部ファイルで定義されたCSSとHTMLファイルを関連付けます。<link rel="stylesheet"...>
  • HTMLのhead要素内に記述します。
  • 要素のstyle属性に記述します。

HTMLへのスタイルシートの適用の優先順位は、次のようになります。

style属性 > head要素内のstyle要素 > 外部ファイル

CSSでは、スタイルの定義に別のスタイル(他のファイルで定義した)を読み込むことができます。 これは、スタイルをコンポーネント化しコンポーネントを組み合わせて全体的なスタイルの定義にする といった使い方ができます。

@importは、スタイルの定義よりも前に記述する必要があります。

@import "layout.css";
p{color: blue}

@importでは、メディアを指定して読み込ませることもできます。

@import url("layout.css") aural;
p{color: blue}

@importの優先順位

@importの優先順位は、読み込まれる場所によって変わります。次の例の場合を紹介します。

<html lang="ja">
<head>
    <meta http-equiv="content-style-type" content="text/css">
    <title>@importの優先順位</title>
    <link href="layout.css" rel=stylesheet type="text/css">
    <style type="text/css">
    <!--
        @import url("sample.css");
        p { color: blue }
    -->
    </style>
</head>
style属性 > head要素内のstyle要素 > @import > 外部ファイル