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 順序なしテーブルのアプリケーションネスト

推薦する

Dockerコンテナのデータボリュームの詳細な説明

何ですかまず、Docker の概念を見てみましょう。アプリケーションと実行環境をコンテナにパッケージ...

CSS3で実装されたグラデーションスライド効果

成果を達成する コードhtml <div class="css-slideshow&...

タオバオモールのホームページ上の大きな画像のデザイン構造に関する分析と意見(写真)

前回、Taobaoの詳細ページを分析した後(クリックして表示)、ショッピングモールの基本テンプレート...

MySQL データベース グループ クエリの group by ステートメントの詳細な説明

1: グループ化関数の記述順序 1 選択 ... 2 から ... 3 どこで ... 4 グループ...

auto.jsを使用して毎日の自動チェックイン機能を実現する

auto.js を使用して毎日のチェックインを自動化する感染症のせいで、毎日時間通りに家に帰らなけれ...

Linux スケジュールタスクの関連操作の概要

皆様の参考と操作を容易にするために、様々な主要ウェブサイトを検索し、関連するスケジュールされたタスク...

Access_Tokenの統合管理を実現するミニプログラム開発

目次TOKEN タイマーリフレッシュ2. access_tokenの内部設計2.1 access_t...

Vue+tsx のスロット使用の問題が置き換えられない

目次序文問題を見つける解決する追記序文最近、 UIコンポーネントを作成する予定で、 vue 2.xと...

Ubuntu mysqlログイン名とパスワードを表示および変更し、phpmyadminをインストールする

MySQLをインストールした後、ターミナルでmysql -u root -pと入力してEnterを押...

ハイパーリンクAタグを学ぶ

聞く: CSS を使用してハイパーリンクのスタイルを設定しましたが、ホバーしても機能しません。なぜこ...

HTMLページ間でパラメータを渡すフロントエンド方式の詳細な説明

プロジェクトでよくある状況として、案件リストなどのリストが存在することがあります。リスト内の項目をク...

CSS で左上の三角形を作成するいくつかの方法の詳細な説明

今日は、CSS を使用して左上の三角形を記述するいくつかの方法を紹介します。概略図(幅と高さを60p...

Linux のリンク解除機能とファイルの削除方法

1. リンク解除機能ハード リンクの場合、unlink はディレクトリ エントリを削除し、inode...

MySQL ストアドプロシージャとストアドファンクションの詳細な説明

1 ストアドプロシージャ1.1 ストアドプロシージャとは何かストアド プロシージャは、特定の機能を実...

ログインと登録を実現するSpringboot+VUE

この記事の例では、ログインと登録を実装するためのspringboot+VUEの具体的なコードを参考ま...