CSS/Tutorials/Einstieg/Syntax

Aus SELFHTML-Wiki
< CSS‎ | Tutorials‎ | Einstieg(Weitergeleitet von CSS/Syntax)
Wechseln zu: Navigation, Suche

Syntax[Bearbeiten]

Regelsatz und Deklaration[Bearbeiten]

In CSS sind Eigenschaften innerhalb von Regelsätzen (auch Regeln) organisiert. Ein Regelsatz besteht aus:

  • Einem Selektor oder einer Gruppe von Selektoren, gefolgt von
  • einem durch geschweifte Klammern begrenzten Bereich, in dem
  • eine oder mehrere Deklarationen stehen, in denen Eigenschaften ein Wert zugewiesen wird.

Eine Deklaration benötigt zwischen Eigenschaft und Wert einen Doppelpunkt und schließt mit einem Semikolon ab.

Beachten Sie: Die letzte Deklaration eines Regelsatzes benötigt genau genommen kein Semikolon. Wenn Sie den Regelsatz später aber erweitern, wird die folgende Deklaration ignoriert.
Beispiel: Regelsätze ansehen …
h1 { 
  color: red; 
}
h1, h2 { 
  background-color: #ccc;
  border-radius: .5em; 
}
Der erste Regelsatz besteht aus einem Selektor h1, dem als Deklaration die Eigenschaft color mit dem (Farb)-Wert rot zugewiesen wird.
Der zweite Regelsatz besteht aus einer Selektor-Liste mit zwei voneinander unabhängigen Selektoren h1 und h2, über die den Überschriften mit background-color eine Hintergrundfarbe und mit border-radius abgerundete Ecken zugewiesen werden. Hier werden mehrere Werte für Breite, Stil und Farbe durch Leerstellen voneinander getrennt.

Selektoren können HTML-Elemente, aber auch ganz spezielle Kombinationen sein. Sie werden im Abschnitt CSS/Selektoren ausführlich behandelt.

„shorthand“-Eigenschaften[Bearbeiten]

Werden einer Eigenschaft mehrere Werte zugewiesen, handelt es sich üblicherweise um eine so genannte „shorthand“-Eigenschaft. Dabei handelt es sich um Eigenschaften, die mehrere andere Eigenschaften zusammenfassen.

Beispiel: Deklarationen für „shorthand“-Eigenschaften ansehen …
h1 { 
  color: red; 
  font: 300% cursive;
}

h1, h2 { 
  background-color: #ccc;
  border-radius: .5em; 
  border: thin solid red;
}
Die Deklaration für die zusammenfassende Eigenschaft font hat einen Wert für die Schriftgröße und durch ein Leerzeichen getrennt einen für den Schrift-Stil (die Einzeleigenschaft font-style).
Der zweite Regelsatz enthält eine Deklaration für die zusammenfassende Eigenschaft border, die den Selektoren eine Randlinie zuweist. Hier werden mehrere Werte für Breite, Stil und Farbe durch Leerstellen voneinander getrennt.

Durch die Angabe einer „shorthand“-Eigenschaft wie z.B.

.btn {
  background: red;
}

setzen Sie aber nicht nur die Hintergrundfarbe, sondern implizit auch weitere Eigenschaften:

.btn {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat-x: initial;
  background-repeat-y: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: red;
}

Besonders bei Farbverläufen können solche Festlegungen dann zu unerwünschten Verhalten führen.[1]

Empfehlung: Setzen Sie CSS-Festlegungen so sparsam wie möglich.
Legen Sie im Zweifelsfall lieber Einzeleigenschaften anstelle der „shorthand“-Eigenschaften fest.

Mehrfaches Vorkommen einer Eigenschaft[Bearbeiten]

Der Browser arbeitet die verschiedenen Deklarationen des Stylesheets nacheinander ab. Wenn eine Eigenschaft mehrfach definiert wird, so gilt nur der zuletzt akzeptierte gültige Wert. Werden in einer Regel Eigenschaften aufgeführt, die das verarbeitende Programm nicht kennt, so wird diese Eigenschaft ignoriert. Das gilt auch für unbekannte oder ungültige Werte.

Beispiel
h1 { 
  color: red; 
  color: verygreen; 
  color: gren; 
}
In diesem Beispiel wird für ein Element die Schriftfarbe rot definiert. Die nachfolgenden Wertzuweisungen werden ignoriert, denn der Farbname „verygreen“ ist keine in CSS gültige Farbangabe und auch der Wert „gren“ (statt „green“) wird nicht akzeptiert.

Dieses System machte man sich bei herstellerspezifischen Eigenschaften zunutze, bei denen vor der eigentlichen Deklaration eine Deklaration mit einem vendor-prefix wie -webkit- notiert wurde. Wenn eine Eigenschaft in den Standard übernommen wurde, konnten die Browser dann die „normale“ Deklaration verwenden.

Empfehlung: Die in vielen Code-Beispielen im Internet noch verwendeten herstellerspezifischen Eigenschaften sind heute oft nicht mehr nötig.
Beispiel: mehrfache Angaben als Fallback für ältere Browser
body { 
  background: skyblue; 
  background: linear-gradient(white, skyblue); 
}
Dieses Beispiel enthält zwei Angaben für den Hintergrund. Zuerst wird in der zusammenfassenden Eigenschaft background der Wert für eine flächige Hintergrundfarbe festgelegt. Diese Deklaration wird durch die Festlegung eines Farbverlaufs überschrieben. Ältere Browser wie der IE9 (der mittlerweile aber auch fast ausgestorben ist), ignorieren die ihnen unbekannte Eigenschaft.

Kommentare[Bearbeiten]

