Masseinheiten und Farbangaben
Numerische Angaben absolut
pt Punkt. Typografische Masseinheit. 1 Punkt entspricht 1/72 Inches.
pc Pica. Typografische Masseinheit. 1 Pica entspricht 12 Punkt.
in Inch. 1 Inch = 2.54 Zentimetern. Dezimalzeichen statt Komma = Punkt
mm Millimeter.
cm Zentimeter. Dezimalzeichen statt Komma = Punkt
Numerische Angaben relativ
em Relativ zur Schriftgroesse des Elements. Bei Anwendung auf Schriftgroesse relativ
zur Schriftgroesse des Elternelements. Dezimalzeichen statt Komma = Punkt
ex Relativ zur Hoehe des Buchstabens x. Bei Anwendung auf Schriftgroesse relativ
zur Hoehe des Buchstabens x im Elternelement. Dezimalzeichen statt Komma = Punkt
px Pixel. Relativ von Ausgabegeraet zu Ausgabegeraet, absolut an ein und demselben Ausgabegeraet.
% Prozent. Je nach CSS-Eigenschaft relativ zur elementeigenen Groesse, oder zu der des
Elternelements, oder zu einem allgemeineren Kontext.
Farbangaben
#rrggbb Hexadezimale RGB-Angabe wie bei HTML.
#rgb Hexadezimale RGB-Angabe - Kurzschreibweise
Farbnamen wie bei HTML
rgb(R,G,B) RGB-Werte dezimal (0-255,0-255,0-255)
rgb(%,%,%) RGB-Anteile prozentual (0-100%,0-100%,0-100%)
Zentrale Formate
Formate fuer Elemente
Element { CSS-Eigenschaft:Wert; ...}
Fuer Element den Namen eines HTML-Elements wie h1 oder td oder * ("alle Elemente") notieren.
Fuer CSS-Eigenschaft eine Eigenschaft wie font-size oder background-color notieren.
Fuer Wert einen jeweils erlaubten Wert notieren.
Beliebig viele Notierungen von CSS-Eigenschaft:Wert; innerhalb der geschweiften Klammern moeglich.
Formate fuer verschachtelte Elemente
Element1 Element2 { CSS-Eigenschaft:Wert; ...}
Element1 > Element2 { CSS-Eigenschaft:Wert; ...}
Element1 * Element2 { CSS-Eigenschaft:Wert; ...}
Element1 + Element2 { CSS-Eigenschaft:Wert; ...}
Fuer Element1 und Element2 so etwas notieren wie h3 und var.
Formatdefinitionen gelten dann fuer var-Elemente innerhalb von h3-Elementen.
Oder fuer Element1 oder Element2 Platzhalter * ("alle Elemente") notieren.
Leerzeichen zwischen Element1 und Element2 bedeutet: egal wie viele Ebenen Element2 unterhalb
von Element1 in der Elementstruktur liegt.
> bedeutet: nur wenn Element2 eine Ebene unterhalb von Element1 in der Elementstruktur liegt.
* bedeutet: wenn Element2 mindestens zwei Ebenen unterhalb von Element1 in der Elementstruktur liegt.
+ bedeutet: wenn Element2 auf gleicher Ebene liegt wie Element1 und in der Elementstruktur
unmittelbar nach Element1 folgt.
Attributbedingte Formate
Element[Attributname] { CSS-Eigenschaft:Wert; ...}
Element[Attributname=Attributwert] { CSS-Eigenschaft:Wert; ...}
Element[Attributname~=Attributwert] { CSS-Eigenschaft:Wert; ...}
Element[Attributname|=Attributwert] { CSS-Eigenschaft:Wert; ...}
Fuer Element ein HTML-Element wie z.B. a oder td oder * ("alle Elemente") notieren.
Fuer Attributname so etwas wie href oder align notieren.
a[href=index.htm] trifft z.B. auf Elemente mit zu.
img[alt~=Hamburg] trifft z.B. auf Elemente mit 
zu.
p[lang|=en] trifft z.B. auch auf Elemente mit ...
zu.
Seite Beschreibung
Formate fuer Klassen
Element.Klassenname { CSS-Eigenschaft:Wert; ...}
*.Klassenname { CSS-Eigenschaft:Wert; ...}
.Klassenname { CSS-Eigenschaft:Wert; ...}
.KlassennameA.KlassennameB { CSS-Eigenschaft:Wert; ...}
Fuer Element ein HTML-Element wie z.B. strong oder table oder * ("alle Elemente") notieren. Der Stern kann auch entfallen.
Fuer Klassenname einen Namen notieren.
Trifft auf HTML-Elemente mit ... zu.
.gross trifft z.B. auf ...
zu.
.KlassennameA.KlassennameB trifft z.B. auf ...
zu.
Individualformate
#Name { CSS-Eigenschaft:Wert; ...}
Element#Name { CSS-Eigenschaft:Wert; ...}
Fuer Name einen Namen notieren.
Trifft auf HTML-Elemente mit ... zu.
#Kopf trifft z.B. auf ...
zu.
Fuer Element ein HTML-Element wie z.B. h2 oder pre notieren.
p#Kopf trifft z.B. auf ...
zu, nicht aber auf ...
.
Pseudoelemente
Pseudoklassen
a:link { CSS-Eigenschaft:Wert; ... } /* noch nicht besuchte Ziele */
a:visited { CSS-Eigenschaft:Wert; ... } /* besuchte Ziele */
a:hover { CSS-Eigenschaft:Wert; ... } /* Verweise bei "MouseOver" */
a:active { CSS-Eigenschaft:Wert; ... } /* Angeklickte Verweise */
a:focus { CSS-Eigenschaft:Wert; ... } /* Verweise, die Fokus erhalten */
Element:hover { CSS-Eigenschaft:Wert; ... } /* Element bei "MouseOver" */
Element:active { CSS-Eigenschaft:Wert; ... } /* Angeklickte Elemente */
Element:focus { CSS-Eigenschaft:Wert; ... } /* Elemente, die Fokus erhalten */
#Name:hover { CSS-Eigenschaft:Wert; ... } /* Individualformate bei "MouseOver" */
#Name:active { CSS-Eigenschaft:Wert; ... } /* Angeklickte Individualformate */
#Name:focus { CSS-Eigenschaft:Wert; ... } /* Individualformate, die Fokus erhalten */
Element:first-line { CSS-Eigenschaft:Wert; ... } /* erste Zeile */
Element:first-letter { CSS-Eigenschaft:Wert; ... } /* erster Buchstabe */
Element:lang(xy) { CSS-Eigenschaft:Wert; ... } /* Elemente mit Sprachauszeichnung */
Element:before { content:Wert; } /* Vor dem Element einfuegen */
Element:after { content:Wert; } /* nach dem Element einfuegen */
:link und :visited sind nur bei a-Elementen (Verweisen) moeglich, :hover, :active und :focus auch
bei anderen Elementen und Individualformaten.
Bei content:Wert fuer Wert in Anfuehrungszeichen einen statischen Text notieren, oder url(URI),
wobei URI eine Grafik referenzieren kann, oder open-quote und close-quote fuer Anfuehrungszeigen, oder eine automatische Nummerierung wie folgt:
content:counter(Name); counter-increment(Name);
Dabei fuer Name einen Namen fuer den Zaehler notieren.
Direktformatierung von Elementen
CSS in HTML-Elementen
...
Fuer Element den Namen eines HTML-Elements wie p oder table oder blockquote notieren.
Fuer CSS-Eigenschaft eine Eigenschaft wie font-size oder background-color notieren.
Fuer Wert einen jeweils erlaubten Wert notieren.
Beliebig viele Notierungen von CSS-Eigenschaft:Wert; innerhalb des style-Attributs moeglich.
CSS-Eigenschaften: Schriftformatierung
Schriftart
font-family:Schriftart1,Schriftart2,...;
Fuer Schriftart1 den Namen gewuenschten Schriftart notieren.
Fuer Schriftart2 und weitere die Namen von Alternativschriftarten notieren.
Schriftstil
font-style:Wert;
Fuer Wert einen der folgenden Werte notieren:
italic = Schriftstil kursiv.
oblique = Schriftstil kursiv.
normal = normaler Schriftstil.
Schriftvariante
font-variant:Wert;
Fuer Wert einen der folgenden Werte notieren:
small-caps = Kapitaelchen.
normal = normale Schriftvariante.
Schriftgroesse
font-size:Wert;
Fuer Wert eine numerische Angabe wie 1.2em, 14px oder 12pt notieren oder eine der folgenden Werte:
xx-small = winzig.
x-small = sehr klein.
small = klein.
medium = mittel.
large = gross.
x-large = sehr gross.
xx-large = riesig.
smaller = sichtbar kleiner als normal.
larger = sichtbar groesser als normal.
Schriftgewicht
font-weight:Wert;
Fuer Wert einen der folgenden Werte notieren:
bold = fett.
bolder = extrafett.
lighter = duenner.
100,200,300,400,500,600,700,800,900 = extra-duenn (100) bis extrafett (900).
normal = normales Schriftgewicht.
Schriftlaufweite
font-stretch:Wert;
Fuer Wert einen der folgenden Werte notieren:
wider = weiter als normal.
narrower = enger als normal.
condensed = gedraengt.
semi-condensed = halb gedraengt.
extra-condensed = stark gedraengt.
ultra-condensed = extrastark gedraengt.
expanded = geweitet.
semi-expanded = halb geweitet.
extra-expanded = stark geweitet.
ultra-expanded = extrastark geweitet.
normal = normale Laufweite.
Schrift (allgemein)
font:Wert;
Fuer Wert eine Mischung aus erlaubten Werten fuer font-style, font-variant, font-weight,
font-size, line-height und font-family notieren. Einzelwerte durch Leerzeichen trennen, die Reihenfolge ist einzuhalten.
z.B. font:italic bold 13px Times;
Wortabstand
word-spacing:Wert;
Fuer Wert eine numerische Angabe wie 0.2em oder 4px notieren, jedoch keine Prozentwerte.
Zeichenabstand
letter-spacing:Wert;
Fuer Wert eine numerische Angabe wie 0.1em oder 2px notieren, jedoch keine Prozentwerte.
Textdekoration
text-decoration:Wert;
Fuer Wert einen der folgenden Werte notieren:
underline = unterstrichen.
overline = ueberstrichen.
line-through = durchgestrichen.
blink = blinkend.
none = normal (keine Text-Dekoration).
Text-Transformation
text-transform:Wert;
Fuer Wert einen der folgenden Werte notieren:
capitalize = Wortanfaenge als Grossbuchstaben.
uppercase = Nur Grossbuchstaben.
lowercase = Nur Kleinbuchstaben.
none = normal (keine Text-Transformation).
Textfarbe
color:Wert;
Fuer Wert eine Farbangabe wie #FFCC99, red oder rgb(96,255,0) notieren.
CSS-Eigenschaften: Ausrichtung/Absatzkontrolle
Texteinrueckung
text-indent:Wert;
Fuer Wert eine numerische Angabe wie z.B. 20px oder 2.5cm notieren.
Zeilenhoehe
line-height:Wert;
Fuer Wert eine numerische Angabe wie z.B. 20px oder 120% notieren. Prozentangaben beziehen sich auf die Schriftgroesse.
Vertikale Ausrichtung
vertical-align:Wert;
Fuer Wert einen der folgenden Werte notieren:
top = obenbuendig ausrichten.
middle = mittig ausrichten.
bottom = untenbuendig ausrichten.
baseline = an der Basislinie ausrichten (oder untenbuendig, wenn es keine Basislinie gibt).
sub = tieferstellen (ohne die Schriftgroesse zu reduzieren).
super = hoeherstellen (ohne die Schriftgroesse zu reduzieren).
text-top = am oberen Schriftrand ausrichten.
text-bottom = am unteren Schriftrand ausrichten.
Horizontale Ausrichtung
text-align:Wert;
Fuer Wert einen der folgenden Werte notieren:
left = linksbuendig ausrichten (Voreinstellung).
center = zentriert ausrichten.
right = rechtsbuendig ausrichten.
justify = als Blocksatz ausrichten.
Textumbruch
white-space:Wert;
Fuer Wert einen der folgenden Werte notieren:
normal = automatischer Zeilenumbruch (wie bei allen HTML-Elementen ausser pre und nowrap).
pre = Zeilenumbruch wie im Editor eingegeben (so wie beim pre-Element).
nowrap = Kein automatischer Zeilenumbruch, Umbruch moeglich durch entsprechende HTML-Tags.
CSS-Eigenschaften: Aussenrand/Abstand
Aussenrand/Abstand oben
margin-top:Wert;
Fuer Wert einen numerischen Wert wie 2.3cm oder 24pt notieren.
Aussenrand/Abstand unten
margin-bottom:Wert;
Fuer Wert einen numerischen Wert wie 30px oder 25mm notieren.
Aussenrand/Abstand links
margin-left:Wert;
Fuer Wert einen numerischen Wert wie 1.2cm oder 40px notieren.
Aussenrand/Abstand rechts
margin-right:Wert;
Fuer Wert einen numerischen Wert wie 1.25cm oder 65px notieren.
Aussenrand/Abstand (allgemein)
margin:Wert;
Fuer Wert einen oder mehrere Werte zu margin-top, margin-bottom, margin-left und margin-right notieren.
Eine Angabe = alle vier Raender des Elements erhalten den gleichen Aussenabstand.
Zwei Angaben = erste fuer oben/unten, zweite fuer rechts/links.
Drei Angaben = erste fuer oben, zweite fuer rechts/links, dritte fuer unten.
Vier Angaben = erste fuer oben, zweite fuer rechts, dritte fuer unten, vierte fuer links.
CSS-Eigenschaften: Innenabstand
Innenabstand oben
padding-top:Wert;
Fuer Wert einen numerischen Wert wie 3px oder 15pt notieren.
Innenabstand unten
padding-bottom:Wert;
Fuer Wert einen numerischen Wert wie 0.7cm oder 3em notieren.
Innenabstand links
padding-left:Wert;
Fuer Wert einen numerischen Wert wie 30px oder 1.4cm notieren.
Innenabstand rechts
padding-right:Wert;
Fuer Wert einen numerischen Wert wie 25mm oder 0.4in notieren.
Innenabstand (allgemein)
padding:Wert;
Fuer Wert einen numerische Angabe wie 20px oder 0.4cm notieren.
Alle vier Seiten des Elements erhalten den gleichen Innenabstand.
CSS-Eigenschaften: Rahmen
Rahmendicke
border-width:Wert; /* alle Seiten */
border-top-width:Wert; /* nur oben */
border-bottom-width:Wert; /* nur unten */
border-left-width:Wert; /* nur links */
border-right-width:Wert; /* nur rechts */
Fuer Wert einen numerischen Wert wie 2px oder 1mm oder einen der folgenden Werte notieren:
thin = duenn.
medium = mittelstark.
thick = dick.
Rahmenfarbe
border-color:Wert; /* alle Seiten */
border-top-color:Wert; /* nur oben */
border-bottom-color:Wert; /* nur unten */
border-left-color:Wert; /* nur links */
border-right-color:Wert; /* nur rechts */
Fuer Wert eine Farbangabe wie #FFCC99, red oder rgb(96,255,0) notieren.
Rahmentyp
border-style:Wert; /* alle Seiten */
border-top-style:Wert; /* nur oben */
border-bottom-style:Wert; /* nur unten */
border-left-style:Wert; /* nur links */
border-right-style:Wert; /* nur rechts */
Fuer Wert einen der folgenden Werte notieren:
none = kein Rahmen (bzw. unsichtbarer Rahmen).
hidden = kein Rahmen (bzw. unsichtbarer Rahmen),
dotted = gepunktet.
dashed = gestrichelt.
solid = durchgezogen.
double = doppelt durchgezogen.
groove = 3D-Effekt.
ridge = 3D-Effekt.
inset = 3D-Effekt.
outset = 3D-Effekt.
Rahmen
border:Wert; /* alle Seiten */
border-top:Wert; /* nur oben */
border-bottom:Wert; /* nur unten */
border-left:Wert; /* nur links */
border-right:Wert; /* nur rechts */
Fuer Wert jeweils drei Angaben mit geeigneten Werten fuer border-style, border-width
und border-color mit Leerzeichen dazwischen notieren.
z.B. border:3px solid #FFCC99; oder border-bottom:1cm inset red;.
CSS-Eigenschaften: Hintergrundfarben und -bilder
Hintergrundfarbe
background-color:Wert;
Fuer Wert eine Farbangabe wie #0000CC, fuchsia oder rgb(50%,60%,80%) notieren.
Hintergrundbild
background-image:url(URI);
Fuer URI eine Web-Adresse oder ein Ziel mit oder ohne Pfad angeben, wo sich die
gewuenschte Grafikdatei (GIF oder JPEG) befindet.
Wiederholungs-Effekt
background-image:url(URI); background-repeat:Wert;
Fuer Wert einen der folgenden Werte notieren.
repeat = wiederholen (Voreinstellung).
repeat-x = nur "eine Zeile lang" waagerecht wiederholen.
repeat-y = nur "eine Spalte lang" senkrecht wiederholen.
no-repeat = nicht wiederholen, nur als Einzelbild anzeigen.
Wasserzeichen-Effekt
background-image:url(URI); background-attachment:Wert;
Fuer Wert einen der folgenden Werte notieren:
scroll = mitscrollen (Voreinstellung).
fixed = Hintergrundbild bleibt stehen.
Hintergrundposition
background-image:url(URI); background-position:Wert;
Fuer Wert entweder zwei numerische Angaben zur Bestimmung der linken oberen
Startecke bezogen auf die linke obere Elementecke notieren, z.B. 10px 30px.
Oder fuer Wert einen der folgenden Werte notieren:
top = vertikal obenbuendig.
center = horizontal zentriert.
center = vertikal mittig.
bottom = vertikal untenbuendig.
left = horizontal linksbuendig.
right = horizontal rechtsbuendig.
Hintergrund (allgemein)
background:Wert;
Fuer Wert eine zusammenfassende Angabe aus background-image, background-repeat,
background-attachment und background-position notieren.
z.B. background:url(../bilder/background.gif) repeat-x fixed;
Listenformatierung
Darstellungstyp
list-style-type:Wert;
Fuer Wert einen der folgenden Werte notieren:
decimal = fuer ol-Listen: Nummerierung 1.,2.,3.,4. usw.
lower-roman = fuer ol-Listen: Nummerierung i.,ii.,iii.,iv. usw.
upper-roman = fuer ol-Listen: Nummerierung I.,II.,III.,IV. usw.
lower-alpha = fuer ol-Listen: Nummerierung a.,b.,c.,d. usw.
upper-alpha = fuer ol-Listen: Nummerierung A.,B.,C.,D. usw.
lower-greek = fuer ol-Listen: Nummerierung griechisch: a., ss., ?., d. usw.
hebrew = fuer ol-Listen: Nummerierung hebraeisch
decimal-leading-zero = fuer ol-Listen: Nummerierung 01.,02.,03.,04., ... 98.,99. usw.
cjk-ideographic = fuer ol-Listen: Nummerierung mit ideographischen Zeichen
hiragana = fuer ol-Listen: Nummerierung in Japanisch (a, i, u, e, o, ka, ki, ... )
katakana = fuer ol-Listen: Nummerierung in Japanisch (A, I, U, E, O, KA, KI, ... )
hiragana-iroha = fuer ol-Listen: Nummerierung in Japanisch (i, ro, ha, ni, ho, he, to, ... )
katakana-iroha = fuer ol-Listen: Nummerierung in Japanisch (I, RO, HA, NI, HO, HE, TO, ... )
disc = fuer ul-Listen: Dateisymbol als Bullet-Zeichen.
circle = fuer ul-Listen: rundes Bullet-Zeichen.
square = fuer ul-Listen: rechteckiges Bullet-Zeichen.
none = kein Bullet-Zeichen, keine Nummerierung.
Listeneinrueckung
list-style-position:Wert;
Fuer Wert einen der folgenden Werte notieren:
inside = eingerueckt.
outside = ausgerueckt (Voreinstellung).
eigene Bullet-Grafik
list-style-image:url(URI);
Fuer URI eine Web-Adresse oder ein Ziel mit oder ohne Pfad angeben, wo sich die
gewuenschte Grafikdatei (GIF oder JPEG) befindet.
Listendarstellung (allgemein)
list-style:Wert;
Fuer Wert eine zusammenfassende Angabe aus list-style-type, list-style-position und
list-style-image notieren. Angaben durch Leerzeichen trennen.
z.B. list-style:lower-roman inside;
CSS-Eigenschaften: Tabellenformatierung
Ausrichtung Tabellenueberschrift
caption-side:Wert;
Bezieht sich sinnvollerweise auf das caption-Element. Fuer Wert einen der folgenden Werte notieren:
top = oberhalb der Tabelle.
bottom = unterhalb der Tabelle.
left = links neben der Tabelle.
right = rechts neben der Tabelle.
Fixe/variable Breiten
table-layout:Wert;
Bezieht sich sinnvollerweise auf das table-Element. Fuer Wert einen der folgenden Werte notieren.
fixed = Breitenangaben haben Vorrang vor dem Zelleninhalt (Inhalt wird zur Not abgeschnitten).
auto = Zelleninhalt hat Vorrang vor Breitenangaben (Voreinstellung).
Rahmenmodell
border-collapse:Wert;
Bezieht sich sinnvollerweise auf das table-Element. Fuer Wert einen der folgenden Werte notieren.
separate = Zellenrahmen fallen nicht zusammen.
collapse = Zellenrahmen fallen zusammen.
Rahmenabstand Gitternetz
border-spacing:Wert;
Bezieht sich sinnvollerweise auf das table-Element. Fuer Wert eine numerische
Angabe wie 3mm oder 10px notieren.
Anzeige leerer Zellen
empty-cells:Wert;
Bezieht sich sinnvollerweise auf das table-Element. Fuer Wert einen der folgenden Werte notieren:
show = Zellenrahmen leerer Tabellenzellen werden angezeigt.
hide = Zellenrahmen leerer Tabellenzellen werden unterdrueckt (Voreinstellung).
Sprachausgabeunterstuetzung
speak-header-cell:Wert;
Bezieht sich sinnvollerweise auf das th-Element. Fuer Wert einen der folgenden Werte notieren:
always = Kopfzelleninhalt bei jeder untergeordneten Datenzelle wiederholen.
once = Kopfzelleninhalt nur einmal wiedergeben (Normaleinstellung).
CSS-Eigenschaften: Positionierung und Anzeige von Elementen
Positionsart
position:Wert;
Fuer Wert einen der folgenden Werte notieren.
absolute = absolute Positionierung, gemessen am Rand des naechsthoeheren Elternelements,
das nicht die Normaleinstellung position:static hat. Scrollt mit.
fixed = absolute Positionierung, gemessen am "Viewport", d.h. am Browserfenster. Bleibt beim Scrollen stehen.
relative = relative Positionierung, gemessen an der Normalposition oder Anfangsposition des Elements selbst.
static = keine spezielle Positionierung, normaler Elementfluss (Normaleinstellung).
Startposition von oben
top:Wert;
In Verbindung mit absoluter oder relativer Positionierung fuer Wert eine numerische Angabe wie 100px oder 2cm notieren.
Startposition von links
left:Wert;
In Verbindung mit absoluter oder relativer Positionierung fuer Wert eine numerische Angabe wie 18mm oder 30px notieren.
Startposition von unten
bottom:Wert;
In Verbindung mit absoluter oder relativer Positionierung fuer Wert eine numerische Angabe wie 150px oder 1in notieren.
Startposition von rechts
right:Wert;
In Verbindung mit absoluter oder relativer Positionierung fuer Wert eine numerische Angabe wie 4.5cm oder 300px notieren.
Breite
width:Wert;
Fuer Wert eine numerische Angabe wie 120mm oder 580px oder auto (Voreinstellung) notieren.
Mindestbreite
min-width:Wert;
Fuer Wert eine numerische Angabe wie 400px oder 3cm notieren.
Maximalbreite
max-width:Wert;
Fuer Wert eine numerische Angabe wie 600px oder 3.8in notieren. Sinnvoll in Verbindung mit overflow:
Hoehe
height:Wert;
Fuer Wert eine numerische Angabe wie 300px oder 4cm oder auto (Voreinstellung) notieren.
Mindesthoehe
min-height:Wert;
Fuer Wert eine numerische Angabe wie 35mm oder 500px notieren.
Maximalhoehe
max-height:Wert;
Fuer Wert eine numerische Angabe wie 250px oder 1cm notieren. Sinnvoll in Verbindung mit overflow:
Elementbereich mit uebergrossem Inhalt
overflow:Wert;
Fuer Wert einen der folgenden Werte notieren:
visible = Element wird so weit ausgedehnt, dass sein Inhalt auf jeden Fall komplett sichtbar ist.
hidden = Element wird abgeschnitten, wenn es die Grenzen ueberschreitet.
scroll = Element wird abgeschnitten, wenn es die Grenzen ueberschreitet. Der WWW-Browser sollte jedoch Scroll-Leisten anbieten, aehnlich wie in einem eingebetteten Frame-Fenster.
auto = Der Web-Browser soll entscheiden, wie das Element im Konfliktfall angezeigt wird. Auch das Anbieten von Scroll-Leisten soll dabei erlaubt sein.
Schriftrichtung
direction:Wert;
Fuer Wert einen der folgenden Werte notieren:
ltr = von links nach rechts.
rtl = von rechts nach links.
Textumfluss
float:Wert;
Fuer Wert einen der folgenden Werte notieren:
left = Element steht links und wird rechts davon von nachfolgenden Elementen umflossen.
right = Element steht rechts und wird links davon von nachfolgenden Elementen umflossen.
none = Kein Umfluss (Normaleinstellung).
Fortsetzung bei Textumfluss
clear:Wert;
Fuer Wert einen der folgenden Werte notieren:
left = Erzwingt bei float:left die Fortsetzung unterhalb.
right = Erzwingt bei float:right die Fortsetzung unterhalb.
both = Erzwingt in jedem Fall die Fortsetzung unterhalb.
none = Erzwingt keine Fortsetzung unterhalb. (Normaleinstellung).
Schichtposition bei Ueberlappung
z-index:Wert;
Sinnvoll bei absolut positionierten Elementen, die sich ueberlappen. Fuer Wert eine Zahl notieren.
Je hoeher die Zahl, desto weiter vorne das Element, je niedriger, desto weiter hinten das Element.
Anzeigeart ohne Platzhalter
display:Wert;
Fuer Wert einen der folgenden Werte notieren.
block = Erzwingt einen Block - das Element erzeugt eine neue Zeile.
inline = Erzwingt die Anzeige im Text - das Element wird im laufenden Textfluss angezeigt.
list-item = wie block, jedoch mit einem Aufzaehlungszeichen (Bullet) davor.
marker = deklariert automatisch generierten Text fuer das Element.
run-in und compact = bewirken, dass das Element kontext-abhaengig als Block-Element
oder als Inline-Element dargestellt wird.
none = Element wird nicht angezeigt und es wird auch kein Platzhalter freigelassen.
Ferner - fuer Tabellen aus Nicht-Tabellen-Elementen (z.B. bei XML):
table = Das Element enthaelt tabellarisch angeordnete Kindelemente und erzeugt eine neue Zeile.
Wirkt wie das table-Element in HTML.
inline-table = Das Element enthaelt tabellarisch angeordnete Kindelemente und wird im laufenden
Textfluss angezeigt. Wirkt wie das table-Element in HTML, aber inline.
table-row = Das Element enthaelt nebeneinander angeordnete Kindelemente. Wirkt wie das tr-Element in HTML.
table-row-group = Das Element enthaelt eine Gruppe von Elementen mit nebeneinander angeordneten
Kindelementen. Wirkt wie das tbody-Element in HTML.
table-header-group = Das Element enthaelt eine Gruppe von Elementen mit nebeneinander angeordneten
Kindelementen. Wirkt wie das thead-Element in HTML.
table-footer-group = Das Element enthaelt eine Gruppe von Elementen mit nebeneinander angeordneten
Kindelementen. Wirkt wie das tfoot-Element in HTML.
table-column = Das Element steht fuer eine Gruppe von Elementen, die eine Spalte der Tabelle bilden.
Wirkt wie das col-Element in HTML.
table-column-group = Das Element steht fuer eine Gruppe von Elementen mit der Eigenschaft table-cell.
Wirkt wie das colgroup-Element in HTML.
table-cell = Das Element steht fuer eine Tabellenzelle. Wirkt wie das td-Element in HTML (auch fuer th-Elemente).
table-caption = Das Element steht fuer eine Tabellenueberschrift. Wirkt wie das caption-Element in HTML.
Anzeigeart mit Platzhalter
visibility:Wert;
Fuer Wert einen der folgenden Werte notieren:
hidden = Der Inhalt des Element wird zunaechst versteckt (nicht angezeigt).
visible = Der Inhalt des Element wird zunaechst angezeigt (Normaleinstellung).
Anzeigebereich eingrenzen
clip:rect(Wert1 Wert2 Wert3 Wert4);
Fuer Wert1 Wert fuer "oben", gemessen an der oberen Elementgrenze, notieren, z.B. 0px
Fuer Wert2 Wert fuer "rechts", gemessen an der linken Elementgrenze, notieren, z.B. 130px
Fuer Wert3 Wert fuer "unten", gemessen an der oberen Elementgrenze, notieren, z.B. 130px
Fuer Wert4 Wert fuer "links", gemessen an der linken Elementgrenze, notieren, z.B. 0px
CSS-Eigenschaften: Anzeigefenster
Cursor
cursor:Wert;
Zugeordnetes Element erhaelt beim Ueberfahren mit der Maus einen anderen Cursor.
Fuer Wert einen der folgenden Werte notieren:
auto = automatischer Cursor (Normaleinstellung).
default = Plattformunabhaengiger Standard-Cursor.
crosshair = Cursor in Form eines einfachen Fadenkreuzes.
pointer = Cursor in Form eines Zeigers.
move = Cursor in Form eines Kreuzes, das die Faehigkeit zum Bewegen des Elements signalisiert.
n-resize = Cursor in Form Pfeils, der nach oben zeigt (n = Norden).
ne-resize = Cursor in Form Pfeils, der nach rechts oben zeigt (ne = Nordost).
e-resize = Cursor in Form Pfeils, der nach rechts zeigt (e = Osten).
se-resize = Cursor in Form Pfeils, der nach rechts unten zeigt (se = Suedost).
s-resize = Cursor in Form Pfeils, der nach unten zeigt (s = Sueden).
sw-resize = Cursor in Form Pfeils, der nach links unten zeigt (sw = Suedwest).
w-resize = Cursor in Form Pfeils, der nach links zeigt (w = Westen).
nw-resize = Cursor in Form Pfeils, der nach links oben zeigt (nw = Nordwest).
text = Cursor in einer Form, die normalen Text symbolisiert.
wait = Cursor in Form eines Symbols, das einen Wartezustand signalisiert.
help = Cursor in Form Symbols, das Hilfe zu dem Element signalisiert.
url([URI]) = Beliebiger Cursor, URI sollte eine GIF- oder JPG-Grafik sein.
Scrollbar (Internet Explorer, Konqueror und Opera)
scrollbar-base-color:Wert;
scrollbar-3dlight-color:Wert;
scrollbar-arrow-color:Wert;
scrollbar-darkshadow-color:Wert;
scrollbar-face-color:Wert;
scrollbar-highlight-color:Wert;
scrollbar-shadow-color:Wert;
scrollbar-track-color:Wert;
Anwendbar auf die Elemente body und textarea. Fuer Wert eine Farbangabe wie #0000CC,
fuchsia oder rgb(50%,60%,80%) notieren.
Es bedeuten:
scrollbar-base-color = Basisfarbe der Scroll-Leiste
scrollbar-3dlight-color = Farbe fuer 3D-Effekte
scrollbar-arrow-color = Farbe fuer Verschiebepfeile
scrollbar-darkshadow-color = Farbe fuer Schatten
scrollbar-face-color = Farbe fuer Oberflaeche
scrollbar-highlight-color = Farbe fuer oberen und linken Rand
scrollbar-shadow-color = Farbe fuer unteren und rechten Rand
scrollbar-track-color = Farbe fuer freibleibenden Verschiebeweg