文法構造をリンク:
<リンクのhref = "URL" のrel = "スタイルシート" タイプ= "テキスト/ cssの">
@import構文構造:
ファイルに使用するCSSの@import urlには、スタイルシートを導入し、複数のスタイルシート、修正および拡張が容易なだけのスタイルシートのいずれかが必要ですページ、
HTMLでの1
<スタイルタイプ= "テキスト/ cssの">
@import URL
</スタイル>
CSSで2
@import URL
リンクと@importの違い:
1.異なる文法構造
1.1 <リンクのhref = "URL" のrel = "スタイルシート" タイプ= "テキスト/ cssの">
1.2 @importのURL
2.異なる性質
<link>タグが属し、使用するためのHTMLコードに配置することができ、及び@importのCSSスタイルとして見ることができる、CSSスタイルを導入することができる(<link>タグは、HTML、CSSと@importが設けられている属します)
3.ページのロード
ページのロードは、<リンク>が同時にロードされ、@importを引用される場合は、ページがリロード読み込みが完了するまで、CSSは待機します
4.互換性。
のみ上記IE5に認識することが@import、及び<link>タグは、HTMLで、互換性の問題
5.優先順位
か<リンク>又は@import、基準負荷に応じて優先順位、高優先順位をロードした後
6.制御
JSの使用は、変化パターンDOMの<link>タグを制御するために使用することができます
なぜCSSの@importを避けます
提案されているWebフロントエンドの最適化では、このように下側の負荷のCSS CSSと同等であるため、CSSの@importを使用することは推奨されませんので、@importは、ページの読み込みの遅延を増加します
使用@importファイルの参照が解析され、それにCSSファイルがダウンロードされていることだけで単語を参照しているため、遅延が増加する理由としては、ブラウザをダウンロードするには、別のCSSの必要性がある知っている、あなたは中になりたいでしょうし、その後、その後、一連の操作を構築するために、ツリーをレンダリングし解析します。したがって、CSS CSSの@importは長いので、空白のページの解析を遅らせる原因になります。<link>タグ方式を使用して、CSSの@importを避ける導入します