CSSリンクと@importの違い

ページで CSS を使用するには、主に 3 つの方法があります: 1. 定義されたスタイル属性値をインラインで追加します。 2. ページヘッダーでのインライン呼び出し。 3. 外部リンク呼び出し。

外部参照には、link と @import の 2 種類があります。

XML/HTML コード

<link href="stylesheet" href="CSS文件" type="text/css"/>

XML/HTML コード

46d5fe1c7617e3914f214aaf043f4ccf
    @import url("CSS文件")
531ac245ce3e4fe3d50054a55f265927

どちらも CSS を外部参照する方法ですが、次のような違いがあります。

違い 1: リンクは XHTML タグです。 CSS のロードに加えて、RSS などの他のトランザクションも定義できます。@import は CSS カテゴリに属し、CSS のみをロードできます。

違い 2: リンクが CSS を参照する場合、ページが読み込まれると同時に CSS が読み込まれます。@import では、読み込む前にページが完全に読み込まれる必要があります。

違い 3: link は XHTML タグであるため、互換性の問題はありません。@import は CSS2.1 で提案されており、以前のバージョンのブラウザは対象外です。

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

違い 5: リンク スタイルの重みが @import よりも高くなります。

補足: @import を記述する最良の方法
@import には一般に次の方法があります:

@import 'style.css' //Windows IE4/ NS4、Mac OS X IE5、Macintosh IE4/IE5/NS4 ではありません
@import "style.css" を認識する //Windows IE4/ NS4、Macintosh IE4/NS4 は
@import url(style.css) を認識しない //Windows NS4、Macintosh NS4 は
@import url('style. css' ) //Windows NS4、Mac OS .css) および @import url("style.css") が最良の選択であり、ほとんどのブラウザーと互換性があります。バイト最適化の観点からは、@import url(style.css) が最も推奨されます。

CSS リンクと @import の違いの詳細については、PHP 中国語 Web サイトの関連記事に注目してください。