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:

<p class="navbar">Dies ist ein Beispiel zu Klassenselektoren.</p>

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 <b class="special">verschiedene Instanzen</b> eines Selektoren <i class="special">benutzt werden können</i>.

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,

<p class="applylarge applyred">Dies ist ein Beispiel zu mehreren Klassen.</p>

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:

<p id="footer">Dies ist ein Beispiel zu ID-Selektoren.</p>

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




Copyright © 2017   1keydata.com   Alle Rechte vorbehalten