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

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

CSS を HTML ドキュメントと組み合わせる 4 つの方法: 1 < を使用します。 ;link> 要素で外部スタイルファイルにリンクします
2 要素内の「style」要素を使用して指定します
3 CSS の「@import」タグを使用してスタイルシートをインポートします
4 < body> 要素の「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の両方を使用できます。

リンクコード

@インポートコード

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

@media print {

@import "print.css"

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

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

リンクコード

<リンク rel="stylesheet" href="http://www.php1.cn/"> T @インポートコード

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

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

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