HTML で CSS を導入する方法

HTML に CSS を導入する方法は 4 つあります。そのうち 2 つは HTML ファイル内に直接 CSS コードを追加する方法で、残りの 2 つは外部 CSS ファイルを導入する方法です。以下では、これらの方法とその長所・短所を見ていきます。

インライン方式

インライン方式とは、HTML タグ内のstyle`style` 属性に CSS を直接追加する方法です。

例：

<div style="background: red"></div>

これは通常、非常に悪い書き方です。現在のタグのスタイルしか変更できず、複数の<div>`<p>` に同じスタイルを持たせたい場合は、それぞれの<div>`<p>` に同じスタイルを追加しなければなりません。スタイルを変更したい場合は、すべての style 内のコードを変更しなければなりません。明らかに、インライン方式で CSS コードを導入すると、HTML コードが冗長になり、ウェブページの保守が難しくなります。

埋め込み方式

埋め込み方式とは、HTML の head 内の<style>`<style>` タグ内に CSS コードを記述する方法です。

例：

<head>
    <style>

    .content {
        background: red;
    }

    </style>
</head>

埋め込み方式の CSS は現在のウェブページにのみ有効です。CSS コードが HTML ファイル内にあるため、コードが集中しやすく、テンプレートウェブページを書く場合には通常有利です。テンプレートコードを見る人は、HTML 構造と CSS スタイルを一目で確認できるからです。埋め込み CSS は現在のページにのみ有効なので、複数のページで同じ CSS コードを導入する必要がある場合、この書き方ではコードが冗長になり、保守にも不利です。

リンク方式

リンク方式とは、HTML の head 内の<head>`<link>` タグを使用して外部 CSS ファイルを導入する方法です。

例：

<head>
    <link rel="stylesheet" type="text/css" href="style.css.html">
</head>

これは最も一般的で、最も推奨される CSS の導入方法です。この方法を使うと、すべての CSS コードは独立した CSS ファイルにのみ存在するため、保守性が高くなります。また、すべての CSS コードは CSS ファイルにのみ存在し、CSS ファイルは初回読み込み時に取り込まれるため、以後ページを切り替える際は HTML ファイルだけを読み込めば済みます。

インポート方式

インポート方式とは、CSS ルール @import を使用して外部 CSS ファイルを導入する方法です。

例：

<style>
    @import url(style.css);
</style>

リンク方式とインポート方式の比較

リンク方式（以下、link と略します）とインポート方式（以下、@import@import と略します）は、どちらも外部 CSS ファイルを導入する方法です。以下では、この 2 つの方法を比較し、なぜ @import の使用が推奨されないのかを説明します。@import。

link は HTML に属し、<link>`<link>` タグの href 属性を使用して外部ファイルを導入します。一方、@import@import は CSS に属するため、インポート文は CSS 内に記述する必要があります。注意すべき点は、インポート文はスタイルシートの先頭に記述しなければならず、そうしないと外部ファイルを正しくインポートできません。
@import@import は CSS2.1 で初めて登場した概念なので、ブラウザのバージョンが低いと、外部スタイルファイルを正しくインポートできません。
HTML ファイルが読み込まれるとき、link が参照するファイルも同時に読み込まれますが、@import@import が参照するファイルは、ページがすべてダウンロードされてから読み込まれます。

まとめ：私たちはできるだけ<link>`<link>` タグで外部 CSS ファイルを導入し、他の 3 つの方法は避けるか、使用を控えるべきです。

記事の出典：https://segmentfault.com/a/1190000003866058