Wie Stildefinitionen in ein HTML-Dokument eingebunden werden, wird in der CSS-Einführung beschrieben. Und die HTML-Tags sowie die HTML-Attribute class und id, über die die Stildefinitionen mit Seitenelementen verknüpft werden, sind in der Übersicht zu den HTML-Tags erläutert. Außerdem können Stildefinitionen noch mit Pseudo-Elementen verbunden werden: Pseudoelemente wie a:link bestehen aus einem HTML-Element und einer Pseudoklasse. Sie beschreiben spezielle Eigenschaften oder Zustände eines anderen Elementes, z.B. eines Hyperlinks.
| Klasse | Beschreibung |
|---|---|
| :link | beschreibt einen noch nicht angeklickten Link |
| :visited | beschreibt einen bereits besuchten Link |
| :hover | beschreibt den Zustand, wenn der Mauszeiger über einem aktivierbaren Element schwebt, ohne bereits gedrückt zu sein |
| :focus | ist die Entsprechung zu :hover für die Tastaturbenutzung und sollte für alle mit :hover ausgezeichneten Elemente zusätzlich angegeben werden |
| :active | beschreibt den gerade aktiven ("gedrückten") Link, bevor die Maustaste losgelassen wird |
Zur Reihenfolge:
Wenn Stildefinitionen über die Attribute class und id mit einem Seitenelement verbunden werden sollen, dann sollten diese Attribute in einem <div>-Tag stehen bzw. bei Stildefinitionen für eingebundene Elemente (inline elements) in einem <span>-Tag. Stehen solche Attribute in anderen Tags, so zeigen einige Browser die entsprechenden Elemente nicht mehr korrekt an. Will man daher z.B. eine Liste auf eine bestimmte Weise gestalten, dann sollte man diese in einen <div>-Bereich mit einer entsprechenden Klasse bzw. ID einbetten, z.B. so:
Die folgenden Listen enthalten nur die wichtigsten Befehle mit ihren wichtigsten, allgemein unterstützten Werten. Eine vollständige Übersicht findest Du z.B. auf der selfhtml-Seite.
| Befehl | mögliche Werte | Beschreibung |
|---|---|---|
| font-family | serif | sans-serif | monospace | cursive | fantasy | [Name einer bestimmten Schrift] | mehrere Schriftarten können durch Kommata getrennt aufgezählt werden; die Reihenfolge entspricht der Priorität; am Ende sollte immer eine der generischen Schriftfamilien stehen |
| font-style | normal | italic | mit italic wird der kursive Schnitt zu einer Schrift gewählt; ist dieser nicht vorhanden, so wird der normale Schriftschnitt dieser Schrift einfach schräg gestellt |
| font-variant | normal | small-caps | wechselt zwischen normaler Darstellung und Kapitälchen; sind zu einer Schrift keine "echten" Kapitälchen vorhanden, verkleinert der Browser normale Großbuchstaben |
| font-weight | normal | bold | gibt an, wie fett ein Element dargestellt wird |
| font-size | x-small | small | medium | large | x-large | [numerische Angabe] | [prozentuale Angabe] | gibt die Größe der verwendeten Schriftart an (die tatsächliche Anzeige ist Browser- und Betriebssystem-abhängig, wie im Abschn. Fallstricke erläutert); medium entspricht der normalen Schriftgröße und ist der Standardwert; numerische Angaben können relativ sein (auf die Schriftgröße des Elternelementes bezogen; empfohlen), z.B. 0.8em (80% der Schriftgröße des Elternelementes), oder absolut, z.B. 12px (12 Pixel; abhängig von der Bildschirmauflösung) oder 14pt (14pt; auf Druckausgabe bezogen); |
| text-decoration | none | underline | overline | line-through | dient der Schriftverzierung; wird häufig zum Abschalten der Unterstreichung bei Links verwendet; verschachtelte Anweisungen zur Schriftverzierung werden von einigen Browsern nicht korrekt dargestellt |
| line-height | normal | [Multiplikator] | [Zeilenhöhe] | legt die Zeilenhöhe fest; als Multiplikatoren können positive Zahlen (z.B. 2 oder 1.5) gewählt werden; alternativ kann die Zeilenhöhe auch in einer absoluten oder relativen Einheit angegeben werden (s. font-size) |
| text-indent | [Einrückung] | die Länge der Einrückung kann absolut oder relativ angegeben werden (s. font-size) |
| text-align | left | right | center | justify | beschreibt die Ausrichtung des Inhalts eines Elements; kann zum Zentrieren von Inhalten (nicht nur Text) verwendet werden; justify führt zu Blocksatz |
| font | [Folge von Werten aus den einzelnen Formatierungsbefehlen für die Schrift] | faßt alle Eigenschaften der Schriftformatierung in einer Kurzform zusammenfassen; Syntax beachten! (nachzuschlagen z.B. auf der selfhtml-Seite) |
Farben und Hintergründe können beliebigen Elementen zugewiesen werden.
| Befehl | mögliche Werte | Beschreibung |
|---|---|---|
| color | [RGB-Wert] | [Farbname] | Textfarbe (Vordergrundfarbe); zu den möglichen Werten vgl. die Erläuterungen zu Farben |
| background-color | transparent | [RGB-Wert] | [Farbname] | Hintergrundfarbe; zu den möglichen Werten vgl. die Erläuterungen zu Farben |
| background-image | [url] | none | legt eine Graphik als Hintergrund fest; Syntax-Beispiel: body { background-image: url(img/hintergrund.gif); } (zwischen "url" und der öffnenden Klammer darf kein Leerzeichen stehen) |
| background-repeat | repeat | no-repeat | repeat-x | repeat-y | gibt an, wie oft und in welcher Richtung eine Hintergrund-Graphik wiederholt wird, die kleiner ist als der angezeigte Bereich (Standardwert: repeat, d.h. Wiederholung in beiden Richtungen) |
| background-attachment | scroll | fixed | gibt an, ob der Hintergrund beim Scrollen der Seite mitscrollt oder nicht; sollte nur für <body> verwendet werden |
| background-position | [Schlüsselwörter] | [numerische Angaben] | zur Syntax vgl. z.B. die selfhtml-Seite; für eingebundene Elemente (inline elements) ist background-position nicht erlaubt |
| background | [Folge von Werten aus den einzelnen Formatierungsbefehlen für Hintergründe] | faßt alle Eigenschaften für Hintergrundbilder in einer Kurzform zusammenfassen; Syntax beachten! (nachzuschlagen z.B. auf der selfhtml-Seite) |
Die Kastenformatierungen beziehen sich auf das Kastenmodell (box model). Ein Übersichtsgraphik enthält z.B. das Buch "CSS-Praxis" von Kai Laborenz (2. Aufl., S. 69). Die verschiedenen Abstände (zum Elternelement, zum Geschwisterelement, zwischen Inhalt und Rand usw.) können jeweils einzeln für jede Richtung oder zusammenfassend im Uhrzeigersinn festgelegt werden. Außerdem können Breite (width) und Höhe height eines Elements sowie seine Position und die Position folgender Elemente (mit float) bestimmt werden. Für den Rand können Breite, Farbe und Stil jeweils einzeln und zusammenfassend für alle Seiten festgelegt werden. Schließlich können noch Reihenfolge und Sichtbarkeit von Elementen mit visibility und z-index sowie mit display bestimmt werden. Am einfachsten ist es, wenn man beim Festlegen der Kastenformatierungen eine Übersicht zum Kastenmodell zur Hand hat. Zu empfehlen ist außerdem das Studium geeigneter Beispiele (etwa die Beispielseiten von Tim)