CSSファイルをインポートする3つの方法の詳細な説明

CSS を導入する方法には、インラインスタイル、内部スタイルシート、外部スタイルシートの 3 つがあります。

1. インラインスタイル

CSS スタイルを導入するには、style 属性を使用します。

例：

<h1 style="color:red;">スタイル属性の適用</h1>

<p style="font-size:14px;color:green;">HTML タグで直接設定されたスタイル</p>

ページ作成時に使用することは推奨されませんが、テスト時には使用できます。

例えば：

<!DOCTYPE>
<html>
<ヘッド>
  <メタ文字セット="utf-8" />
  <title>インライン スタイル</title>
</head>
<本文>
     <!--インライン スタイルを使用して CSS を導入する-->
     <h1 style="color:red;">水面上に飛び出す</h1>
     <p style="color:red;font-size:30px;">私はpタグです</p>
</本文>
</html>

2. 内部スタイルシート

スタイルタグ内にCSSコードを記述します。スタイルタグはheadタグ内に記述します。

例：

<ヘッド>

<スタイル タイプ="text/css">

h3{

色：赤;

}

</スタイル>

</head>

例えば：

<!DOCTYPE>
<html>
<ヘッド>
  <メタ文字セット="utf-8" />
  <title>内部スタイルシート</title>
  <!-- 内部スタイルシートを使用して CSS を導入する -->
  <スタイル タイプ="text/css">
    div{
        背景: 緑;
    }
  </スタイル>
</head>
<本文>
     <div>私は DIV です</div>
</本文>
</html>

3. 外部スタイルシート

CSSコードは拡張子.cssのスタイルシートに保存されます。

HTML ファイルで .css 拡張子のスタイルシートを参照する方法は、リンクとインポートの 2 つがあります。

文法：

1. リンク

<link type="text/css" rel="styleSheet" href="CSS ファイルパス" />

2. インポート

<スタイル タイプ="text/css">

@import url("cssファイルパス");

</スタイル>

例えば：

<!DOCTYPE>
<html>
<ヘッド>
  <メタ文字セット="utf-8" />
  <title>外部スタイルシート</title>
  <!--リンク: 推奨-->
  <link rel="スタイルシート" type="text/css" href="css/style.css" /> 
  <!-- インポート-->
  <スタイル タイプ="text/css">
    @import url("css/style.css");
  </スタイル>
</head>
<本文>
     <オル>
         <li>1111</li>
         <li>2222</li>
     </ol>
</html>

リンクとインポートの違い

<リンク>

1. XHTMLに属する

2. CSSファイルをページへ優先的に読み込む

@輸入

1. CSS2.1に準拠

2. 最初に HTML 構造を読み込み、次に CSS ファイルを読み込みます。

IV. CSSにおける優先度

1. スタイルの優先

インラインスタイル > 内部スタイル > 外部スタイル (最後の 2 つは近接の原則に基づいています)

例えば：

インラインスタイルと内部スタイルの方が優先度が高くなります。

<!DOCTYPE>
<html>
<ヘッド>
  <メタ文字セット="utf-8" />
  <title>インライン スタイルと内部スタイル シートの優先順位</title>
    <!--内部スタイルシート-->
  <スタイル タイプ="text/css">
    p{
      色: 青;
    }
  </スタイル>
</head>
<本文>
     <!--インライン スタイル-->
     <p style="color: red;">私はp段落です</p>
</html>

ブラウザ実行効果:

結論: インラインスタイルは内部スタイルシートよりも優先されます。

内部スタイルシートと外部スタイルシートには優先順位が付けられます。

a. 内部スタイルシートは外部スタイルシートより上にあります

<!DOCTYPE>
<html>
<ヘッド>
  <メタ文字セット="utf-8" />
  <title>内部スタイルシートと外部スタイルシートの優先順位</title>
    <!--内部スタイルシート-->
  <スタイル タイプ="text/css">
    p{
      色: 青;
    }
  </スタイル>
  <!--外部スタイルシート-->
  <link rel="スタイルシート" type="text/css" href="css/style.css" /> 
</head>
<本文>
     <p>私は段落 p です</p>
     <div>私はdivです</div>
     <オル>
         <li>1111</li>
         <li>2222</li>
     </ol>
</html>

ブラウザ実行効果:

b. 外部スタイルシートは内部スタイルシートより上にあります

<!DOCTYPE>
<html>
<ヘッド>
  <メタ文字セット="utf-8" />
  <title>内部スタイルシートと外部スタイルシートの優先順位</title>
    <!--外部スタイルシート-->
  <link rel="スタイルシート" type="text/css" href="css/style.css" /> 
    <!--内部スタイルシート-->
  <スタイル タイプ="text/css">
    p{
      色: 青;
    }
  </スタイル>
</head>
<本文>
     <p>私は段落 p です</p>
     <div>私はdivです</div>
     <オル>
         <li>1111</li>
         <li>2222</li>
     </ol>
</html>

ブラウザ実行効果:

結論: 内部スタイルシートと外部スタイルシートは近接の原則を使用します。つまり、以下に記述されている方が優先されます。

注: インポートタイプとリンクタイプの優先順位にも近接性の原則が適用されます。

2. セレクタの優先順位

優先順位: IDセレクター > クラスセレクター > タグセレクター

<!DOCTYPE>
<html>
<ヘッド>
  <メタ文字セット="utf-8" />
  <title>セレクターの優先度</title>
  <スタイル タイプ="text/css">
    #a{
      色: 緑;
    }
    .b{
      色: 黄色;
    }
    h2{
      色: 赤;
    }
  </スタイル>
</head>
<本文>
     <h2>111</h2> <!--赤-->
     <h2 id="a" class="b">222</h2> <!--緑-->
     <h2 class="b">333</h2><!--黄色-->
</html>

ブラウザ実行効果: