CSSリンクと@importの違い

高洛峰
リリース: 2017-02-09 16:49:15
オリジナル
1341 人が閲覧しました

ページで CSS を使用するには、主に 3 つの方法があります: 1. 定義されたスタイル属性値をインラインで追加します。 2. ページヘッダーでのインライン呼び出し。 3. 外部リンク呼び出し。

外部参照には、link と @import の 2 種類があります。

XML/HTML コード

<link href="stylesheet" href="CSS文件" type="text/css"/>
ログイン後にコピー

XML/HTML コード

<style type="text/css">
    @import url("CSS文件")
</style>
ログイン後にコピー

どちらも CSS を外部参照する方法ですが、次のような違いがあります。

違い 1: リンクは XHTML タグです。 CSS のロードに加えて、RSS などの他のトランザクションも定義できます。@import は CSS カテゴリに属し、CSS のみをロードできます。

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

違い 3: link は XHTML タグであるため、互換性の問題はありません。@import は CSS2.1 で提案されており、以前のバージョンのブラウザは対象外です。

違い 4: リンクは、JavaScript を使用して DOM を制御してスタイルを変更することをサポートしていますが、 @import は制限されません。

違い 5: リンク スタイルの重みが @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 .css) および @import url("style.css") が最良の選択であり、ほとんどのブラウザーと互換性があります。バイト最適化の観点からは、@import url(style.css) が最も推奨されます。

CSS リンクと @import の違いの詳細については、PHP 中国語 Web サイトの関連記事に注目してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!