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 © 2021   1keydata.com   Alle Rechte vorbehalten

老湿机69福利区无码_老子影院午夜伦无码_开心亚洲五月丁香五月