Klassenelemente in CSS

In vorherigen Lektionen haben wir Seitenelemente anhand des Tag-Namens ausgewählt, um beispielsweise Stile für alle Absätze gleichzeitig zu definieren. Auf einer Seite können jedoch verschiedene Arten von Absätzen vorkommen, auf die unterschiedliche Stile angewendet werden müssen. Um dieses Problem zu lösen, können wir verschiedene Absätze verschiedenen CSS-Klassen zuordnen.

Um einen Tag einer Klasse zuzuordnen, müssen wir dem Tag das Attribut class hinzufügen und darin einen von Ihnen erdachten Klassennamen angeben, der aus Buchstaben, Zahlen, Unterstrichen und Bindestrichen besteht.

Schauen wir uns ein Beispiel an. Erstellen wir Absätze mit zwei Klassenarten - eee und zzz:

<p class="eee">
	paragraph with class eee
</p>
<p class="eee">
	paragraph with class eee
</p>
<p class="zzz">
	paragraph with class zzz
</p>
<p class="zzz">
	paragraph with class zzz
</p>

Greifen wir nun in CSS auf die Absätze mit den verschiedenen Klassen zu und weisen ihnen einige Stile zu. Färben wir beispielsweise die Absätze mit der Klasse zzz rot und die Absätze mit der Klasse eee grün.

Dazu müssen wir in der CSS-Datei auf unsere Klassen zugreifen. Der Zugriff hat die folgende Syntax: Zuerst kommt ein Punkt, dann der von uns erdachte Klassenname. Das bedeutet, für den Zugriff auf die Klasse eee müssen wir .eee schreiben, und für die Klasse zzz - .zzz.

Setzen wir das Beschriebene um. Fügen wir unserem HTML noch die CSS-Stile für unsere eingeführten Klassen hinzu:

.eee {
	color: green;
}
.zzz {
	color: red;
}

Wenn wir unseren Code ausführen, erhalten wir folgendes Ergebnis:

Gegeben ist der folgende Code:

<ul>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
</ul>

Färben Sie die Elemente mit der Klasse odd rot und die Elemente mit der Klasse eve grün.

Gegeben ist der folgende Code:

<h2 class="eee">Title</h2>
<p class="eee">
	paragraph
</p>
<p class="eee">
	paragraph
</p>
<p>
	paragraph without class
</p>

<ul class="eee">
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

Färben Sie alle Elemente mit der Klasse eee rot.

Erklären Sie, warum in der vorherigen Aufgabe die li-Tags rot gefärbt werden, obwohl die Klasse, die die Farbe definiert, dem ul-Tag zugewiesen wurde.