So verwenden Sie mehrere Klassen in einem Element in CSS

So Verwenden Sie Mehrere Klassen In Einem Element In Css



Um die Wiederholung von Code zu vermeiden, verwenden wir mehrere Klassen in HTML und CSS. Mit CSS können wir auch beide Klassen zusammen definieren und formatieren und mehrere Klassen in einem Element verwenden, indem wir ihnen unterschiedliche Klassen-IDs zuweisen. Dieser Ansatz kann verfolgt werden, indem die durch Leerzeichen getrennte Syntax verwendet wird, um mehrere Klassen zu einem HTML-Element hinzuzufügen.

In diesem Artikel erfahren Sie, wie Sie einem Element mehrere Klassen hinzufügen.







Wie verwende ich mehrere Klassen in CSS?

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



Sie müssen die folgende Syntax befolgen, um mehrere Klassen in einem Element zu verwenden:



< h1 Klasse = 'Klasse_1 Klasse_2 ​​Klasse_3' > übergeben... h >





In einem einzelnen HTML-Element können Sie mehr als eine Klasse einschließen, indem Sie sie durch ein Leerzeichen trennen. Für Ihre Bequemlichkeit ist hier ein Beispiel.

Beispiel: Verwenden mehrerer Klassen in CSS



Im folgenden Beispiel erstellen wir:

  • Eine Überschrift mit dem

    -Tag und dem Klassennamen „ Überschrift “.

  • Als Nächstes erstellen wir eine weitere Überschrift und ordnen sie zwei verschiedenen Klassen zu: „ Überschrift ' und ' Linie “. Diese Klassen-IDs werden durch ein Leerzeichen getrennt:
< h1 Klasse = 'Überschrift' >
HTML
h1 >
< h1 Klasse = 'Kopfzeile' >
Mehrere Klassen in Ein Element
h1 >

Gehen wir nun zur CSS-Datei und wenden einige der unten aufgeführten CSS-Eigenschaften an:

  • Legen Sie die Hintergrundfarbe der Überschrift mit der Funktion rgb() als „ (69, 51, 151) “.
  • Legen Sie den Schriftstil fest “ kursiv “ für die Überschrift.

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



.Überschrift {
Hintergrundfarbe: rgb ( 69 , 51 , 151 ) ;
Schriftstil: kursiv
}

Für die „ Linie ” Klasse haben wir:

  • Legen Sie die Farbe der Überschrift mit der Funktion rgb() als „ (255, 0, 0) “.
  • Wenden Sie die Text-Dekorationslinie als „ unterstreichen “.

Die zweite Überschrift verwendet die Stile beider Klassen: „ Überschrift ' und ' Linie ' Klasse:

.Linie {
Farbe: rgb ( 255 , 0 , 0 ) ;
Textdekorationszeile: unterstrichen;
}

Überprüfen Sie nach der Implementierung das Ergebnis:

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

Fazit

Um mehrere Klassen für ein einzelnes Element zu verwenden, verwenden Sie verschiedene Klassen-IDs, die durch Leerzeichen getrennt sind. Damit können wir verschiedene CSS-Eigenschaften gleichzeitig anwenden. Es ermöglicht uns, die Klasse dort wiederzuverwenden, wo ähnliche Elemente vorhanden sind. In diesem Artikel wurde erklärt, wie Sie mehrere Klassen in einem einzelnen Element verwenden und es zusammen mit einem Beispiel formatieren.