HTML Klassen

HTML Klassen (engl.: HTML Classes, class-Attribut) ermöglichen die Gruppierung und Identifikation von Elementen für gezieltes Styling oder Verhalten. Eine Klasse kann mehreren Elementen zugewiesen werden, was es ermöglicht, diese Elemente über CSS und JavaScript zu formatieren oder zu manipulieren. Die Verwendung von Klassen sorgt für eine saubere Trennung zwischen Inhalt und Darstellung und ist ein zentraler Bestandteil moderner Webentwicklung.

1. Klassen in HTML

Das class-Attribut kann jedem HTML-Element hinzugefügt werden. Mehrere Elemente können dieselbe Klasse haben, und ein einzelnes Element kann mehrere Klassen besitzen. Klassen werden meist für die Gestaltung und Formatierung durch CSS verwendet, können aber auch in JavaScript nützlich sein, um auf eine Gruppe von Elementen zuzugreifen.

Beispiel: Eine Klasse verwenden

<p class="intro">Dies ist ein Absatz mit einer Klasse namens "intro".</p>

In diesem Beispiel hat der Absatz (<p>) die Klasse intro. Diese Klasse kann nun in CSS verwendet werden, um das Element zu stylen.

Beispiel: Mehrere Elemente mit derselben Klasse

<p class="intro">Erster Absatz mit der Klasse "intro".</p>
<p class="intro">Zweiter Absatz mit der Klasse "intro".</p>

Hier verwenden beide Absätze dieselbe Klasse intro. Das Styling, das auf diese Klasse angewendet wird, beeinflusst beide Absätze gleichermaßen.

2. Styling von Klassen mit CSS

In CSS wird eine Klasse mit einem Punkt (.) gefolgt vom Klassennamen angesprochen. Sie können dann Stilregeln für alle Elemente festlegen, die diese Klasse verwenden.

Beispiel: CSS-Klasse

.intro {
    color: blue;
    font-size: 18px;
}

Dieses CSS bewirkt, dass alle Elemente mit der Klasse intro blauen Text und eine Schriftgröße von 18px erhalten.

Beispiel: Verwendung mehrerer Klassen in HTML

Ein einzelnes HTML-Element kann mehrere Klassen haben, indem die Klassennamen im class-Attribut durch Leerzeichen getrennt werden.

<p class="intro highlight">Dies ist ein Absatz mit zwei Klassen.</p>

Beispiel: CSS für mehrere Klassen

.highlight {
    background-color: yellow;
}

Jetzt hat der Absatz sowohl die Eigenschaften der intro-Klasse (blauer Text und 18px Schriftgröße) als auch die der highlight-Klasse (gelber Hintergrund).

3. Mehrere Klassen in einem Element

Wenn ein HTML-Element mehrere Klassen hat, können Sie deren Stile kombinieren. Dies ist besonders nützlich, um spezifische Anpassungen vorzunehmen, ohne redundante CSS-Regeln zu erstellen.

Beispiel: HTML mit mehreren Klassen

<p class="intro bold-text">Text mit blauer Farbe und fetter Schrift.</p>

Beispiel: CSS für mehrere Klassen

.bold-text {
    font-weight: bold;
}

In diesem Beispiel erhält der Absatz die Eigenschaften von intro (blaue Schrift, 18px) und von bold-text (fett).

4. Globale und spezifische Stile

Durch die Kombination von Klassen und Elementtypen können Sie globale und spezifische Stile erstellen.

Beispiel: Spezifische Stile für Klassen

p.intro {
    color: green;
}

Dieser CSS-Regelsatz wendet die color: green; nur auf <p>-Elemente mit der Klasse intro an und überschreibt dabei die allgemeine Regel für .intro (wenn diese vorhanden ist).

5. Klassen und IDs im Vergleich

Während Klassen verwendet werden, um mehrere Elemente zu gruppieren, dient eine ID (id-Attribut) dazu, ein einzelnes Element eindeutig zu identifizieren. Im Gegensatz zu Klassen sollte eine ID nur einmal in einem Dokument vorkommen.

Beispiel: Klasse vs. ID

<p class="intro">Dies ist ein Absatz mit einer Klasse.</p>
<p id="unique">Dies ist ein Absatz mit einer eindeutigen ID.</p>

In CSS wird eine ID mit einem Hash (#) angesprochen, während Klassen mit einem Punkt (.) referenziert werden:

.intro {
    color: blue;
}

#unique {
    color: red;
}

6. Klassen mit JavaScript

Neben CSS können Sie auch in JavaScript auf Klassen zugreifen und deren Verhalten manipulieren. Beispielsweise können Sie die Klasse eines Elements hinzufügen oder entfernen.

Beispiel: Zugriff auf Klassen in JavaScript

<p class="intro">Ein Beispiel-Absatz.</p>
<button onclick="addClass()">Klasse hinzufügen</button>

<script>
function addClass() {
    document.querySelector('p').classList.add('highlight');
}
</script>

In diesem Beispiel fügt der Button-Klick die Klasse highlight dem Absatz hinzu, wodurch er den gelben Hintergrund erhält.

Häufig gestellte Fragen