CSSを外部からインポートする方法

CSS を外部から導入する方法: 1. リンクを使用して外部 CSS ファイルを呼び出し、 タグでドキュメントと外部リソースの関係を定義します; 2. @import を使用して外部 CSS ファイルを参照します。

#この記事の動作環境: Windows7 システム、css3 バージョン、Dell G3 コンピューター

外部 CSS を導入するにはどうすればよいですか?

方法 1: リンクを使用して外部 CSS ファイルを呼び出す

Web ページの タグ ペアで < を使用します。 link> タグを使用して外部スタイルシートファイルを導入し、HTML ルールを使用して外部 CSS を導入します。

タグは、ドキュメントと外部リソース間の関係を定義します。 タグの最も一般的な使用法は、スタイル シートをリンクすることです。

文法:

<link rel="stylesheet" href="css文件路径" type="text/css" />

外部 CSS スタイルにリンクする場合のリンク タグのコンテンツ構造の説明:

href: は外部リソースのアドレスです。ここでは、 css

rel: 現在のドキュメントとリンクされたドキュメント間の関係を定義します。これは外部 CSS スタイル シート、つまり stylesheet

type: リンクされたドキュメントの MIME クラスを指定します。ここでの値は text/css

注:

このメソッドは、Web ページ ファイルの本体をロードする前に CSS ファイルをロードします。そのため、表示される Web ページにはスタイル効果が適用されます。インポートされたメソッドのように、最初にスタイルなしで表示されることはありません。Web ページは、スタイル付きの Web ページを表示します。

方法 2: @import を使用して外部 CSS ファイルを参照する

CSS @import ルールは、他のスタイル シートからスタイル ルールをインポートするために使用されます。これらのルールは他のすべてのタイプのルールよりも前に置く必要があり、条件付きグループのルールでは @import を使用できません。

@インポート ルールの構文

@import url("文件路径");

説明:

このメソッドは、Web ページ全体が読み込まれた後に CSS ファイルを読み込むため、問題が発生します。ページ 比較的大きいページの場合は、しばらくスタイルのないページが表示されますが、一瞬表示された後、Web ページのスタイルが表示されます。これは輸入品特有の欠陥です。

外部 CSS スタイルを呼び出す 2 つの方法の違い:

@import は CSS によって提供される構文規則であり、スタイル シートをインポートする機能のみを持ちます。link は CSS によって提供されるタグです。 HTML では、CSS ファイルを読み込むだけでなく、RSS、rel 接続属性などを定義することもできます。

ページが読み込まれると、link タグで導入された CSS も同時に読み込まれますが、@import で導入された CSS はページの読み込み後に読み込まれます。

@import は CSS2.1 でのみ使用できる構文であるため、IE5 でのみ認識できます。リンク タグは HTML 要素であり、互換性の問題はありません。

JS を通じて DOM を操作し、リンク タグを挿入してスタイルを変更できます。DOM メソッドはドキュメントに基づいているため、@import を使用してスタイルを挿入することはできません。

link によって導入されるスタイルの重みは、@import によって導入されるスタイルよりも大きくなります。

推奨学習: 「

css ビデオ チュートリアル 」

以上がCSSを外部からインポートする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。