template
Index :: CSS :: Syntax und Vokabular
Ein Stylesheet besteht im Wesentlichen aus einer Menge von Regeln.
Eine Regel (auch: Regelmenge, Regelsatz) ist die Grundkonstruktion eines Stylesheets. Regeln bestehen aus mindestens einem Selektor und einem Paar geschweifter Klammern, Deklarationsblock genannt, die eine Liste mit null oder mehr durch Semikola voneinander abgetrennten Deklarationen enthalten.
Eine Deklaration ist Bestandteil eines CSS-Deklarationsblocks. Deklarationen bestehen aus einer Eigenschaft, gefolgt von einem Doppelpunkt, gefolgt von einem Wert. Vor und hinter diesen Bestandteilen kann sich Leerraum befinden.
Deklarationen werden durch ein Semikolon voneinander getrennt.
p { margin: 0; }
Die syntaktischen Bestandteile einer Deklaration:
| Regel |
p { margin: 0; } |
| Selektor |
p { margin: 0; } |
| Deklarationsblock |
p { margin: 0; } |
| Deklaration |
p { margin: 0; } |
| Eigenschaft |
p { margin: 0; } |
| Wert |
p { margin: 0; } |
Teilen sich mehrere Selektoren denselben Deklarationsblock, so können sie mit Kommata getrennt nacheinander aufgeführt werden:
h1, h2, h3, h4, h5, h6 {
color:#889399; background-color:transparent; margin:2em 0 1em 0; }
Einige Eigenschaften sind zusammenfassende Eigenschaften (shorthand properties), die es Autoren erlauben, die Werte mehrerer Eigenschaften innerhalb einer einzigen Eigenschaft anzugeben. So lassen sich die Eigenschaften
p { border-width: 1px; border-style: solid; border-color: red; }
in der folgenden zusammenfassen:
p { border: 1px solid red; }
Werden in einer zusammenfassenden Form Werte weggelassen, wird diesen fehlenden Eigenschaften ihr Standardwert zugewiesen.
Für eine Übersicht zu den verkürzten Schreibweisen siehe auch: Kurzschreibweisen.
Für alle formalen Sprachen gelten sehr strenge Regeln, die festlegen, welche Zeichen an welcher Stelle erlaubt sind. Soll ein Zeichen verwendet werden, das syntaktisch an dieser Stelle nicht zulässig ist oder eine besondere Bedeutung hat, die an dieser Stelle nicht gewünscht ist, so muss es markiert werden, das heisst es wird ihm seine besondere Bedeutung an dieser Stelle genommen. In CSS maskieren Webautoren ein Zeichen, indem sie ihm ein Backslash (\) voranstellen. Die beiden folgenden Regeln sind somit äquivalent:
bo\
dy { margin: 0; }
body { margin: 0; }
Webautoren benötigen Zeichenmaskierung auch dann, wenn sie Zeichen benutzen wollen, die ausserhalb des Zeichenumfangs der gewählten Zeichenkodierung liegen. In diesen Fällen folgt dem Backslash die hexadezimale Referenz der Unicode-Position des Zeichens:
a[href^="http://"]::before, a[href^="https://"]::before {
/* Nord-Ost-Pfeil und Leerzeichen vor externen Links */
content: "\2197\00A0";
}
Wie in XHTML gibt es auch in CSS die Möglichkeit, Kommentare zu notieren. Deren Syntax ist an die Programmiersprache C angelehnt und sieht wie folgt aus:
/* Einzeiliger Kommentar */
/* Mehrzeiliger
Kommentar */
Kommentare dürfen nicht verschachtelt werden.
Neben gewöhnlichen Regelsätzen gibt es mit At-Regeln noch eine zweite Art von Regeln. Sie dienen besonderen Zwecken, die durch andere Regeln nicht erfüllt werden. So können mit At-Regeln unter anderem die Wirksamkeit von darin enthaltenen Regeln auf bestimmte Medien eingeschränkt, Stylesheets importiert oder die Zeichenkodierung vorgegeben werden.
Eine At-Regel beginnt mit @ (daher der Name), gefolgt von einem Bezeichner, und reicht bis zum schließenden Semikolon (;) oder dem Ende des nachfolgenden Deklarationsblocks.
Mit Hilfe der At-Regel @media lassen sich gewöhnliche Regeln umschließen und deren Geltungsbereich auf bestimmte Ausgabemedien einschränken:
@media screen, handheld {
body { color:#eee; background:#333; }
}
@media print {
body { color:#000; background:#fff; }
}
Die erste @media-Regel schränkt den Geltungsbereich der darin enthaltenen Regel auf die Ausgabemedien screen und handheld ein; die zweite tut dasselbe für die Druckausgabe. Natürlich könnten die @media-Regeln noch weitere Regeln enthalten und theoretisch beliebig oft innerhalb eines Stylesheets vorkommen. Dadurch ist es zwar möglich, Deklarationen für die unterschiedlichen Medientypen innerhalb einer einzigen Datei zusammenzufassen, jedoch wird das Stylesheet so schnell unübersichtlich. Eher empfiehlt sich die Einbindung eines eigenen Stylesheets pro Medium per link-Element.
Die At-Regel @import muss vor allen anderen Regeln eines Stylesheets stehen und dient dazu, Regeln aus externen Stylesheets in eine CSS-Datei oder in das style-Element eines XHTML-Dokuments zu importieren. Dabei gibt es zwei Schreibweisen:
@import "layout.css";
@import url("layout.css");
Auf vielen Webseiten ist dies gängige Praxis, aufgrund kleinerer, jedoch nicht weniger ärgerlicher Fehler in einigen Browsern sollte man von dieser Methode jedoch Abstand nehmen.
Die At-Regel @charset darf nur jeweils einmal in externen Stylesheets verwendet werden. Sie muss direkt zu Beginn der Datei notiert werden, auch Kommentare und Leerraum sind nicht erlaubt. Sie dient dazu, die Zeichenkodierung des Dokuments anzugeben, beispielsweise UTF-8:
@charset "UTF-8";
| template |
 |