Um die Wiederholung von Code zu vermeiden, verwenden wir mehrere Klassen in HTML und CSS. Mit CSS können wir beide Klassen auch zusammen definieren und stylen und mehrere Klassen in einem Element verwenden, indem wir ihnen verschiedene Klassen -IDs zuweisen. Auf diesem Ansatz kann die platzgetrennte Syntax verwendet werden, um mehreren Klassen zu einem HTML-Element hinzuzufügen.

In diesem Artikel lernen wir, wie Sie einem Element mehrere Klassen hinzufügen können.

So verwenden Sie mehrere Klassen in CSS?

Um zwei oder mehr Klassen in einem Element zu verwenden, wird jede Klassen -ID durch einen Raum getrennt.

Sie müssen der folgenden Syntax folgen, um mehrere Klassen in einem Element zu verwenden:

Übergabe…

In einem einzelnen HTML -Element können Sie mehr als eine Klasse einbeziehen, indem Sie sie mit einem Raum trennen. Für Ihre Bequemlichkeit ist hier ein Beispiel.

Beispiel: Verwenden Sie mehrere Klassen in CSS

Im folgenden Beispiel werden wir erstellen:

• Eine Überschrift mit dem

  Tag und zuweisen Sie den Klassennamen “Überschrift”.

• Als nächstes werden wir eine weitere Überschrift erstellen und sie zwei verschiedenen Klassen zuweisen: “Überschrift" Und "Linie”. Diese Klassen -IDs sind durch einen Raum getrennt:

Html

Mehrere Klassen in einem Element

Wechseln wir nun zur CSS -Datei und wenden Sie einige CSS -Eigenschaften an, die unten aufgeführt sind:

• Setzen Sie die Hintergrundfarbe mit der Funktion rgb () als “auf die Überschrift ein(69, 51, 151)”.
• Setzen Sie den Schriftstil "kursiv”Für die Überschrift.

In der HTML -Klasse verwendet die erste Überschrift den Klassennamen “Überschrift”. Der in der angegebene Klasse angegebene Stil wird also auf der ersten Überschrift implementiert:

.Überschrift
Hintergrundfarbe: RGB (69, 51, 151);
Schriftstil: kursiv

Für die "LinieKlasse, wir haben:

• Stellen Sie die Farbe der Überschrift mit der Funktion rgb () als "(255, 0, 0)”.
• Wenden Sie die Textabline als “anunterstreichen”.

Die zweite Überschrift verwendet die Stile beider Klassen: “Überschrift" Und "Linie" Klasse:

.Linie
Farbe: RGB (255, 0, 0);
Textdekorationslinie: Unterstreichung;

Überprüfen Sie nach der Implementierung das Ergebnis:

Aus der Ausgabe können Sie feststellen, dass die zweite Überschrift beide CSS -Klassen verwendet.

Abschluss

Verwenden Sie, um mehrere Klassen für ein einzelnes Element zu verwenden, verschiedene Klassen -IDs, die durch weiße Räume getrennt sind. Mit diesem Fall können wir verschiedene CSS -Eigenschaften gleichzeitig anwenden. Es ermöglicht uns, die Klasse wiederzuverwenden, in der ähnliche Elemente existieren. In diesem Artikel wurde erläutert, wie mehrere Klassen in einem einzelnen Element verwendet werden und es zusammen mit einem Beispiel stylen.