Syntax einer CSS-Stildefinition
Ein CSS-Stil besteht aus einem Selektor und einem Deklarationsteil. Als Selektor könnte man z.B. einen HTML-Tag angeben. Die im Deklarationsteil angegebenen Eigenschaften und Werte würden dann für den angegebenen HTML-Tag gelten. Der Deklarationsteil wird mit geschweiften Klammern {...} umschlossen. Jede Anweisung im Deklarationsteil wird mit einem Semikolon abgeschlossen. Nachfolgend ist die CSS-Syntax anhand eines CSS-Stils für den P-Tag abgebildet.
Im Deklarationsteil weist man den Eigenschaften die gewünschten Werte zu. Eine Eigenschaft kann z.B. die Schriftfarbe, -größe, Hintergrundfarbe, Breite, Höhe etc. sein. Als Wert kann man viele Angaben in Betracht ziehen, z.B. die Angabe der Schriftgröße in Pixel, Punkt oder Prozent, die Farbangabe anhand des Farbcodes, die Breite in Pixel oder Prozent etc. Nach dem Schlüsselwort für die Eigenschaft kommt ein Doppelpunkt. Danach kann man einen bzw. mehrere Werte eingeben, sofern das für die Eigenschaft zulässig ist. Auf der Beispiel-Abbildung wird der Eigenschaft Schriftgröße (font-size) der Wert 14px zugewiesen.
Im Deklarationsteil kann man einem Selektor natürlich die Werte mehrerer Eigenschaften angeben. Weitere Eigenschaften und Werte werden nacheinander innerhalb der geschweiften Klammer geschrieben und jeweils mit einem Semikolon abgeschlossen. Man könnte z.B. den Absätzen (P-Tag) neben der Schriftgröße 14px auch die Schriftfarbe Blau zuweisen. Ein Beispielcode.
p { font-size: 14px; color: blue; }Die Leerzeichen dienen nur der Übersichtlichkeit. Man könnte auch auf die Leerzeichen verzichten. Ein Beispiel.
p{font-size:14px;color:blue;}Ebenso müssen die Einträge nicht in einer Zeile sein. Leerzeilen und -zeichen sowie Tabstopps zwischen den Bestandteilen wie Selektor, geschweifte Klammern, Eigenschaft, Doppelpunkt, Wert und Semikolon werden vom Browser ignoriert. Hauptsache ist, dass man diese in der richtigen Reihenfolge eingibt. Der folgende Code wäre durchaus gültig, wenn auch nicht ansehnlich.
p
{
font-size
:
14px
;
color :
blue ;
}Der Übersichtlichkeit halber sollte man auf solch eine Schreibweise jedoch verzichten. Außerdem dürfen zusammengehörige Selektoren, Schlüsselwörter und Werte nicht getrennt werden. Der folgende Code wäre ungültig.
p { font-
size:
14 px;
}Das Schlüsselwort für die Schriftgröße font-size gehört zusammengeschrieben und darf nicht getrennt werden. Die Maßeinheit px gehört zu der Zahl 14 und darf ebenfalls nicht davon getrennt werden.
Mehrere Eigenschaften und Werte müssen nicht alle in einem Deklarationsteil untergebracht werden. Für einen Selektor ist auch die Angabe mehrerer Definitionen möglich. Ein Beispiel.
p { font-size: 14px; }
p { color: blue; }Durch die Kaskadierung kommt es durchaus vor, dass einem Selektor eine Eigenschaft mit unterschiedlichen Werten zugewiesen wird. In dem Fall gilt zuletzt angegebene Wert. Beim folgenden Beispiel würden die Absätze mit der Schriftgröße 14px dargestellt werden, da dieser Wert zuletzt zugewiesen wurde.
p { font-size: 16px; }
p { font-size: 14px; }
CSS Kommentare
Einzeilige oder mehrzeilige Kommentare werden in CSS innerhalb der Paare /* und */ eingefügt. Ein Beispiel.
p { font-size: 14px;
/* Einzeiliger Kommentar */
/* Mehrzeiliger
Kommentar */
}Ungültige Eigenschaften und Werte
Wenn man fehlerhafte Angaben zu den Eigenschaften oder Werten macht, dann gibt es gemäß den Spezifikationen Regeln, wie die Browser in solchen Situationen den Code interpretieren sollen. Häufige Fehler sind folgende.
- Das Schlüsselwort für die Eigenschaft existiert nicht (z.B. big-font-height: ...;).
- Der Wert, der einer Eigenschaft zugewiesen wird, ist ungültig (z.B. font-size: 15kg;)
Mischt man gültigen mit fehlerhaftem Code, werden die fehlerhaften Bestandteile ignoriert. Ein Beispielcode.
p {
font-family: Arial;
big-font-weight: 14px;
font-size: 15kg;
line-height: 16px;
}Das erste und vierte Eigenschaft/Wert-Paar ist gültig. Das zweite und dritte nicht. Der Code würde wie folgt interpretiert werden.
p {
font-family: Arial;
line-height: 16px;
}Fehlendes Semikolon
Wird ein Eigenschaft/Wert-Paar nicht mit einem Semikolon abgeschlossen, wird es mit dem nächsten Semikolon abgeschlossen, das sich innerhalb der geschweiften Klammer befindet. Das kann zur Folge haben, dass der Eintrag und die nächsten Einträge ungültig werden. Ein Beispiel.
p {
color: green;
font-family: Arial
color: red;
}In diesem Code wurde das Eigenschaft/Wert-Paar font-family: Arial nicht mit einem Semikolon abgeschlossen. Das nächste Semikolon kommt beim Eintrag color: red; vor. Somit interpretiert der Browser diese Zeilen wie folgt.
p {
color: green;
font-family: Arial color: red;
}Da das zweite Eigenschaft/Wert-Paar ungültig ist, wird es vom Browser ignoriert und übrig bleibt der folgende Code.
p {
color: green;
}Fehlendes Semikolon am Ende der Deklaration
Da der Browser bei einem fehlenden Semikolon nur die Einträge bis zum nächsten Semikolon dazurechnet, die sich innerhalb der geschweiften Klammer befinden, werden Eigenschaft/Wert-Paare nicht fehlerhaft interpretiert, die im Deklarationsteil (innerhalb der geschweiften Klammer) zuletzt angegeben wurden. Ein Beispielcode, bei dem die Angaben wie angegeben interpretiert werden würden, obwohl bei den letzten Einträgen das Semikolon fehlt.
p {
font-family: Arial;
color: red
}
p {
font-weight: bold
}Bei diesem Beispiel würde der Code wie folgt interpretiert werden.
p {
font-family: Arial;
color: red;
}
p {
font-weight: bold;
}Somit ist es theoretisch möglich, das Semikolon beim letzten Eigenschaft/Wert-Paar innerhalb des Deklarationsteils entfallen zu lassen. Trotzdem sollte man der Vollständigkeit halber immer das Semikolon angeben.
Fehlerhafter Selektor
Auch Selektoren können fehlerhaft sein. In dem Fall werden alle Einträge im Deklarationsteil ebenfalls ungültig. Ein Beispielcode, bei dem der Selektor @nichtexistent angegeben wurde, der jedoch nicht existiert.
p {
font-family: Arial;
}
@nichtexistent {
font-size: 14px;
color: green;
}In dem Fall wird der ungültige Selektor und die komplette Deklaration ignoriert. Übrig bliebe der folgende Teil.
p {
font-family: Arial;
}Fehlende geschweifte Klammer
Fehlt bei einem Deklarationsteil die schließende, geschweifte Klammer, wird die komplette Definition und die folgenden Definitionen bis zur nächsten geschweiften (schließenden) Klammer ungültig. Ein Beispielcode.
p {
font-family: Arial;
color: red;
}
p {
font-weight: bold;
p {
font-size: 14px;
}
p {
text-decoration: none;
}Bei der zweiten Definition fehlt die schließende, geschweifte Klammer. Das sorgt für einen Einlesefehler bei der nächsten Definition und beide werden ungültig. Der Code würde wie folgt interpretiert werden.
p {
font-family: Arial;
color: red;
}
p {
text-decoration: none;
}Fehlt eine öffnende Klammer, verhält es sich ähnlich. Die betroffene und die nächsten Definitionen werden ungültig, inklusive der Definition, die als nächstes eine öffnende, geschweifte Klammer enthält. Ein Beispielcode.
p {
font-family: Arial;
color: red;
}
p
font-weight: bold;
}
p {
font-size: 14px;
}
p {
text-decoration: none;
}Bei diesem Beispiel fehlt bei der zweiten Definition die öffnende, geschweifte Klammer. Das sorgt für einen Einlesefehler bei der nächsten Definition und beide werden ungültig. Der Code würde wie folgt interpretiert werden.
p {
font-family: Arial;
color: red;
}
p {
text-decoration: none;
}Damit die geschweiften Klammern nicht vergessen werden, empfiehlt es sich, diese direkt nach der Eingabe des Selektors einzugeben und erst danach die Angabe der Eigenschaft/Wert-Paare innerhalb der Klammern vorzunehmen.