Gültige Werte:
Schlüsselwörter (z. B. red, medium)
Zahlenwerte
absolut (z. B. mm).
relativ (z. B. %).
Mehreren Elementen kann gleichzeitig ein Format zugewiesen werden
H1, H2, H3 {color: red} Durch folgenden Ausdruck wird allen Elementen die rote Farbe zugeordnet
* {color: red}
Wenn eine Eigenschaft mehrere Werte erfordert (z.B. Positionsangaben),
so werden diese nur durch ein Leerzeichen voneinander getrennt.
Alternativwerte (z. B. bei Schriften) werden durch Kommata getrennt. Sie
werden von links nach rechts abgearbeitet.
Die Sprache ist nicht casesensitiv.
Kommentar kann wie in C in den Code eingefügt werden
/* Kommentar */
Verknüpfung der Stilinformationen mit dem Dokument
Lokale Formatvorlage
Formatzuweisung direkt bei der Verwendung eines HTML-Elementes durch STYLE-Attribut
Nur innerhalb des Tags gültig
Vorteile von CSS bleiben ungenutzt, da die Formatierungsanweisungen nicht
vom Inhalt getrennt werden.
<H1 STYLE= "font-family: sans-serif; text-align:center; color:
red">Überschrift</H1>
Positionierung am Anfang des Dokumentes
Definition der Formatvorlagen im Dokumentkopf hinter dem TITLE-Tag
Einbettung in das STYLE-Element
Für das gesamte Dokument gültig
Browser, die das STYLE-Element nicht kennen, ignorieren die Angaben
<HEAD> ... <TITLE>Seite mit CSS im Kopf</TITLE> <STYLE TYPE="text/css"> <!-- P {color: black; font-size: 12 pt} H1 {color:red} --> </STYLE> </HEAD>
Verbinden einer externen Formatvorlage mit dem Dokument
Verknüpfung mit dem <LINK> Element
Externen Dateien haben typischer Weise die Endung .css
Sie enthalten die Formatvorlagen im Format wie bei der Deklaration im Dokumentkopf
<LINK REL=stylesheet HREF="default.css" TYPE="text/css" MEDIA=screen
TITLE="Stylesheet">
Verwendung von @import
Durch die Verwendung von @import am Anfang des Dokumentes kann
ebenfalls eine externe Formatvorlage importiert werden:
@import "blau.css"
Verwendung von mehreren Stylesheets
Mit der Eigenschaft MEDIA können für verschiedene Ausgabemedien
jeweils unterschiedliche Formatvorlagen verwendet werden
Optimierung des Dokumentlayoutes auf die speziellen Anforderungen der Ausgabe
auf Bildschirm, Drucker, Handheld-PC oder Sprachausgabe für Sehbehinderte
Verknüpfung mehrerer externer Dateien zu einer Formatvorlage durch
gleichen Titel
Menü mit alternativen Formatvorlagen durch REL=alternate @media print { BODY {font-size: 10pt} } @media screen { BODY {font-size: 12pt} } oder im Dokumentkopf:
<LINK REL=stylesheet HREF="style.css" TYPE="text/css" MEDIA=screen> <LINK REL=stylesheet HREF="aural.css" TYPE="text/css" MEDIA=aural> <LINK REL=alternate HREF="color-24b.css" TYPE="text/css" TITLE="24-bit
Color Style" MEDIA="screen, print">
Vererbung und Verschachtelung
Eigenschaften eines Elementes werden an Tochter-Elemente durchgereicht
Durch die Zuweisung des Wertes inherit kann explizit angegeben werden,
daß der Wert vom Mutter-Element übernommen werden soll.
H1 {color:inherit}
Bei Mehrfachdefinitionen gilt folgende Reihenfolge (1 = höchste Priorität):
1. Lokal definierte Formate
2. Formatvorlage in Dokumentkopf
3. Externe Formatvorlagen
4. Einstellungen des Browsers
Gibt es konkurrierende Definitionen mit gleicher Priorität, so gilt
die letzte Definition
Bei Verwendung der ! important-Regel erhält eine Formatanweisung
höchste Priorität.
BODY {background-repeat: center ! important}
Zuweisung von Eigenschaften
Benannte Formate
Erstellung eigener benannter Formate
Kann nahezu jedem Element zugewiesen werden
Beispiel: die Fomatvorlage heißt „anmerkung“ (der Punkt ist wichtig)
<STYLE> .anmerkung {background: red; color:black} </STYLE>
Zuweisung benannter Formate zu einem Element
Die Zuweisung eines benannten Formates erfolgt mit Hilfe des CLASS-Attributs
<P CLASS=anmerkung>Ich bin ein Absatz, der als Anmerkung markiert
ist</P>
Zuweisung zu bestimmten Elementen
Benannte Formate sind nicht an ein bestimmtes Element gebunden
Um die Formatvorlage besser zu strukturieren, können von einem HTML-Element
verschiedene Klassen gebildet werden
Ein benanntes Format gehört nur noch zu einem bestimmen Element
<STYLE> P.anmerkung {color:red} P.notiz { color:green} </STYLE>
IDs
Elementen kann anhand eines IDs ein bestimmtes Format zugewiesen werden.
#0815 {color:red}
<P ID=0815><Ein Element, das den ID 8125 besitzt, erhält
eine rote Farbe</P>
<DIV>
und <SPAN>
Definition von Container mit <DIV> und <SPAN>
Zuweisung eines Formates durch CLASS-Attribut
<DIV> für Blöcke aus mehreren Elementen
<SPAN> auf zeichenebene innerhalb eines Elementes
<DIV CLASS=anmerkung> <H1>Anmerkung</H1> <P>Dies ist eine <SPAN CLASS=wichtig>wichtige</SPAN>
Anmerkung mit Überschrift</P> </DIV>
