HTML WebページにCSSスタイルを記述する方法

HTML と CSS は、Web 開発の 2 つの最も重要なコンポーネントのうちの 1 つです。 HTML は Web ページの構造とコンテンツの定義を担当し、CSS は Web ページのスタイルとプレゼンテーションの定義を担当します。 CSS を記述するには、インライン スタイル、内部スタイル、外部スタイル シートの 3 つの方法があります。

1. インライン スタイル

インライン スタイルは、HTML 要素に直接適用される CSS スタイルです。インライン スタイルを使用する場合、CSS スタイルは HTML 要素の style 属性に記述されます。例:

<p>这是一段红色的文字</p>

style 属性の color:red は、テキストの色を赤に設定することを意味します。

インライン スタイルには特別な CSS ファイルは必要なく、個々の HTML 要素でスタイルをすぐに追加および変更できます。ただし、スタイルとテキストが混在しているため、HTML ファイルが読みにくく、管理しにくくなる可能性があります。さらに、インライン スタイルのセットを変更する必要がある場合は、各要素を手動で変更する必要があり、非常に面倒です。

2. 内部スタイル

内部スタイルは、style タグを使用して CSS スタイルを HTML ドキュメントに埋め込みます。以下に示すように、HTML ドキュメントの先頭領域にスタイル タグを埋め込み、タグ内に CSS スタイルを記述します。

    
    


    <p>这是一段红色的文字</p>

上記のコードは、テキストの色を赤に設定します。内部スタイルは HTML ドキュメントを CSS スタイルから分離し、スタイルのメンテナンスをより便利にします。ただし、同じ HTML ドキュメントに多数のスタイルを追加する必要がある場合、内部スタイルを使用するとファイル サイズが大きくなり、ファイルのダウンロード時間が長くなります。

3. 外部スタイル シート

外部スタイル シートは、link タグを使用して HTML ドキュメントと外部 CSS スタイル シートをリンクします。外部スタイル シートには通常、すべてのスタイルが含まれており、複数の HTML ドキュメントで再利用できます。以下に示すように:

外部スタイル シートを HTML ファイルに導入します:

    
    


    <p>这是一段红色的文字</p>

style.css ファイルで CSS スタイルを定義します:

p {
    color: red;
}

外部スタイル シートの使用HTML と CSS コードを完全に分離できるため、スタイルの維持と変更が容易になります。さらに、複数の HTML ファイルで再利用できるため、ファイル サイズが削減され、ページの読み込み速度が向上します。したがって、CSS を記述するには外部スタイル シートを使用することをお勧めします。

概要

上記は、HTML で CSS を記述する 3 つの方法 (インライン スタイル、内部スタイル、外部スタイル シート) です。インライン スタイルと内部スタイル メソッドは、スタイルを迅速に作成および変更する必要がある状況に適しており、外部スタイル シートは、複数の HTML ファイルに同じスタイルが含まれている状況に適しています。状況に応じて自分に合ったCSSの書き方を選択してWebページのスタイルデザインを実装できます。

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