CSS: Syntax

Erstellt: 18.04.2006 | Aktualisiert: 05.01.2009

Die Syntax von CSS ist einfach aufgebaut und schnell zu erlernen. Eine Anweisung setzt sich grundsätzlich aus Selektor, Deklaration und Wert zusammen.

Syntax

p {color: #FF0000;}
Selektor {Eigenschaft: Wert;}

Die CSS-Syntax besteht aus drei Teilen: Dem Selektor, der Deklaration und dem Wert. Der Selektor ist das XHTML-Element, welches formatiert werden soll, die Deklaration ist der Deklarations-Titel und Wert ist der Stil, den dem Element zugewiesen werden sollte.

Kurzschreibweise

p {
background: #CCCCCC url(images/bg.png) top left no-repeat;
}

CSS bietet auch einige Kurzschreibweisen zum Beispiel bei der Formatierung des Hintergrundes. Dadurch lässt sich ein CSS-Dokument verkürzen und übersichtlicher Gestalten.

Formatierung

p {
background-color: #CCCCCC;
background-image: url(images/bg.png);
background-position: top left;
background-repeat: no-repeat;
}

Um komplexe CSS-Dokumente steht’s übersichtlich zu gestalten, sollte man auf eine Art Blockschreibweise zurückgreifen. Diese Schreibweise hat keinerlei Einfluss auf das Endergbnis (das Aussehen der Website), sondern dient lediglich der schönen Strukturierung und praktischen Lesbarkeit des CSS-Codes.

Mehrere Selektoren

p, h1, h2 {color: #FF0000;}

Eine Deklaration kann natürlich auch auf mehrere Selektoren angewendet werden. Diese werden mittels Kommas voneinader getrennt.

Masseinheiten

Prinzipiell können Längen und Grössen ind relativen oder absoluten Werten angegeben werden. Die Werte bestehen aus einer Zahl und einer Einheit. Grundsätzlich können sowohl positive wie auch negative Werte angegeben werden.

  • Absolute Einheiten
    • Zentimeter (cm)
    • Millimeter (mm)
    • Punkt (pt)
    • Pica (pc)
  • Relative Einheiten
    • EM (em) – 1em = Standardgrösse im Browser
    • x-Höhe (ex)
    • Pixel (px)

Ferner gibt es auch die Angabe in Prozentwerten. Diese beziehen sich immer relativ auf andere Werte, welche als Standard definiert oder vererbt werden.

Farben

color: #ff0000;
color: #f00;
color: red;

Farbangaben werden als Hexadezimal Werte angegeben. Das sind pro Farbanteil maximal zweistellige Werte zwischen 0 und F für Rot, Grün und Blau. Wenn beide Stellen bei einem Farbwert gleich sind, dann genügt es eine Zahl zu schreiben.

Bei den Farbenangaben gibt’s so genannte Schlüsselwerte wie red, blue oder green.

Bilder

background-image: url ("images/bg.png");

Grafiken und andere Dateien werden in CSS durch Angabe von url relativ zum Stylesheet referenziert.

Benennung

Grundsätzlich wird bei der Bennung von Klassen und IDs zwischen Gross- und Kleinschreibung unterschieden. Allerdings wird diese Vorgabe von den Browsern nur bedingt interpretiert, somit sollte man diese Unterscheidung nicht in Betracht ziehen.

Ebenfalls kritisch ist die Verwendung des Underscore-Zeichen. Dieses wird teilweise auch falsch interpretiert.

Grundsätzlich mit der Wahl des Namens der Klasse oder IDs einen Hinweis auf die Funktion gegeben werden. Zur Benennung dürfen Ziffern, Buchstaben und Bindestriche verwendet werden. ACHTUNG: Das erste Zeichen darf weder eine Ziffer noch ein Bindestrich sein!

Kommentar

/* Und hier könnte ein Kommentar stehen */

Natürlich können auch bei CSS erklärende Kommentare angefügt werden. Diese werden wie oben beschrieben ins Dokument eingefügt.

Verwandte Snippets

Weblinks