CSSファイルの読み込み方法

CSS ファイルを読み込む方法: 1. "" ステートメントを使用して読み込みます。2. を使用します。 「@ import url("css ファイルのパス");」ステートメントが読み込まれます。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

方法 1: リンク タグを使用した読み込み

タグは、ドキュメントと外部リソース間の関係を定義します。

Web ページの タグ ペアの タグを使用して、外部 CSS ファイルを呼び出します。

文法形式:

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

各属性の説明:

• href 属性は、外部スタイル シート ファイルのアドレスを設定します。これは相対アドレスにすることができます。アドレスまたは絶対アドレスを指定できます。

• rel 属性は、関連するドキュメントを定義します。ここでは、関連するドキュメントがスタイル シートであることを示します。

• type 属性はインポートされるファイルのタイプを定義します。style 要素と同様に、text/css は CSS テキスト ファイルを示します。

注:

このメソッドは、Web ページ ファイルの本体をロードする前に CSS ファイルをロードするため、表示される Web ページにはスタイル効果が適用されます。インポート方法とは異なり、スタイルが設定されていない Web ページが最初に表示され、次にスタイルが設定された Web ページが表示されます。

方法 2: @import による読み込み

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

@import コマンドを使用して、外部スタイル シート情報をページにインポートします。この情報は タグ内に存在します。

<style type="text/css">
@import url("css文件路径");
</style>

注:

@import を使用して CSS を導入すると、外部ファイルから CSS コードを簡単に導入できるため、メンテナンスや計画が容易になります。ただし、追加の CSS ファイルを導入するたびにサーバーへの接続要求が追加されるため、アクセス数が多い場合は保守性とパフォーマンスのトレードオフが必要になります。

@import メソッドを使用してロードすると、HTML ページがロードされた後でのみ CSS ファイルがロードされます。つまり、CSS ファイルがロードされる前に、ページは裸で実行されます。ただし、Web サイトにアクセスするときの応答速度は速くなります。

(学習ビデオ共有: css ビデオ チュートリアル)

以上がCSSファイルの読み込み方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。