CSS ファイルを参照する link メソッドと @import メソッドの違い

ユーザーは 要素によって参照されるスタイルを変更することを自由に選択でき、インポートされたスタイル シートは残りのスタイル シートと自動的に統合されます。

CSS を HTML ドキュメントと組み合わせる 4 つの方法: 1 要素で外部スタイルファイルにリンクします
2

要素内の「style」要素を使用して指定します
3 CSS の「@import」タグを使用してスタイルシートをインポートします
4 要素の「style」属性を使用してスタイルを定義します
例:

1 つ目は HTML ページに直接 CSS を記述する方法で、2 つ目と 3 つ目は外部参照スタイルを使用してファイルを個別に抽出します。

質問 1. リンクと @import の違いは何ですか?

まず定義を見てみましょう

link 要素
HTML と XHTML はどちらも、Web ページ作成者が HTML ドキュメントに関連する追加情報を追加できる構造を持っています。これらの追加リソースには、スタイル情報 (CSS)、ナビゲーション補助、他の形式の情報 (RSS)、連絡先情報などが含まれます。

@import
インポートする外部スタイルシートとターゲットデバイスタイプを指定します。
実際、link と @import の最も基本的な違いは、link が HTML のタグであるのに対し、@import は CSS のタグであることです。
link は、CSS の呼び出しに加えて、ページのリンクの宣言などの他の機能も持つことができます。属性、ディレクトリの宣言、RSS の待機、および @import は CSS のみを呼び出すことができます。 cssを外部から単独で参照する場合、上のボスが異なるだけで機能は基本的に同じです。 :)

質問 2. リンクとインポートのどちらが良いですか?

上記のように、上記のボスが異なるため、使用方法にいくつかの詳細な違いがあるため、一般的に誰が優れていて誰が劣っているとは言えません。

特定の状況を分析することしかできません。
1) スタイルの選択に JavaScript を使用したいです。
今回はリンクを使用する必要があります。リンクは HTML 要素であり、JavaScript を使用して dom 要素を制御し、最終的にスタイルを変更する効果を実現できます。
次のコードを見てください

link rel="stylesheet" href="http://www.php1 .cn /"> これは、ページ スタイルを変更する非常に古典的なコードです。リンクとインポートについて話しているので、ここでは参照 CSS 部分のみをリストします。

まずリンク内の各属性の意味を見てみましょう:

[1]rel: リンク オブジェクトの役割またはタイプを宣言するために使用されます。
たとえば、上記のコードでは、「スタイルシート」はデフォルトの CSS へのリンクを意味し、「代替スタイルシート」は代替 CSS へのリンクを意味します。
[2]href: これは言う必要はありません。 CSSのファイルパス。
[3]style: ファイルタイプ
[4]media: アプリケーションデバイス、「screen」はアプリケーションが画面上にあることを意味します。
[5]title: CSSの名前です。
このコードには合計 5 つの CSS があります。最初の CSS は基本スタイルで、他の 4 つは JavaScript を使用してデフォルトで表示されるスタイルのタイトルを制御します。

2) 印刷スタイルを適用したいです。

印刷スタイルは、名前が示すように、ページを印刷するときのスタイルです。

このスタイルは通常のブラウジングでは効果がなく、印刷時にのみ有効になります。
ページごとに印刷スタイルを個別に参照したい場合は、linkと@importの両方を使用できます。

リンクコード

@インポートコード

@import url(foo.css) print;

CSS @media には別の方法もあります:

@media print {

@import "print.css"

}
Use @media 最初のセット印刷するデバイスを指定し、@import を使用してリンクします

3) 複数のスタイルを参照したい; 効果を生み出すために 1 ページで複数のスタイルの組み合わせを参照したい場合は、link と @import の両方を使用することもできます。

リンクコード

T @インポートコード

& lt; スタイルタイプ = "text/css" & gt; @import url (../ css/base/my.typo.css);

ただし、個人的には@importを使って複数のファイルを参照した方がわかりやすいと感じています
また、複数のスタイルに対してリンクと@importの組み合わせもあります。
まずリンクを使用して CSS ファイルを参照します

次に、この CSS ファイルで参照します。

@import url(../css/base/my.layout.css);

@import url(../css/base/my.typo.css) :); CSS スタイルはコードとエネルギーの無駄なので、すべてのページが 1 つの CSS を参照し、その後 1 つの CSS が複数の CSS を参照する方が管理とメンテナンスに便利です。

CSSの読み込み linkと@importの違い: 実際、linkと@importでは表示効果に大きな違いがあり、基本的にリンクはページが表示される前に完全に追加されますが、@importは読み込まれます。ファイルを取得した後、ファイルを追加します。ネットワーク速度が非常に良好または非常に速い場合は、最初に CSS 定義がなく、その後 CSS 定義が読み込まれます。 @import がページをロードすると、最初の瞬間がちらつきますが (スタイル シートのないページ)、その後通常に戻ります (スタイルをロードした後のページ)。

メソッドの点では同じですが、ブラウザの認識に若干の違いがあります。リンクは CSS をサポートするブラウザでサポートされますが、@import は 5.0 の 1 行バージョンでのみ有効であり、それも使用できます。ブラウザのフィルタリングのためのハックの使用は、一部の古いバージョンのブラウザと互換性があります。したがって、より強力なリンクユニバーサルタイプを使用する方が良いですが、上位バージョンのブラウザ、つまり現在のブラウザでは、これは実際にはあまり意味のない区別です。

@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 Import url("style.css") が最良の選択であり、ほとんどのブラウザと互換性があります。バイト最適化の観点からは、@import url(style.css) が最も推奨される記述方法と言えます。

CSSコード形式により、スタイルシートファイルのサイズを小さくすることができます

CSSスタイルシートを記述する際、後からスタイル定義コードを読みやすくするために、各コードを1行で記述します。しかし、CSS コードは主に名前と値を対応させる方法で記述されるため、この方法は良くないことがわかりました。したがって、同じ行に書いても読み取りには特に影響しません。逆に、多くの改行文字やスペーサが削減されるため、スタイル シート ファイルのサイズは小さくなります。 試してみたところ、ファイルサイズが約12%削減できることがわかりました。スタイル シート ファイルが比較的大きい場合、またはファイル数が多い場合、クライアントのダウンロード量が大幅に削減され、Web ページを開く速度が向上します。

スタイル名のコロンと次の値の間にはスペースを入れないでください。2 つのスタイルをスペースで区切ってください。

具体的な形式は次のとおりです:
プログラムコード:
div {margin:20px;background-color:#F00;}