Das class-Attribut

Das Attribut class definiert eine oder mehrere Klassen für ein Element (mit Element ist ein Tag gemeint).

Dies geschieht, um anschließend über CSS auf eine Gruppe von Elementen, denen die gleiche Klasse zugewiesen wurde, zuzugreifen und bestimmte Eigenschaften auf sie anzuwenden (zum Beispiel die Textfarbe, die Schriftgröße zu ändern und so weiter).

Es gibt auch das id-Attribut, das ähnlich wie das Attribut class das Auswählen von Elementen auf einer HTML-Seite ermöglicht.

Der Unterschied zwischen dem Attribut class und dem id-Attribut besteht darin, dass class eine Gruppe von Elementen auswählt (selbst wenn es nur einem Element zugewiesen ist - kann es später auch einem anderen gegeben werden), während id ein eindeutiges Element auswählt (es sollte kein weiteres Element mit einer solchen id auf der Seite der Website geben, da es sonst zu einem Konflikt kommt).

Wie kann man entscheiden, was man einem Element geben soll - eine Klasse oder eine id? Eine Klasse wird den Elementen gegeben, die sich wiederholen auf den Seiten der Website (um nicht mehrmals denselben CSS-Code zu schreiben). Selbst wenn Sie momentan nur dieses eine Element haben, aber das Gefühl, dass ähnliche Elemente in Zukunft auftauchen könnten - geben Sie diesem Element eine Klasse. Wenn Sie sich sicher sind, dass ein solches Element einzigartig ist - dann geben Sie ihm eine id. Obwohl es heutzutage einen Trend gibt, allen Elementen eine Klasse zu geben und id für JavaScript zu reservieren, ist dieser nicht allgemein anerkannt.

Einem Element können mehrere Klassen zugewiesen werden. In diesem Fall sollten diese durch Leerzeichen getrennt aufgeführt werden.

Klassennamen sollten mit englischen Buchstaben, Ziffern, ohne Leerzeichen geschrieben werden (Leerzeichen trennen Klassen voneinander, stattdessen kann man den Unterstrich oder Bindestrich verwenden). Klassen sollten nicht mit einer Ziffer beginnen (in HTML5 ist es bereits möglich, aber es funktioniert nicht in alten Browsern).

Klassennamen sollten in englischer Sprache vergeben werden (und nicht auf Russisch, einfach mit englischen Buchstaben!). Die Namen sollten sinnvoll sein, das Wesen der Klasse widerspiegeln.

Beispiel

Lassen Sie uns allen Absätzen mit der Klasse test eine rote Textfarbe zuweisen:

<p class="test">Absatz mit der Klasse test.</p>
<p>Kontrollabsatz ohne Klasse.</p>

.test {
	color: red;
}

Beispiel . Mehrere Klassen für ein Element

Und hier weisen wir dem ersten Absatz mehrere Klassen zu - test1 und test2 (wir schreiben sie durch Leerzeichen getrennt). Die Klasse test1 weist eine rote Textfarbe zu, und die Klasse test2 weist eine Schriftgröße von 20px zu. Dem zweiten Absatz wurde nur die Klasse test1 gegeben (dieser Absatz wird rot), und dem dritten Absatz - die Klasse test2 (dieser Absatz wird eine Schriftgröße von 20px haben). Der erste Absatz, der zwei Klassen hat, wird gleichzeitig sowohl eine rote Farbe als auch eine Schriftgröße von 20px haben:

<p class="test1 test2">Absatz mit zwei Klassen test1 und test2.</p>
<p class="test1">Absatz mit der Klasse test1.</p>
<p class="test2">Absatz mit der Klasse test2.</p>
<p>Kontrollabsatz ohne Klassen.</p>

.test1 {
	color: red;
}
.test2 {
	font-size: 20px;
}

Siehe auch

das Attribut id,
das eindeutige Identifikatoren für Elemente festlegt