Mehrere Klassen in HTML

1. Zuweisen mehrerer Klassen zu einem Container in HTML
2. Mehrere Klassen einem Container in HTML zuweisen, um effizientes CSS zu schreiben

In diesem Artikel wird erläutert, wie Sie mehrere Klassen in HTML erstellen. In diesem Artikel werden die Vorteile der Verwendung mehrerer Klassen in HTML erläutert.

Zuweisen mehrerer Klassen zu einem Container in HTML

In HTML haben wir oft gesehen, wie einem Container eine Klasse zugewiesen wurde. Wir können in den HTML-Elementen mit dem Attribut class eine Klasse zuweisen und dann den Wert schreiben. Wir können eine Klasse in Block-Level- und Inline-Elementen erstellen. Wir können Klassen für die verschiedenen HTML-Tags wie <img>, <p>, <h1> und viele mehr erstellen. Im Allgemeinen können wir einen Container erstellen und ihm eine Klasse zuweisen und den Container mit CSS stylen. Mit dem . können wir die Containerklasse auswählen. CSS-Selektor. Sehen wir uns ein Beispiel dafür an.

<div class ="box">
    <p> Hello World </p>
</div>

.box{
    border: 2px solid black;
    height:200px;
    width:200px;
}

Im obigen Beispiel haben wir ein div-Element mit einer Klasse box erstellt. Wir haben einige Inhalte im div. In CSS haben wir die Klasse box ausgewählt und einige Stile darauf angewendet. Wir haben eine Box mit einer gewissen Höhe und Breite erstellt. Es hat einen schwarzen Rand.

Wir können einem Container in HTML auch zwei Klassen zuweisen. Dazu sollten wir die beiden Namen der Klassen nacheinander durch Leerzeichen getrennt schreiben. Dann können wir die Klassen, die denselben Container enthalten, einzeln stylen.

Erstellen Sie beispielsweise ein div wie im obigen Beispiel gezeigt. Schreiben Sie die beiden Klassen box und wrapper getrennt durch Leerzeichen für das div. Wählen Sie in CSS zuerst die Klasse box aus und schreiben Sie die Eigenschaft border. Geben Sie den Wert als 2px solid black für die Eigenschaft border an. Geben Sie dann die Höhe und Breite von 200px an. Wählen Sie als nächstes die Klasse wrapper aus und geben Sie der Eigenschaft margin den Wert 20px an.

Im folgenden Beispiel haben wir dem Container mit zwei Klassen einen Rand von 20px hinzugefügt.

Beispielcode:

<div class ="box wrapper">
    <p> Hello World </p>
</div>

.box{
    border: 2px solid black;
    height:200px;
    width:200px;
}

.wrapper{
    margin:20px;
}

Mehrere Klassen einem Container in HTML zuweisen, um effizientes CSS zu schreiben

Wir haben gelernt, wie wir mehrere Klassen in einem Container verwenden können. Jetzt müssen wir den Nutzen dieses Ansatzes verstehen. Wir können mehrere Klassen in einem Container verwenden, wenn einige Klassen identische Attribute haben. Wir können die gemeinsamen Klassen einmal stylen und die einzelnen Klassen separat stylen. Somit können wir das CSS effizient schreiben.

Erstellen Sie beispielsweise drei div-Elemente in HTML. Schreiben Sie für jedes der Elemente box als ersten Klassennamen. Schreiben Sie dann die Klassennamen redBox für das erste div, greenBox für das zweite und blueBox für das dritte div. Wählen Sie als nächstes in CSS die Klasse box aus und geben Sie die Höhe und Breite von 200px an. Stellen Sie den Rand von 20px ein. Wählen Sie nun den einzelnen Klassennamen aus und geben Sie die entsprechende Hintergrundfarbe an. Wählen Sie die Klasse redBox und setzen Sie die Eigenschaft background-color auf red. Wiederholen Sie das gleiche für die restlichen Klassen mit den jeweiligen Farben als Hintergrundfarbe.

Im folgenden Beispiel haben wir die gemeinsamen Attribute dieser drei Boxen identifiziert und eine gemeinsame Klasse box erstellt. Aus diesem Grund müssen wir die sich wiederholenden Stile nicht für jede der Boxen schreiben. Außerdem haben wir den Containern die einzelnen Klassen zugeordnet, wodurch wir die Boxen mit einzigartigen Farben stylen können. Auf diese Weise können wir mehrere Klassen verwenden, um effiziente CSS-Codes zu schreiben.

Beispielcode:

<div class ="box redBox"></div>
<div class ="box greenBox"></div>
<div class ="box blueBox"></div>

.box{
    height:200px;
    width:200px;
    margin:20px;
}

.redBox{
    background-color:red;
}

.greenBox{
    background-color:green;
}

.blueBox{
    background-color:blue;
}