ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML でさまざまな CSS クラスを使用するにはどうすればよいでしょうか?

HTML でさまざまな CSS クラスを使用するにはどうすればよいでしょうか?

王林
王林転載
2023-09-15 15:41:121461ブラウズ

HTML でさまざまな CSS クラスを使用するにはどうすればよいでしょうか?

class 属性を使用して、HTML 要素のクラスを指定します。

複数の HTML 要素が同じクラスを共有できます。色やフォントの変更など、クラスのさまざまなプロパティを使用して、これらの HTML 要素のスタイル ルールを定義できます。このクラスの要素は、定義されたルールに従ってフォーマットされます。これをクラスセレクターと呼びます。

特定のクラスの要素を選択するには、ピリオド (.) 文字の後にクラス名を記述する必要があります。たとえば、「.black」クラスを見てみましょう。

リーリー

クラス属性が黒に設定されているドキュメント内の各要素について、コンテンツを黒でレンダリングします。たとえば、クラス属性が黒に設定されている

要素のみがコンテンツを黒で表示します。 リーリー

class 属性を使用して、スタイル シート内のクラス名を指します。 JavaScript はこれを使用して、特定のクラス名の要素にアクセスすることもできます。

例 1

以下は、class 属性の値が同じ 2 つの要素がある例です。すべての要素は、head タグのスタイル定義に基づいて同じようにスタイル設定されます。

リーリー

以下は、上記のサンプル プログラムの出力です。

例 2

の中国語訳は次のとおりです:

例 2

以下は、クラス属性の値が異なる 2 つの要素がある例です。どちらの要素も、head タグのスタイル定義に基づいてスタイル設定されます。

複数のクラスを定義するには、クラス名をスペースで区切ります。要素は、指定されたクラスに従ってスタイル設定されます。

リーリー

複数のクラスを定義するには、クラス名をスペースで区切るか、異なる値を指定します。要素は、指定されたクラスに従ってスタイル設定されます。

例 3

の中国語訳は次のとおりです:

例 3

次の例では、クラス属性の値が異なる 3 つの要素があります。 2 つの要素は head タグのスタイル定義に基づいて同様にスタイル設定され、他の要素は head タグのスタイル定義に基づいてスタイル設定されます。 リーリー

以下は、上記のサンプル プログラムの出力です。

例 4

の中国語訳は次のとおりです:

例 4

別の例には、

タグのスタイル設定が含まれます。次の方法で、すべての

要素を class="device" でスタイル設定します。 リーリー

例 5

タグのスタイル設定は、複数のクラス、つまりここでは機器とアクセサリを通じて実行できます -

ああああ

以上がHTML でさまざまな CSS クラスを使用するにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はtutorialspoint.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。