CSSにおけるlinkと@importの違いを詳しく解説

link と @import の両方で CSS スタイルシートを導入できることは誰もが知っていますが、この 2 つの違いは何でしょうか?まずそれぞれのリンク方法について説明し、その後、それぞれの違いについて説明します~~~

リンク方法:

<link rel="stylesheet" type="text/css" href="index.css">

@import インポート方法:

<style type="text/css">   
 @import url(&#39;index.css&#39;);   
 </style>

優先度: 埋め込みスタイル>内部スタイルシート>インポートスタイルシート (スタイルシートへのリンク)

インポート方法はリンク方法と非常に似ていますが、実際には内部スタイルシートに存在するのと同等ですが、それでもその優先度は内部スタイルの優先度よりも低いです。シートとリンクされたスタイルシートは位置によって異なります。後から定義された方が優先されます。

注: 外部スタイル シートをインポートする場合、その場所はスタイル シートの上部、つまり他のスタイルの前にある必要があります。

それらの間には合計5つの違いがあります（私が知っている限り）今後新しい発見があれば追加します。

1: リンクは XHTML タグであり、CSS をロードするだけでなく、RSS などの他のトランザクションも定義できます。@import は CSS カテゴリに属し、CSS のみをロードできます。

2 つ: リンクが CSS を参照する場合、ページのロードと同時にロードされます。@import は、ロードする前にページが完全にロードされるのを待つ必要があります。

3: リンクは XHTML タグです。@import には互換性の問題はありません。以前のバージョンのブラウザはそれをサポートしません。

4: リンクは、JavaScript を使用して DOM を制御してスタイルを変更することをサポートしていますが、@import はサポートしていません。

5: @import は、CSS ファイルに他のスタイルシートを再度導入できます。

上記は編集者が紹介した CSS のリンクと @import の違いです。ご質問があればメッセージを残してください。編集者がすぐに返信します。また、PHP 中国語 Web サイトをサポートしていただきありがとうございます。

CSS における link と @import の違いの詳細な説明については、PHP 中国語 Web サイトに注目してください。