CSSをインポートする方法は何ですか?linkと@importの違いは何ですか?選択方法

CSSをインポートする方法は何ですか?linkと@importの違いは何ですか?選択方法
Taobao のウェブページはインポートを使用していますが、多くのウェブサイトはリンクを使用しています。もちろん、よりシンプルなページと大量のトラフィックを持つウェブサイトの中には、HTML コードに直接 CSS を記述しているものもあります。それらの違いは何ですか? CSS には import と link のどちらを使用する方が良いでしょうか?私はクラシックフォーラムと別のウェブサイトから大まかなアイデアを得ました。
Taobao のページのほとんどは次のように書かれています:

コードをコピー
コードは次のとおりです。

<スタイル タイプ="text/css" メディア="screen">
@import url("http://www.taobao.com/home/css/global/v2.0.css?t=20070518.css");
</スタイル>

多くのウェブサイトはリンクを使用しています:

コードをコピー
コードは次のとおりです。

<link rel="スタイルシート" rev="スタイルシート" href="default.css" type="text/css" media="all" />

Google、Baidu、163などのウェブサイトはすべてウェブページに直接書かれています。もちろん、リンクやインポートを使用する利点はメンテナンスが簡単であることです。しかし、ネットワーク速度が遅いと、読み込みが中断され、ページレイアウトエラーが発生します。
これらは同じ機能を持っていますが、唯一の違いは異なる目的を果たすことです
CSS の @import
リンクは現在のページを提供します。Blue Classic の一部のネットユーザーは、@import が最初に実行されると述べています。
+++++++++++++++++++++++++++++++++++++++++++++++++
外部参照 CSS における link と @import の違い<br />この 2 日間で、XHTML で CSS を読み込む方法をいくつか書き終えましたが、その中で外部参照 CSS は link と @import の 2 つの方法に分かれています。
基本的に、どちらの方法も CSS ファイルを読み込むためのものですが、微妙な違いがあります。
違い1: 祖先の違い
link は XHTML タグですが、@import は完全に CSS によって提供されるメソッドです。
CSS の読み込みに加えて、link タグは RSS の定義、rel 接続属性の定義など、他の多くのことも実行できますが、@import は CSS のみを読み込むことができます。
違い2: 読み込み順序の違い<br />ページが読み込まれるとき(つまり、閲覧者がページを閲覧するとき)、リンクで参照される CSS は同時に読み込まれますが、@import で参照される CSS はページ全体がダウンロードされるまで読み込まれません。そのため、@import を使用して CSS を読み込むページを閲覧すると、最初はスタイルが表示されない (ちらつく) ことがあります。これは、ネットワーク速度が遅い場合に非常に顕著になります。
違い3: 互換性の違い<br />@importはCSS2.1で提案されたため、古いブラウザではサポートされていません。@importはIE5以上でのみ認識されますが、linkタグではこの問題はありません。
違い4: DOMを使用してスタイルを制御する場合の違い<br />JavaScriptを使用してDOMを制御してスタイルを変更する場合、@importはDOMで制御できないため、linkタグのみを使用できます。
違い 5: @import を使用すると、他のスタイルシートを CSS にインポートできます。<br />たとえば、メイン スタイルシートを作成し、他のスタイルシートをメイン スタイルシートにインポートできます。
基本的にはこれらが違いです(他にも違いがあれば教えてください。追加します)。残りは同じです。上記の分析から、リンクタグを使用する方が良いでしょう。

<<:  Dockerはコンテナを通じてイメージを生成し、詳細にDockerCommitを送信します

>>:  HTML ul 順序なしテーブルのアプリケーションネスト

推薦する

Vue での this.$set の使用に関する詳細な説明

目次Vue での this.$set の使用使用なぜレスポンシブなのか?分析する要約するVue での...

backgroundImage を使用して画像カルーセルの切り替えを解決する詳細な説明

単一のDOMノードでカルーセルを実装するbackgroundImage を使用すると、複数の画像を追...

Vueはシンプルな計算機を実装する

この記事では、参考までに、Vue の具体的なコードで簡単な計算機を実装する方法を紹介します。具体的な...

MySQLの結合の基本原理についての簡単な説明

目次結合アルゴリズム駆動テーブルと非駆動テーブルの違い1. 単純なネストループ結合、単純なネスト、イ...

Saltstack に Zabbix サービスをデプロイする方法を説明します

目次SaltstackがZabbixサービスを導入httpd、mysql、phpをインストールするh...

Rabbitmq heartbea ハートビート検出メカニズムの原理の分析

序文RabbitMQ を使用する場合、一定期間クライアントと RabbitMQ サーバーの間でトラフ...

Navicat 8でMySQL用のデータベースを作成する方法

ウェブサイトを開発する場合、データを保存するためにデータベースを使用する必要があることがよくあります...

Swiper.jsプラグインを使用すると、カルーセル画像を非常に簡単に実装できます。

Swiper は、携帯電話やタブレットなどのモバイル端末向けに設計された、純粋な JavaScri...

CSSは、入力ボックスのフローティングテキスト効果を実現するために、placeholder-shown疑似クラスを使用します。

この記事では、:placeholder-shown 疑似クラスを使用して、純粋な CSS で浮動疑問...

nginx がドメイン名アクセス用に設定されている場合にドメイン名の後に 2 つのスラッシュ // が表示される問題の解決方法

最近、個人のウェブサイトを書き直しました。Alibaba Cloudで新しいサーバーを購入しました。...

sshとは何ですか?使い方は?どのような誤解があるのでしょうか?

目次序文SSHとは何かssh は何に使用されますか? sshの使い方ssh 再修正要約する序文ssh...

リストループスクロールを実現するための HTML+CSS+JavaScript サンプルコード

説明: 指定された時間内に前のノードのコンテンツを置き換えるタイマーを設定します。 1. キーコード...

Mysql5.7 のグループ連結関数を使用するときにデータが切り捨てられる問題に対する完璧な解決策

一昨日、本番環境でGROUP_CONCAT関数を使用して選択したデータが切り捨てられ、最大長が102...

Vue.jsはアイコンをクリックしてズームインし、

前回の記事では、Vue で画像の切り抜きや拡大・縮小、回転を実現する方法を紹介しました。今回は、アイ...

docker+devpi を使用してローカル pypi ソースをビルドする方法

以前、開発で頻繁に pip ダウンロードを使用する必要がありました。pip ソースを国産ソースに変更...