Cascading Style Sheets (CSS)
Wie sind CSS-Angaben aufgebaut?
Die allgemeinste Form für eine Style-Angabe sieht folgendermassen aus:
selektor { eigenschaft: wert ; ... }
Bloss keine Panik jetzt. Sehen wir uns gleich ein einfaches Beispiel an, damit dieses abstrakte Gerüst seinen Schrecken verliert:
h1 { font-size: x-large ; background-color: yellow }
Das lässt sich schon recht gut lesen: ganz offensichtlich sollen <h1>-Titel in extra grosser Schrift vor gelbem Hintergrund dargestellt werden. Allgemein gesagt bedeutet das offenbar:
| selektor | eine Angabe, die sagt, was hier beschrieben wird (z.B. ein <h1>-Titel). Hier befindet sich das Bindeglied zwischen CSS und HTML. |
| { ... } | Alle Angaben, die nun zu einem Selektor gemacht werden, stehen in einem geschweiften Klammernpaar. |
| eigenschaft | Du siehst es am Beispiel: font-size, background-color ... also Schriftgrösse, Hintergrundsfarbe und was es sonst noch alles gibt. Es gibt eine ganze Menge solcher Eigenschaften, und wir werden einige davon im Abschnitt "CSS-Syntax" behandeln. Du kannst sie nicht selber erfinden, sondern musst dich an die vorgegebenen Bezeichnungen halten. |
| wert | Jede Eigenschaft kann verschiedene Werte annehmen. Manchmal sind diese einleuchtend (du könntest dir auch vorstellen, statt "yellow" einfach "red" zu schreiben), manchmal muss man sie auch namentlich kennen (was gibt's z.B. ausser "x-large" noch?). Auch hierüber sprechen wir im Abschnitt "CSS-Syntax". |
| ; ... | Wenn mehrere eigenschaft:wert-Paare vorkommen, werden sie durch Strichpunkte getrennt. |
Ähnlich wie bei HTML kannst du die Darstellung solcher Style-Angaben selber bestimmen. Ob du sie also alle auf eine Zeile schreibst oder für jede Eigenschaft eine neue Zeile beginnst, ist letztlich eine Frage deines persönlichen Geschmacks.
