1. Home
  2. HTML & スタイルシート[CSS]

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

メモ：  Category：html

@import

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

  • 外部ファイルで定義されたCSSとHTMLファイルを関連付けます。<link rel=&quat;stylesheet&quat;…>
  • 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 > 外部ファイル

Related Link(Ads)

bluenote by BBB

Category: