Klassen und IDs in CSS

CSS Tutorial > Klassen und IDs

Wie bereits auf der Seite zu CSS-Syntax erwähnt, werden sowohl Klassen- als auch ID-Selektoren vom Benutzer selbst erstellt.

Klassen

Eine Klasse wird durch einen Punkt (.) vor dem Namen des Selektoren bestimmt. Die Syntax zur Deklaration eines Klassenselektoren ist:

.[Klassenname] {
Eigenschaft:Wert;
...
}

Ein Beispiel:

.navbar {
color:#0000FF;
}

Um diesen Style in HTML zu benutzen, schreiben wir den folgenden Code:

Dies ist ein Beispiel zu Klassenselektoren.

Der obenstehende HTML-Code erzeugt dann dies:

Wir können weiterhin einen Klassenselektor in verschiedenen Instanzen benutzen. Dies kann mit folgendem Syntax erreicht werden:

[Typ-Selektor].[Klassenname] {
Eigenschaft:Wert;
...
}

Wenn wir zum Beispiel das folgende CSS-Statement haben:

b.special {
color:#0000FF;
}

i.special {
color:#FF0000;
}

würde der folgende HTML-Code,

Dies zeigt wie verschiedene Instanzen eines Selektoren benutzt werden können.

so aussehen:

Dies zeigt wie verschiedene Instanzen eines Selektoren benutzt werden können.

Mehrfache Klassen

Es ist möglich, mehrere Klassen zur gleichen Zeit anzuwenden. Wenn wir zum Beispiel das folgende CSS-Statement haben:

.applylarge {
font-size:20px;
}

.applyred {
color:#FF0000;
}

würde der folgende HTML-Code,

Dies ist ein Beispiel zu mehreren Klassen.

so aussehen:

Dies ist ein Beispiel zu mehreren Klassen.

IDs

Eine ID wird durch eine Rautenzeichen (#) vor dem Namen des Selektoren bestimmt. Die Syntax zur Deklaration eines ID-Selektoren ist:

#[ID-Name] {
Eigenschaft:Wert;
...
}

Ein Beispiel:

#footer {
color:#FF00FF;
}

Um diesen Style in HTML zu benutzen, schreiben wir den folgenden Code:

Dies ist ein Beispiel zu ID-Selektoren.

Der obenstehende HTML-Code erzeugt dann dies:

Unterschiede zwischen Klassen und IDs

Der Unterschied ist folgender: ein ID-Selektor kann nur einmal innerhalb eines Dokuments aufgerufen werden, ein Klassenselektor mehrere Male. Ein weiterer Unterschied ist: eine ID kann durch Javascripts getElementByID-Funktion aufgerufen werden.

Es gibt keine allgemein akzeptierte Faustregel, für wann man ID und wann Klassen benutzen sollte. Mein Vorschlag wäre folgender: Da Klassen eine größere Flexibilität erlauben, benutzen Sie diese so oft wie möglich, mit der einen Ausnahme, wenn Sie Javascripts getElementByID-Funktion verwenden möchten, in dem Fall benötigen Sie IDs.

Klassen- und ID-Namen werden je nach Groß/Kleinschreibung unterschieden. Zum Beispiel sind .klasseeins und .KlasseEins unterschiedliche Klassen.

Folgende Seite: CSS Div and CSS Span