CSS - Grundlagen - Syntax
1. Aufbau von CSS-Definitionen
Seit dem Erfolg von C, C++ und Java kommt heutzutage offenbar nichts mehr, was auch nur ansatzweise mit irgendeiner
Computersprache zu tun hat, ohne geschweifte Klammern und Semikolon aus. Wer ist bloß auf diesen Schwachsinn gekommen, ich
bekomme jedes Mal einen Krampf in der rechten Hand, wenn ich AltGr
und 7
eintippe. Leider wurde
diese Syntax auch bei CSS angewendet, wahrscheinlich deshalb, damit sich die Java-Programmierer nicht umstellen müssen.
Eine Definition baut sich also folgendermaßen auf:
Selektor
{
Eigenschaft: Wert;
}
Der Selektor bezieht sich auf ein wie auch immer geartetes HTML-Element, die Eigenschaft zum Beispiel auf Größen, Farben oder Rahmen und der Wert definiert letztendlich das Aussehen. Alternativ ist auch folgende Schreibweise möglich, die ich aber für sehr unübersichtlich halte, besonders bei der Zuweisung mehrerer Eigenschaften. Auch wenn ich sie hier aus Platzgründen des Öfteren nutze.
Selektor { Eigenschaft: Wert; }
Als dritte Möglichkeit gibt es noch die folgende, die sich an einem gängigen Stil aus den schon erwähnten Semikolonsprachen orientiert.
Selektor {
Eigenschaft: Wert;
}
2. Mehrfach-Selektoren
Es gibt auch noch die Möglichkeit, mehreren Selektoren dieselben Eigenschaften zuzuweisen. Dabei werden die einzelnen Selektoren durch ein Komma getrennt.
Selektor1, Selektor2, usw.
{
Eigenschaft: Wert;
}
3. Nachfolge-Selektoren
Hierbei kann man sich die Verschachtelung von HTML-Elementen zu Nutze machen, um Bedingungen für die CSS-Anweisungen zu definieren. Dabei werden die Selektoren entsprechend der Anordnung und "Tiefe" der HTML-Tags hintereinander geschrieben, allerdings nicht wie bei den Mehrfach-Selektoren durch ein Komma getrennt.
Selektor1 Selektor2
{
Eigenschaft: Wert;
}
Damit legen wir fest, dass die CSS-Anweisung von Selektor2 nur dann gültig ist, wenn sich dieser innerhalb von Selektor1 befindet. Die näheren Erläuterungen dazu findet ihr beim Thema Kaskadierung.
4. Universal-Selektor
Hierbei wird anstatt einer Bezeichnung ein sogenanntes Wildcard-Zeichen benutzt, das für alle Selektoren steht. Genauso
wie zu seligen DOS-Zeiten handelt es sich hier um das *
-Zeichen.
*
{
Eigenschaft: Wert;
}
5. Weitere Möglichkeiten
Man kann obige Selektorarten natürlich auch miteinander kombinieren. Außerdem gibt es da noch die so genannten Kontext-Selektoren, mit denen man noch viel mehr Möglichkeiten hat. Da das aber ein klein wenig kompliziert ist, gehe ich auch erst sehr viel später (hier geblieben!) unter dem Punkt Advanced CSS darauf ein.
6. Kommentare
Die Syntax für Kommentare kommt ebenfalls aus den Semikolon-Sprachen, leider ohne die dort übliche Kurzform. Ein Kommentar
beginnt mit einem /
, dann kommt ein *
, danach der Kommentar und beendet wird das Ganze in der
umgekehrten Reihenfolge also *
und dann /
.
/* Hier steht der Kommentar */
Aber bitte merken, die sonst übliche Kurzform //
funktioniert hier nicht.
7. Schreibweise
Ich hoffe, ich rede jetzt keinen Blödsinn, da ich seit langer langer Zeit nur noch mit konsequenter Kleinschreibung arbeite. Also, bei XHTML muss man alles klein schreiben, bei HTML dagegen kann man auch die große Variante wählen. Ich rate allerdings davon ab. Ist zu kompliziert beim Tippen.
/* HTML (optional) */
SELEKTOR
{
EIGENSCHAFT: WERT;
}
/* XHTML */
selektor
{
eigenschaft: wert;
}
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt