HTML WebページにCSSスタイルを記述する方法-フロントエンドQ&A-php.cn

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

PHPz

リリース： 2023-04-23 17:26:37

オリジナル

3354 人が閲覧しました

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

1. インラインスタイル

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

<p style="color: red;">这是一段红色的文字</p>

ログイン後にコピー

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

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

2. 内部スタイル

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

<head>
    <title>标题</title>
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>这是一段红色的文字</p>
</body>

ログイン後にコピー

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

3. 外部スタイルシート

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

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

<head>
    <title>标题</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>这是一段红色的文字</p>
</body>

ログイン後にコピー

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

p {
    color: red;
}

ログイン後にコピー

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

概要

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

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