外部参照 CSS_html/css_WEB-ITnose の link と @import の違い

違い 1: link は XHTML タグに属しますが、@import は完全に CSS によって提供されるメソッドです。

CSS のロードに加えて、link タグは RSS の定義、rel 接続属性の定義など、他の多くのことも行うことができます。@import は CSS をロードすることしかできません。

違い 2: ロード順序の違い。ページが読み込まれるとき (つまり、ビューアで表示されるとき)、link によって参照される CSS は同時に読み込まれますが、@import によって参照される CSS は、ページが完全にダウンロードされるまで待ってから読み込まれます。

違い3: 互換性の違い。 @import は CSS2.1 で提案されたものであるため、古いブラウザではサポートされていません。@import は IE5 以降でのみ認識されますが、リンクタグにはこの問題はありません。

違い 4: スタイルを制御するために dom を使用する場合の違い。 JavaScript を使用して dom を制御してスタイルを変更する場合、@import は dom によって制御できないため、link タグのみを使用できます。

標準的な Web ページ制作で CSS ファイルをロードするときは、画面、印刷、またはすべてなど、ロードするメディアも選択する必要があります。

違い 5: @import は、他のスタイル シートを CSS に再度導入できます。たとえば、次のように、メイン スタイル シートを作成し、他のスタイル シートをメイン スタイル シートに導入できます。 ? ????-

@import “sub.css”;

@import “sub1.css”;

sub.css
???????-

p {color:red;}

sub1。 css
?????????-

.myclass {color:blue}

これは、変更や拡張に便利です。

ヒント: これを行うと、以前は 1 つのファイルでしたが、現在は 2 つ以上のファイルが存在するため、Web サイトへの負荷が増大します。依然として多数のビューが存在するため、注意して使用してください。興味のある方は、Sina などの Web サイトのホームページやコラムのホームページ コードを観察してください。外部ファイルを使用せずに、CSS または JS を HTML 内に直接記述します。