Hauptmenü

Untermenü

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
{
  
EigenschaftWert;
}

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 EigenschaftWert; }

Als dritte Möglichkeit gibt es noch die folgende, die sich an einem gängigen Stil aus den schon erwähnten Semikolonsprachen orientiert.


Selektor {
  
EigenschaftWert;
}

2. Mehrfach-Selektoren

Es gibt auch noch die Möglichkeit, mehreren Selektoren dieselben Eigenschaften zuzuweisen. Dabei werden die einzelnen Selektoren durch ein Komma getrennt.


Selektor1Selektor2usw.
{
  
EigenschaftWert;
}

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
{
  
EigenschaftWert;
}

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.


*
{
  
EigenschaftWert;
}

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
{
  
EIGENSCHAFTWERT;
}
/* XHTML */
selektor
{
  
eigenschaftwert;
}

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt