ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSインポートとlink_Experience交換の違い

CSSインポートとlink_Experience交換の違い

WBOY
WBOYオリジナル
2016-05-16 12:04:331609ブラウズ

いくつかの Web サイトのほとんどのページが次のように書かれていることがわかりました。



また、多くの Web サイトではリンク



Google や Baidu 163 などの Web サイトは Web ページに直接記述されます。

もちろん、リンクとインポートを使用する利点はメンテナンスが簡単であることですが、ネットワーク速度が比較的遅い場合、読み込みの中断が発生し、ページ レイアウト エラーが発生します

効果は同じです

唯一の違いは、サービスオブジェクトが異なることです

@importはCSSを提供します

リンクは現在のページを提供します

一部のネチズンは、@importが最初に実行されると述べました。

外部参照 CSS における link と @import の違い

この 2 日間で、XHTML に CSS を読み込むいくつかの方法を書き終えました。その中で、外部参照 CSS は次のように分類されます。 2 つの方法: link と @import。

基本的に、これら 2 つの方法は CSS ファイルを読み込むために使用されますが、まだ微妙な違いがあります。

違い1:祖先の違い。 LinkはXHTMLタグに属しており、@importは完全にCSSが提供するメソッドです。
CSS のロードに加えて、link タグは RSS の定義、rel 接続属性の定義など、他の多くのことも行うことができます。@import は CSS をロードすることしかできません。

違い2: ロード順序の違い。ページが読み込まれるとき (つまり、ビューアで表示されるとき)、link によって参照される CSS は同時に読み込まれますが、@import によって参照される CSS は、ページが完全にダウンロードされるまで待ってから読み込まれます。そのため、@import が CSS をロードするページを閲覧すると、スタイルが表示されないことがあります (ちらつくだけです)。これは、ネットワーク速度が遅い場合には明らかです (Dream City で CSS をロードする方法は、@import を使用することです。私はダウンロードします)同時に Dream City Web ページを閲覧すると、上記の問題が発生します)。

違い3: 互換性の違い。 @importはCSS2.1で導入されたため古いブラウザではサポートされておらず、@importはIE5以上でしか認識されませんが、リンクタグではこの問題は発生しません。

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

相違点はこんな感じです(他に相違点があれば教えてください、追加します。) それ以外は同じです 上記の分析から、リンクタグを使用した方が良いことがわかります。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。