CSSファイルの参照方法

CSS ファイルを参照する方法: 1. リンク タグ、構文 ""; を使用します。 「@import」ルール、構文「@import url(ファイル パス);」を使用します。

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

1. リンクタグ（リンクスタイル）を使う

cssコードを別ファイルに記述し、リンクタグで直接ファイルを紹介しますページ真ん中へ。ページでは LINK タグを複数回使用して、複数の外部 CSS ファイルを導入できます。これらの CSS コードの相互影響に注意してください。通常、後で導入された CSS ファイルは、以前に導入された CSS ファイルの同じ効果を上書きします。現在このCSS導入方法が最も主流であり、WebサイトごとにCSSコードを計画し、再利用やメンテナンスを容易にすることができますが、コードの集中度が高く、コード量が多くなりすぎて作業が容易になる場合があります。適切に維持されないと問題が発生する可能性があります。

<link rel="stylesheet" type="text/css" href="style.css">

2. @import (インポート) を使用する

@import を使用して CSS ファイルを導入するには 2 つの方法があります。1 つはページ、使用法は次のとおりです:

@import url(index2.css);

また、CSS ファイル内でも使用できます。使用法は次のとおりです:

@import "sub.css";

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

リンク (link) とインポート (@import) の違い

リンクは XHTML タグであり、CSS の読み込みに加えて、次のような他のトランザクションも定義できます。 RSS として; @import は CSS のカテゴリに属しており、CSS のみをロードできます;

link が CSS を参照する場合、ページのロードと同時にロードされます; @import はページが完全にロードされている必要がありますロードする前にロードされます。

link は XHTML タグであり、互換性の問題はありませんが、@import は CSS2.1 で提案されたものであり、以前のバージョンのブラウザではサポートされていません。

ink は、JavaScript を使用して DOM を制御してスタイルを変更することをサポートしていますが、@import はサポートしていません。

@import は他のスタイル シートを CSS ファイルに導入できますが、リンクはそれをサポートしていません。

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

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