CSS の 4 つのインポート方法と優先順位の簡単な分析

第一に: CSSを導入する4つの方法

CSS を導入する方法には、インラインスタイル、埋め込みスタイル、リンクスタイル、インポートスタイルの 4 つがあります。

1. インラインスタイル

最も直接的でシンプルな方法は、HTML タグで直接 style="" を使用することです。次に例を示します。

<p style="color:#F00; "></p>

デメリット: HTML ページが純粋ではなく、ファイルサイズが大きく、スパイダークローリングに適さず、その後のメンテナンスが不便です。

2. インラインスタイル

インラインスタイルとは、 <head></head>の間に CSS コードを記述し、 <style></style>で宣言することを意味します。次に例を示します。

<スタイル タイプ="text/css">
本文、div、a、img、p{マージン:0; パディング:0;}
</スタイル>

長所と短所: ページでは公開 CSS コードが使用され、各ページごとに定義する必要があります。Web サイトに多数のページがある場合、各ファイルのサイズが大きくなり、後でメンテナンスするのが難しくなります。ファイルが少なく、CSS コードもそれほど多くない場合は、このスタイルは依然として非常に適しています。

3. リンクスタイル

リンクスタイルは最も頻繁に使用され、実用的なスタイルです。次のように、 <head></head>の間に<link…/>を追加するだけです。

<link type="text/css" rel="スタイルシート" href="style.css" />

長所と短所: ページフレームワークコードとプレゼンテーションCSSコードを完全に分離し、プリプロダクションとポストメンテナンスが非常に便利になります。

4. インポートスタイル（非推奨）

スタイルのインポートは、スタイルのリンクと似ています。@import スタイルは、CSS スタイルシートをインポートするために使用されます。HTML が初期化されると、2 番目の埋め込みスタイルと同様に、HTML または CSS ファイルにインポートされ、ファイルの一部になります。

@import は HTML では次のように使用されます。

<スタイル タイプ="text/css">
url をインポートします(style.css);
</スタイル>

@import は CSS で次のように使用されます。

url をインポートします(style.css);

2番目：4つのCSS導入方法の優先順位

1. 近接原則

2. 理論上: インライン > 埋め込み > リンク > インポート

3. 実際、埋め込み、リンク、インポートは同じファイルヘッダーにあり、対応するコードに近い方が優先されます。

経験：

1. 同じ CSS 定義が 2 つの CSS ファイルに分散されている場合、スタイルは後で導入される CSS ファイルから取得されます。
2. サードパーティコンポーネントの CSS を HTML の先頭に配置し、カスタマイズされた CSS を HTML の後ろに配置するのが最適です。

要約する

CSS の 4 つのインポート方法と優先順位についての記事はこれで終わりです。CSS のインポート方法の優先順位の詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: MySQL シリーズ 9 MySQL クエリキャッシュとインデックス

>>: ウェブフロントエンドコードを書く際の考慮事項のまとめ