html に CSS スタイルを追加する方法_HTML に CSS スタイルを追加する方法-よくある問題-php.cn

htmlCSS スタイルを追加する方法には、インライン スタイル、内部スタイル シート、外部スタイル シートなどがあります。詳細な導入: 1. インライン スタイルは HTML 要素内に直接記述され、style 属性を通じて定義されます。この方法は、単一要素のスタイル定義に適しています。HTML コードが混乱するため、大規模なプロジェクトで広く使用することはお勧めできません。 . メンテナンスが難しい; 2. 内部スタイルシートをHTML文書の「 」タグ内に配置し、「 」タグを使用して定義する、単一のHTMLのスタイル定義に適した方法ファイルなど

CSS スタイルを HTML に追加するには、インライン スタイル、内部スタイル シート、外部スタイル シートなど、いくつかの方法があります。以下では、各メソッドを詳細に説明し、対応するコード例を示します。

インライン スタイル:

インライン スタイルは HTML 要素内に直接記述され、style 属性を通じて定義されます。このメソッドは単一要素のスタイル定義に適していますが、HTML コードが乱雑になり保守が困難になる可能性があるため、大規模なプロジェクトで広く使用することはお勧めできません。

サンプル コード:

这是一段红色的文本。

ログイン後にコピー 内部スタイル シート:

内部スタイル シートは、HTML ドキュメントの タグ内に配置され、 タグ。この方法は、単一の HTML ファイルのスタイル定義に適していますが、複数の HTML ファイルで同じスタイルを使用する必要がある場合は、コードをコピーする必要があるため、コードの再利用やメンテナンスには役立ちません。

サンプル コード:

p { color: red; } 这是一段红色的文本。

ログイン後にコピー 外部スタイル シート:

外部スタイル シートは、HTML ファイル内で タグを通じて参照される独立した CSS ファイルです。これはスタイルとコンテンツを分離し、コードの保守性を向上させるため、最も推奨される方法です。同時に、複数の HTML ファイルで外部スタイル シートを参照してコードを再利用できます。

次の内容を含む、styles.css という名前の CSS ファイルがあるとします。

p { color: red; } ログイン後にコピー HTML ファイル内で CSS ファイルを参照するコードは次のとおりです。

这是一段红色的文本。

ログイン後にコピー 上記のコードでは、href 属性は CSS ファイルへのパスを指定します。 CSS ファイルと HTML ファイルが同じディレクトリにある場合は、ファイル名を直接使用できます。同じディレクトリにない場合は、相対パスまたは絶対パスを指定する必要があります。

上記の 3 つの方法に加えて、@import ステートメントを使用して CSS スタイルを参照することもできます。 @import ステートメントは HTML ドキュメント内のどこでも使用できますが、通常は タグ内に配置されます。 @import ステートメントを使用する場合は、インポートする CSS ファイルのパスを指定する必要があります。

サンプルコード:

@import url('styles.css'); 这是一段红色的文本。

ログイン後にコピー

CSSスタイルをHTMLに追加する方法