Um die Übersicht zu behalten oder bestimmte Regelsätze zu erläutern, ist es möglich, innerhalb von Stylesheets Kommentare zu verfassen, die vom Browser bei der Anzeige des Dokuments ignoriert werden. Ein Kommentar beginnt mit den Zeichen /* und endet mit dem ersten Auftreten der Zeichen */. Das bedeutet, dass Kommentare nicht ineinander verschachtelt werden können.

Beispiel
/* Dies ist ein Kommentar. Er besitzt keine Auswirkungen. */ /* Verschachtelte /* Kommentare sind */ nicht möglich */
Kommentare dürfen sich über mehrere Zeilen erstrecken. Jedoch ist es nicht möglich, Kommentare zu verschachteln.
Beachten Sie: Die aus vielen Programmiersprachen bekannten einzeiligen Kommentare gibt es in CSS nicht.

typische Fehlerquellen[Bearbeiten]

Wenn es zu Problemen in der Darstellung kommt, sind die Ursache häufig Flüchtigkeitsfehler in der Syntax oder logische Fehler.

Gleichheitszeichen bei Wertzuweisungen[Bearbeiten]

Ein beliebter Fehler ist beispielsweise, bei der Wertzuweisung an eine CSS-Eigenschaft anstelle des Doppelpunktes ein Gleichheitszeichen zu notieren.

Beispiel: Wertzuweisung mit Gleichheitszeichen ansehen …
h1 { color=red;} h2 { color:red;}
h2 wird rot dargestellt, wegen des Gleichheitszeichens wird der Wert für h1 ignoriert und h1 schwarz dargestellt.

vergessene Strichpunkte ( ; )[Bearbeiten]

Auch vergessene Strichpunkte ( ; ) führen zu Fehlinterpretationen:

Beispiel: Wertzuweisung nicht geschlossen ansehen …
h1 { color:red background-color:yellow;} h2 { color:red; background-color:yellow;}
Da die 1. Wertzuweisung für h1 nicht geschlossen worden ist, ignoriert der Browser beide Wertzuweisungen.

Regelsatz mit zwei geschweiften Klammern geschlossen[Bearbeiten]

Beispiel: Regelblock doppelt geschlossen ansehen …
h1 {
 color: red; 
 background-color: yellow;  

}}

h2 {

  color: red; 
background-color: yellow;
}
Die überzählige schließende Klammer wird schon dem Selektor für den nächsten Regelblock zugeordnet. Nun ist } h2 aber kein gültiger Selektor, also wird der gesamte Block ignoriert.

Da die Browser bei Syntaxfehlern in CSS keine Fehlermeldungen erzeugen, bleiben solche Fehler häufig unentdeckt und machen sich nur in Form von Fehlinterpretationen bemerkbar. Überprüfen Sie deshalb stets genau die Syntax Ihrer CSS-Formatdefinitionen.

Empfehlung: Sie können Ihre CSS-Formatdefinitionen auch durch einen Validator auf korrekte Syntax überprüfen lassen.

Groß- und Kleinschreibung bei Selektoren[Bearbeiten]

CSS berücksichtigt die Groß- und Kleinschreibung eigentlich nicht, so dass Sie die Elementnamen wie p für Textabsätze auch als P notieren könnten. Eine Ausnahme gilt allerdings bei Klassennamen und IDs in den Selektoren, weshalb die jeweiligen Attributwerte im HTML-Markup passend notiert sein müssen:

Beispiel: Groß- und Kleinschreibung bei Selektoren ansehen …
DIV { border: 3px solid blue; border-radius: 1em; padding: 0 1em; } #navigation { background: lightgreen; } .wichtig { color: red; font-weight: bold; }
<body> <div id="Navigation"> <p class="wichtig">Zur Zeit ist die Navigation kaputt.</p> </div> </body>
Der Selektor #navigation passt nicht zum id-Attributwert "Navigation", daher formatiert der Browser das Element <div id="Navigation"> nicht mit dem hellgrünen Hintergrund, DIV als Selektor wird dagegen angewendet.
Empfehlung: Verwenden Sie für …
  • HTML-Markup wie Tags und Attribute
  • CSS-Selektoren
  • und auch referenzierten Ordner- und Mediennamen
… immer eine konsequente Kleinschreibung. So beugen Sie potentiellen Fehlern vor.

Leerzeichen[Bearbeiten]

Beispiel: Leerzeichen können semantische Bedeutung haben ansehen …
h1 p {
 color: red;

} h1, p {

 background: #ccc;
 border: 1px solid;
}
Überschriften und Absätze sollen rot gefärbt werden.
Allerdings wird nur der Absatz innerhalb von h1 rot gefärbt. Der zweite Regelsatz fasst alle h1- und p-Elemente zusammen und gibt ihnen einen grauen Hintergrund und ein roten Rand.
Beachten Sie: Leerzeichen (oder allgemein Whitespace-Zeichen) innerhalb eines Selektors haben semantische Bedeutung, sie entsprechen dem Kombinator Nachfahrenselektor.

Auch innerhalb von Wertzuweisungen können Leerzeichen zu ungültigen Werten führen:

Beispiel: Leerzeichen führen zu ungültigen Werten ansehen …
/* fehlerhafter Code */

.medaille { color: # 000; background-color: rgb (255, 204, 0); font-size: 50 px; margin: 1em auto; padding: 1em; width: 1em; height: 1em; text-align: center; border: 1px solid; border-radius: 50%;

}
Entferne 3 Leerzeichen im CSS und verdiene dir die Goldmedaille!
(In diesem Beispiel wird ein Element nicht angezeigt. Korrigiere das CSS!)

→ Auflösung


Quellen[Bearbeiten]

  1. csswizardry.com: CSS Shorthand Syntax Considered an Anti-Pattern