CSSの参照方法-フロントエンドQ&A-php.cn

Webページ制作において、Webページのスタイルやレイアウトを制御するための言語であるCSS(Cascading Style Sheets)は、Webページの美化や互換性を実現し、フロントエンドの開発作業を大幅に容易にします。この記事ではCSSを参照する方法を紹介します。

1. 内部スタイル シート

内部スタイル シートは、CSS スタイル シートを HTML ドキュメントに埋め込みます。以下に示すように、内部スタイル シートを使用して、 タグ内に タグを作成し、その中に CSS コードを記述する必要があります:

h1 { color: red; font-size: 36px; } ログイン後にコピー このようにして、 h1要素が設定されます。赤色でフォントサイズは36ピクセルです。この方法は現在のページにのみ使用でき、同じスタイルを共有する複数のページには適していないことに注意してください。

2. 外部スタイル シート

外部スタイル シートは、CSS スタイル シートを別のファイルに保存し、HTML ドキュメント内でそのファイルを参照します。外部スタイル シートを使用するには、 タグに タグを追加し、次のようにその href 属性に CSS ファイルへのパスを指定する必要があります:

ログイン後にコピー スタイル。 css ファイルに、すべてのページで使用する必要がある CSS スタイルを記述することができます。例:

h1 { color: red; font-size: 36px; } ログイン後にコピー このようにして、styles.css を参照するすべてのページの h1 要素のテキストが赤色に設定されます。フォントサイズは36ピクセル。

3. インライン スタイル シート

インライン スタイル シートは、要素の属性として CSS スタイルを定義します。インライン スタイル シートを使用して、次のように HTML タグ内で style 属性を直接使用します。

Hello World! ログイン後にコピー この方法では、h1 要素のテキストの色は赤に設定され、フォント サイズは 36 ピクセルに設定されます。インライン スタイル シートは保守が面倒であり、複数の要素に同じ CSS スタイルを使用するのに役立たないため、インライン スタイル シートの過度の使用は避けるべきであることに注意してください。

要約:

上記の 3 つの方法では、内部スタイル シートは単一ページで使用されるスタイルに適しており、外部スタイル シートは複数のページで共有されるスタイルに適しており、インライン スタイル シートは単一のページで使用されるスタイルに適しています。個性に合わせたスタイルシートをカスタマイズ。これらの方法を上手に使用すると、フロントエンド開発作業をより効率的かつ標準化できます。