ホームページ  >  記事  >  ウェブフロントエンド  >  CSSのインポートとリンクの違いは何ですか

CSSのインポートとリンクの違いは何ですか

云罗郡主
云罗郡主転載
2018-11-23 16:08:522997ブラウズ

この記事の内容は CSS におけるインポートとリンクの違いについてです。必要な方は参考にしていただければ幸いです。

CSSのインポートとリンクの違いは何ですか

CSS におけるインポートとリンクの違い

タオバオのページでこれが書かれているのを見たとき、インポートはインポートを使用しますが、多くの Web サイトではインポートが使用されていますか? もちろん、比較的シンプルなページやトラフィックの多い Web サイトもありますか?それらの違いは何ですか? CSSはインポートとリンクどちらを使用した方が良いでしょうか?古典的なフォーラムと別の Web サイトから大まかなアイデアを得ました。

淘宝網の Web ページのほとんどがこのように書かれていることがわかりました

サンプル コード

<style type="text/css" media="screen">
@import url("http://www.divcss8.com/home/css/global/v2.0.css?t=20070518.css");
</style>

そして、多くの Web サイトでは次のように書かれています。このリンク

サンプル コード

<link rel="stylesheet" rev="stylesheet" href="default.css" type="text/css" media="all" />

Google、Baidu 163、その他の Web サイトは Web ページに直接記述されます

もちろん、リンクとインポートを使用する利点は次のとおりです。ただし、ネットワーク速度が比較的遅い場合は、読み込みが中断され、ページ レイアウト エラーが発生します。

これらの効果は同じです。

唯一の違いは、サービス オブジェクトは異なります

@import は CSS

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

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

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

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

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

違い 1: 祖先の違い。 LinkはXHTMLタグに属しており、@importは完全にCSSが提供するメソッドです。

リンク タグは、CSS のロードに加えて、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 タグのみを使用できます。

大まかに違いは次のとおりです (他に違いがある場合はお知らせください。追加します)。上記の分析から、リンク タグを使用する方がよいでしょう。

上記は、CSS におけるインポートとリンクの違いについての完全な紹介です。CSS3 チュートリアル について詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。


以上がCSSのインポートとリンクの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はdivcss8.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。