CSS Grundsyntax

CSS Syntax

CSS-Regeln bestehen aus zwei Hauptteilen: dem Selektor und einer oder mehreren Deklarationen.

selector {declaration1; declaration2; ... declarationN }

Der Selektor ist in der Regel das HTML-Element, das Sie ändern möchten.

Jede Deklaration besteht aus einem Attribut und einem Wert.

Das Attribut (property) ist das Styl-attribut (style attribute), das Sie einstellen möchten. Jedes Attribut hat einen Wert. Attribut und Wert werden durch ein Komma getrennt.

selector {property: value}

Diese Zeile von Code definiert die Textfarbe des h1-Elements als rot und setzt die Zeichengröße auf 14 Pixel.

In diesem Beispiel ist h1 der Selektor, color und font-size sind Attribute, red und 14px sind Werte.

h1 {color:red; font-size:14px;}

Die folgende Abbildung zeigt die Struktur dieses Abschnitts:

CSS Syntax

Hinweis:Verwenden Sie eckige Klammern, um die Deklarationen einzuklammern.

Verschiedene Schreibweisen und Einheiten der Werte

Besonders neben dem englischen Wort "red" können wir auch die hexadezimale Farbnummer #ff0000 verwenden:

p { color: #ff0000; }

Um Bytes zu sparen, können wir die abgekürzte Form von CSS verwenden:

p { color: #f00; }

Wir können RGB-Werte auf zwei Arten verwenden:

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

Bitte beachten Sie, dass Sie bei der Verwendung von RGB-Prozentzahlen auch dann den Prozentsymbolen schreiben müssen, wenn der Wert 0 beträgt. In anderen Fällen müssen Sie das jedoch nicht tun. Zum Beispiel, wenn die Größe 0 Pixel beträgt, müssen Sie nach 0 nicht die px-Einheit verwenden, weil 0 bereits 0 ist, egal welche Einheit Sie verwenden.

Denken Sie daran, Anführungszeichen zu verwenden

Hinweis:Wenn der Wert aus mehreren Wörtern besteht, müssen Sie den Wert in Anführungszeichen setzen:

p {font-family: "sans serif";}

Mehrfachdeklarationen:

Hinweis:Wenn Sie mehr als eine Deklaration definieren möchten, müssen Sie jede Deklaration durch einen Semikolon trennen. Der folgende Beispiel zeigt, wie man einen zentral ausgerichteten Absatz mit rotem Text definiert. Die letzte Regel ist, dass Sie kein Semikolon hinzufügen müssen, weil das Semikolon im Englischen ein Trennzeichen und nicht ein Endzeichen ist. Allerdings fügen die meisten erfahrenen Designer am Ende jeder Deklaration ein Semikolon hinzu, was den Vorteil hat, dass Sie bei der Erweiterung oder Reduzierung der existingen Regeln das Risiko von Fehlern so gering wie möglich halten. So wie das:

p {text-align:center}; color:red;}

Du solltest nur eine Eigenschaft pro Zeile beschreiben, um die Lesbarkeit der Stildefinition zu verbessern, wie zum Beispiel:

p {
  text-align: center;
  color: black;
  font-family: arial;
}

Leerzeichen und Groß-/Kleinschreibung

Die meisten Style-Sheets enthalten nicht nur eine Regel, und die meisten Regeln enthalten nicht nur eine Deklaration. Die Verwendung mehrerer Deklarationen und Leerzeichen macht Style-Sheets einfacher zu bearbeiten:

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }

Ob ein Leerzeichen enthalten ist, beeinflusst die Funktion von CSS im Browser nicht. Gleichzeitig ist CSS, anders als XHTML, nicht auf Groß- und Kleinschreibung angewiesen. Es gibt jedoch eine Ausnahme: Wenn es darum geht, mit HTML-Dokumenten zusammenzuarbeiten, sind die Namen von class und id auf Groß- und Kleinschreibung angewiesen.