Link と @import の違いを詳しく見る

ページで CSS を使用する主な方法は、スタイル属性値をインラインで追加する方法、ページヘッダーでインラインで呼び出す方法、外部リンクを介して呼び出す方法の 3 つです。外部参照には、link と @import の 2 種類があります。 CSS を外部から参照する方法は 2 つあります: link と @import:

XML/HTML コード

コードをコピー

コードは次のとおりです。

XML/HTML コード

コードをコピー

コードは次のとおりです。

<スタイルタイプ="text/css" メディア="screen">
@import url("CSS ファイル");
</スタイル>

どちらも CSS を外部参照する方法ですが、いくつかの違いがあります。

違い 1: link は XHTML タグです。CSS を読み込むだけでなく、RSS など他のものも定義できます。@import は CSS カテゴリに属し、CSS のみを読み込むことができます。

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

違い 3: link は XHTML タグであり、互換性の問題はありません。@import は CSS2.1 で提案されており、それより低いバージョンのブラウザーではサポートされていません。

違い 4: ink は、スタイルを変更するために DOM を制御するための JavaScript の使用をサポートしていますが、@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 X IE5、Macintosh IE4/IE5/NS4は認識しません
@import url("style.css") //Windows NS4、Macintosh NS4 は認識しません上記の分析から、@import url(style.css) と @import url("style.css") が、最も互換性の高いブラウザーで最適な選択であることがわかります。バイト最適化の観点から、@import url(style.css) が最も推奨されます。

外部参照 CSS におけるリンクと @import の違い

この 2 日間で、XHTML で CSS を読み込む方法をいくつか書き終えました。その中で、CSS への外部参照は、link と @import の 2 つの方法に分かれています。
基本的に、どちらの方法も CSS ファイルを読み込むためのものですが、微妙な違いがあります。
違い1 ：私たちの先祖間の違い。 link は XHTML タグですが、@import は完全に CSS によって提供されるメソッドです。
CSS の読み込みに加えて、link タグは RSS の定義、rel 接続属性の定義など、他の多くのことも実行できますが、@import は CSS のみを読み込むことができます。
違い2 ：読み込み順序の違い。ページが読み込まれると (つまり、閲覧者がページを閲覧すると)、リンクによって参照される CSS は同時に読み込まれますが、@import によって参照される CSS はページ全体がダウンロードされるまで待機してから読み込まれます。そのため、@import を使用して CSS を読み込むページを閲覧すると、最初はスタイルが表示されず (ちらつきます)、ネットワーク速度が遅い場合はそれが顕著になります (Dream City は @import を使用して CSS を読み込みます。ダウンロード中に Dream City の Web ページを閲覧すると、上記の問題が発生します)。
違い3 ：互換性の違い。 @import は CSS2.1 で提案されたため、古いブラウザではサポートされていません。@import は IE5 以降でのみ認識されますが、link タグではこの問題は発生しません。
違い 4 : DOM を使用してスタイルを制御する場合の違い。スタイルを変更するために DOM を制御するために JavaScript を使用する場合、@import は DOM によって制御できないため、リンクタグのみを使用できます。
基本的にはこれらが違いです（他にも違いがあれば教えてください。追加します）。残りは同じです。上記の分析から、リンクタグを使用する方が良いでしょう。
標準的な Web ページ作成で CSS ファイルを読み込む場合は、画面、印刷、すべてなど、読み込むメディアも選択する必要があります。これについては、CSS 上級チュートリアルで紹介します。
注記：
1. ネットユーザーのcomehopeさんは、彼のメッセージのもう一つの違いを指摘した。
違い 5: @import を使用すると、他のスタイルシートを CSS にインポートできます。たとえば、メインスタイルシートを作成し、そのメインスタイルシートに他のスタイルシートをインポートできます。
メイン.css

コードをコピー

コードは次のとおりです。

———————-
@import "sub1.css";
@import "sub2.css";
サブ1.css
———————-
p {色:赤;}
サブ2.css
———————-
.myclass {色:青}

これにより、変更や拡張が容易になります。
Monkey Tip: これを行うと、Web サイトサーバーへの HTTP リクエストが多すぎるという欠点があります。以前は 1 つのファイルでしたが、現在は 2 つ以上のファイルになり、サーバーの負荷が増大します。訪問者数が多い Web サイトでは注意して使用する必要があります。興味があれば、Sina などの Web サイトのホームページまたはコラムホームページコードを参照してください。これらの Web サイトでは、外部ファイルを使用せずに、常に CSS または JS を HTML に直接記述しています。

<<: 無効と読み取り専用の機能と違い

>>: MySQL で重複行を見つけて削除する方法