# Kurzreferenz: CSS

Hinweis
Maßeinheiten und Farbangaben
Zentrale Formate
Direktformatierung von Elementen
CSS-Eigenschaften: Schriftformatierung
CSS-Eigenschaften: Ausrichtung/Absatzkontrolle
CSS-Eigenschaften: Außenrand/Abstand
CSS-Eigenschaften: Innenabstand
CSS-Eigenschaften: Rahmen
CSS-Eigenschaften: Hintergrundfarben und -bilder
CSS-Eigenschaften: Listenformatierung
CSS-Eigenschaften: Tabellenformatierung
CSS-Eigenschaften: Positionierung und Anzeige von Elementen
CSS-Eigenschaften: Anzeigefenster

## Hinweis

Die CSS-Kurzreferenz ist nicht für Anfänger geeignet! Die Kurzreferenz richtet sich an Anwender, die sich mit CSS auskennen und eine allgemeine Syntax-Übersicht für wichtige und praxisrelevante Sprachbestandteile haben wollen (die Kurzreferenz erhebt keinen Anspruch auf Vollständigkeit). Die Kurzreferenz eignet sich als Navigationshilfe. Von den Kurzbeschreibungen führen Verweise vom Typ Beschreibung direkt zu den ausführlichen Beschreibungen innerhalb der Dokumentation.

## Maßeinheiten und Farbangaben

Numerische Angaben absolut | `pt` | Punkt. Typografische Maßeinheit. 1 Punkt entspricht 1/72 Inches. | Beschreibung
`pc` | Pica. Typografische Maßeinheit. 1 Pica entspricht 12 Punkt.
`in` | Inch. 1 Inch entspricht 2.54 Zentimetern. Dezimalzeichen für Nachkommazahlen ist der Punkt.
`mm` | Millimeter.
`cm` | Zentimeter. Dezimalzeichen für Nachkommazahlen ist der Punkt.
Numerische Angaben relativ | `em` | Relativ zur Schriftgröße des Elements. Bei Anwendung auf Schriftgröße relativ zur Schriftgröße des Elternelements. Dezimalzeichen für Nachkommazahlen ist der Punkt. | Beschreibung
`ex` | Relativ zur Höhe des Buchstabens `x`. Bei Anwendung auf Schriftgröße relativ zur Höhe des Buchstabens `x` im Elternelement. Dezimalzeichen für Nachkommazahlen ist der Punkt.
`px` | Pixel. Relativ von Ausgabegerät zu Ausgabegerät, absolut an ein und demselben Ausgabegerät.
`%` | Prozent. Je nach CSS-Eigenschaft relativ zur elementeigenen Größe, oder zu der des Elternelements, oder zu einem allgemeineren Kontext.
Farbangaben | `#rrggbb` | Hexadezimale RGB-Angabe wie bei HTML. | Beschreibung
`#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 für Elemente | `Element { CSS-Eigenschaft:Wert; ...}`
Für `Element` den Namen eines HTML-Elements wie `h1` oder `td` oder `*` ("alle Elemente") notieren. Für `CSS-Eigenschaft` eine Eigenschaft wie `font-size` oder `background-color` notieren. Für `Wert` einen jeweils erlaubten Wert notieren. Beliebig viele Notierungen von `CSS-Eigenschaft:Wert;` innerhalb der geschweiften Klammern möglich. Beschreibung
Formate für verschachtelte Elemente | `Element1 Element2 { CSS-Eigenschaft:Wert; ...} Element1 > Element2 { CSS-Eigenschaft:Wert; ...} Element1 * Element2 { CSS-Eigenschaft:Wert; ...} Element1 + Element2 { CSS-Eigenschaft:Wert; ...}`

Für `Element1` und `Element2` so etwas notieren wie `h3` und `var`.
Formatdefinitionen gelten dann für `var`-Elemente innerhalb von `h3`-Elementen.
Oder für `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.
Beschreibung

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; ...}`

Für `Element` ein HTML-Element wie z.B. `a` oder `td` oder `*` ("alle Elemente") notieren.
Für `Attributname` so etwas wie `href` oder `align` notieren.
`a[href=index.htm]` trifft z.B. auf Elemente mit `<a href="index.htm"> </a>` zu.
`img[alt~=Hamburg]` trifft z.B. auf Elemente mit `<img src="bild.jpg" alt="Blick vom Michel auf Hamburg">` zu.
`p[lang|=en]` trifft z.B. auch auf Elemente mit `<p lang="en-US">...</p>` zu.
Beschreibung

Formate für Klassen | `Element.Klassenname { CSS-Eigenschaft:Wert; ...} *.Klassenname { CSS-Eigenschaft:Wert; ...} .Klassenname { CSS-Eigenschaft:Wert; ...} .KlassennameA.KlassennameB { CSS-Eigenschaft:Wert; ...}`

Für `Element` ein HTML-Element wie z.B. `strong` oder `table` oder `*` ("alle Elemente") notieren. Der Stern kann auch entfallen.
Für `Klassenname` einen Namen notieren.
Trifft auf HTML-Elemente mit `<Element class="Klassenname">...</Element>` zu.
`.gross` trifft z.B. auf `<p class="gross">...</p>` zu.
`.KlassennameA.KlassennameB` trifft z.B. auf `<p class="KlassennameA KlassennameB">...</p>` zu.
Beschreibung

Individualformate | `#Name { CSS-Eigenschaft:Wert; ...} Element#Name { CSS-Eigenschaft:Wert; ...}`
Für `Name` einen Namen notieren. Trifft auf HTML-Elemente mit `<Element id="Name">...</Element>` zu. `#Kopf` trifft z.B. auf `<div id="Kopf">...</div>` zu. Für `Element` ein HTML-Element wie z.B. `h2` oder `pre` notieren. `p#Kopf` trifft z.B. auf `<p id="Kopf">...</p>` zu, nicht aber auf `<div id="Kopf">...</div>`. Beschreibung

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 einfügen */
Element:after { content:Wert; } /* nach dem Element einfügen */
`

`:link` und `:visited` sind nur bei `a`-Elementen (Verweisen) möglich, `:hover`, `:active` und `:focus` auch bei anderen Elementen und Individualformaten.
Beschreibung
Bei `content:Wert` für `Wert` in Anführungszeichen einen statischen Text notieren, oder `url(URI)`, wobei `URI` eine Grafik referenzieren kann, oder `open-quote` und `close-quote` für Anführungszeigen, oder eine automatische Nummerierung wie folgt:
`content:counter(Name); counter-increment(Name);`
Dabei für `Name` einen Namen für den Zähler notieren.
Beschreibung

## Direktformatierung von Elementen

CSS in HTML-Elementen | `<Element style="CSS-Eigenschaft:Wert; ...">...</Element>`
Für `Element` den Namen eines HTML-Elements wie `p` oder `table` oder `blockquote` notieren. Für `CSS-Eigenschaft` eine Eigenschaft wie `font-size` oder `background-color` notieren. Für `Wert` einen jeweils erlaubten Wert notieren. Beliebig viele Notierungen von `CSS-Eigenschaft:Wert;` innerhalb des `style`-Attributs möglich. Beschreibung

## CSS-Eigenschaften: Schriftformatierung

Schriftart | `font-family:Schriftart1,Schriftart2,...;`
Für `Schriftart1` den Namen gewünschten Schriftart notieren. Für `Schriftart2` und weitere die Namen von Alternativschriftarten notieren. Beschreibung
Schriftstil | `font-style:Wert;`
Für `Wert` einen der folgenden Werte notieren: `italic` = Schriftstil kursiv. `oblique` = Schriftstil kursiv. `normal` = normaler Schriftstil. Beschreibung
Schriftvariante | `font-variant:Wert;`
Für `Wert` einen der folgenden Werte notieren: `small-caps` = Kapitälchen. `normal` = normale Schriftvariante. Beschreibung
Schriftgröße | `font-size:Wert;`
Für `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` = groß. `x-large` = sehr groß. `xx-large` = riesig. `smaller` = sichtbar kleiner als normal. `larger` = sichtbar größer als normal. Beschreibung
Schriftgewicht | `font-weight:Wert;`
Für `Wert` einen der folgenden Werte notieren: `bold` = fett. `bolder` = extrafett. `lighter` = dünner. `100,200,300,400,500,600,700,800,900` = extra-dünn (`100`) bis extrafett (`900`). `normal` = normales Schriftgewicht. Beschreibung
Schriftlaufweite | `font-stretch:Wert;`

Für `Wert` einen der folgenden Werte notieren:
`wider` = weiter als normal.
`narrower` = enger als normal.
`condensed` = gedrängt.
`semi-condensed` = halb gedrängt.
`extra-condensed` = stark gedrängt.
`ultra-condensed` = extrastark gedrängt.
`expanded` = geweitet.
`semi-expanded` = halb geweitet.
`extra-expanded` = stark geweitet.
`ultra-expanded` = extrastark geweitet.
`normal` = normale Laufweite.
Beschreibung

Schrift (allgemein) | `font:Wert;`
Für `Wert` eine Mischung aus erlaubten Werten für `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;` Beschreibung
Wortabstand | `word-spacing:Wert;`
Für `Wert` eine numerische Angabe wie `0.2em` oder `4px` notieren, jedoch keine Prozentwerte. Beschreibung
Zeichenabstand | `letter-spacing:Wert;`
Für `Wert` eine numerische Angabe wie `0.1em` oder `2px` notieren, jedoch keine Prozentwerte. Beschreibung
Textdekoration | `text-decoration:Wert;`
Für `Wert` einen der folgenden Werte notieren: `underline` = unterstrichen. `overline` = überstrichen. `line-through` = durchgestrichen. `blink` = blinkend. `none` = normal (keine Text-Dekoration). Beschreibung
Text-Transformation | `text-transform:Wert;`
Für `Wert` einen der folgenden Werte notieren: `capitalize` = Wortanfänge als Großbuchstaben. `uppercase` = Nur Großbuchstaben. `lowercase` = Nur Kleinbuchstaben. `none` = normal (keine Text-Transformation). Beschreibung
Textfarbe | `color:Wert;`
Für `Wert` eine Farbangabe wie `#FFCC99`, `red` oder `rgb(96,255,0)` notieren. Beschreibung

## CSS-Eigenschaften: Ausrichtung/Absatzkontrolle

Texteinrückung | `text-indent:Wert;`
Für `Wert` eine numerische Angabe wie z.B. `20px` oder `2.5cm` notieren. Beschreibung
Zeilenhöhe | `line-height:Wert;`
Für `Wert` eine numerische Angabe wie z.B. `20px` oder `120%` notieren. Prozentangaben beziehen sich auf die Schriftgröße. Beschreibung
Vertikale Ausrichtung | `vertical-align:Wert;`

Für `Wert` einen der folgenden Werte notieren:
`top` = obenbündig ausrichten.
`middle` = mittig ausrichten.
`bottom` = untenbündig ausrichten.
`baseline` = an der Basislinie ausrichten (oder untenbündig, wenn es keine Basislinie gibt).
`sub` = tieferstellen (ohne die Schriftgröße zu reduzieren).
`super` = höherstellen (ohne die Schriftgröße zu reduzieren).
`text-top` = am oberen Schriftrand ausrichten.
`text-bottom` = am unteren Schriftrand ausrichten.
Beschreibung

Horizontale Ausrichtung | `text-align:Wert;`
Für `Wert` einen der folgenden Werte notieren: `left` = linksbündig ausrichten (Voreinstellung). `center` = zentriert ausrichten. `right` = rechtsbündig ausrichten. `justify` = als Blocksatz ausrichten. Beschreibung
Textumbruch | `white-space:Wert;`
Für `Wert` einen der folgenden Werte notieren: `normal` = automatischer Zeilenumbruch (wie bei allen HTML-Elementen außer `pre` und `nowrap`). `pre` = Zeilenumbruch wie im Editor eingegeben (so wie beim `pre`-Element). `nowrap` = Kein automatischer Zeilenumbruch, Umbruch möglich durch entsprechende HTML-Tags. Beschreibung

## CSS-Eigenschaften: Außenrand/Abstand

Außenrand/Abstand oben | `margin-top:Wert;`
Für `Wert` einen numerischen Wert wie `2.3cm` oder `24pt` notieren. Beschreibung
Außenrand/Abstand unten | `margin-bottom:Wert;`
Für `Wert` einen numerischen Wert wie `30px` oder `25mm` notieren. Beschreibung
Außenrand/Abstand links | `margin-left:Wert;`
Für `Wert` einen numerischen Wert wie `1.2cm` oder `40px` notieren. Beschreibung
Außenrand/Abstand rechts | `margin-right:Wert;`
Für `Wert` einen numerischen Wert wie `1.25cm` oder `65px` notieren. Beschreibung
Außenrand/Abstand (allgemein) | `margin:Wert;`

Für `Wert` einen oder mehrere Werte zu `margin-top`, `margin-bottom`, `margin-left` und `margin-right` notieren.
Eine Angabe = alle vier Ränder des Elements erhalten den gleichen Außenabstand.
Zwei Angaben = erste für oben/unten, zweite für rechts/links.
Drei Angaben = erste für oben, zweite für rechts/links, dritte für unten.
Vier Angaben = erste für oben, zweite für rechts, dritte für unten, vierte für links.
Beschreibung

## CSS-Eigenschaften: Innenabstand

Innenabstand oben | `padding-top:Wert;`
Für `Wert` einen numerischen Wert wie `3px` oder `15pt` notieren. Beschreibung
Innenabstand unten | `padding-bottom:Wert;`
Für `Wert` einen numerischen Wert wie `0.7cm` oder `3em` notieren. Beschreibung
Innenabstand links | `padding-left:Wert;`
Für `Wert` einen numerischen Wert wie `30px` oder `1.4cm` notieren. Beschreibung
Innenabstand rechts | `padding-right:Wert;`
Für `Wert` einen numerischen Wert wie `25mm` oder `0.4in` notieren. Beschreibung
Innenabstand (allgemein) | `padding:Wert;`
Für `Wert` einen numerische Angabe wie `20px` oder `0.4cm` notieren. Alle vier Seiten des Elements erhalten den gleichen Innenabstand. Beschreibung

## 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 */`
Für `Wert` einen numerischen Wert wie `2px` oder `1mm` oder einen der folgenden Werte notieren: `thin` = dünn. `medium` = mittelstark. `thick` = dick. Beschreibung
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 */`
Für `Wert` eine Farbangabe wie `#FFCC99`, `red` oder `rgb(96,255,0)` notieren. Beschreibung
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 */`
Für `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. Beschreibung
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 */`
Für `Wert` jeweils drei Angaben mit geeigneten Werten für `border-style`, `border-width` und `border-color` mit Leerzeichen dazwischen notieren. z.B. `border:3px solid #FFCC99;` oder `border-bottom:1cm inset red;`. Beschreibung

## CSS-Eigenschaften: Hintergrundfarben und -bilder

Hintergrundfarbe | `background-color:Wert;`
Für `Wert` eine Farbangabe wie `#0000CC`, `fuchsia` oder `rgb(50%,60%,80%)` notieren. Beschreibung
Hintergrundbild | `background-image:url(URI);`
Für `URI` eine Web-Adresse oder ein Ziel mit oder ohne Pfad angeben, wo sich die gewünschte Grafikdatei (GIF oder JPEG) befindet. Beschreibung
Wiederholungs-Effekt | `background-image:url(URI); background-repeat:Wert;`
Für `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. Beschreibung
Wasserzeichen-Effekt | `background-image:url(URI); background-attachment:Wert;`
Für `Wert` einen der folgenden Werte notieren: `scroll` = mitscrollen (Voreinstellung). `fixed` = Hintergrundbild bleibt stehen. Beschreibung
Hintergrundposition | `background-image:url(URI); background-position:Wert;`

Für `Wert` entweder zwei numerische Angaben zur Bestimmung der linken oberen Startecke bezogen auf die linke obere Elementecke notieren,
z.B. `10px 30px`.
Oder für `Wert` einen der folgenden Werte notieren:
`top` = vertikal obenbündig.
`center` = horizontal zentriert.
`center` = vertikal mittig.
`bottom` = vertikal untenbündig.
`left` = horizontal linksbündig.
`right` = horizontal rechtsbündig.
Beschreibung

Hintergrund (allgemein) | `background:Wert;`
Für `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;` Beschreibung

## Listenformatierung

Darstellungstyp | `list-style-type:Wert;`

Für `Wert` einen der folgenden Werte notieren:
`decimal` = für `ol`-Listen: Nummerierung 1.,2.,3.,4. usw.
`lower-roman` = für `ol`-Listen: Nummerierung i.,ii.,iii.,iv. usw.
`upper-roman` = für `ol`-Listen: Nummerierung I.,II.,III.,IV. usw.
`lower-alpha` = für `ol`-Listen: Nummerierung a.,b.,c.,d. usw.
`upper-alpha` = für `ol`-Listen: Nummerierung A.,B.,C.,D. usw.
`lower-greek` = für `ol`-Listen: Nummerierung griechisch: α., β., γ., δ. usw.
`hebrew` = für `ol`-Listen: Nummerierung hebräisch
`decimal-leading-zero` = für `ol`-Listen: Nummerierung 01.,02.,03.,04., ... 98.,99. usw.
`cjk-ideographic` = für `ol`-Listen: Nummerierung mit ideographischen Zeichen
`hiragana` = für `ol`-Listen: Nummerierung in Japanisch (a, i, u, e, o, ka, ki, ... )
`katakana` = für `ol`-Listen: Nummerierung in Japanisch (A, I, U, E, O, KA, KI, ... )
`hiragana-iroha` = für `ol`-Listen: Nummerierung in Japanisch (i, ro, ha, ni, ho, he, to, ... )
`katakana-iroha` = für `ol`-Listen: Nummerierung in Japanisch (I, RO, HA, NI, HO, HE, TO, ... )
`disc` = für `ul`-Listen: Dateisymbol als Bullet-Zeichen.
`circle` = für `ul`-Listen: rundes Bullet-Zeichen.
`square` = für `ul`-Listen: rechteckiges Bullet-Zeichen.
`none` = kein Bullet-Zeichen, keine Nummerierung.
Beschreibung

Listeneinrückung | `list-style-position:Wert;`
Für `Wert` einen der folgenden Werte notieren: `inside` = eingerückt. `outside` = ausgerückt (Voreinstellung). Beschreibung
eigene Bullet-Grafik | `list-style-image:url(URI);`
Für `URI` eine Web-Adresse oder ein Ziel mit oder ohne Pfad angeben, wo sich die gewünschte Grafikdatei (GIF oder JPEG) befindet. Beschreibung
Listendarstellung (allgemein) | `list-style:Wert;`
Für `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;` Beschreibung

## CSS-Eigenschaften: Tabellenformatierung

Ausrichtung Tabellenüberschrift | `caption-side:Wert;`
Bezieht sich sinnvollerweise auf das `caption`-Element. Für `Wert` einen der folgenden Werte notieren: `top` = oberhalb der Tabelle. `bottom` = unterhalb der Tabelle. `left` = links neben der Tabelle. `right` = rechts neben der Tabelle. Beschreibung
Fixe/variable Breiten | `table-layout:Wert;`
Bezieht sich sinnvollerweise auf das `table`-Element. Für `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). Beschreibung
Rahmenmodell | `border-collapse:Wert;`
Bezieht sich sinnvollerweise auf das `table`-Element. Für `Wert` einen der folgenden Werte notieren. `separate` = Zellenrahmen fallen nicht zusammen. `collapse` = Zellenrahmen fallen zusammen. Beschreibung
Rahmenabstand Gitternetz | `border-spacing:Wert;`
Bezieht sich sinnvollerweise auf das `table`-Element. Für `Wert` eine numerische Angabe wie `3mm` oder `10px` notieren. Beschreibung
Anzeige leerer Zellen | `empty-cells:Wert;`
Bezieht sich sinnvollerweise auf das `table`-Element. Für `Wert` einen der folgenden Werte notieren: `show` = Zellenrahmen leerer Tabellenzellen werden angezeigt. `hide` = Zellenrahmen leerer Tabellenzellen werden unterdrückt (Voreinstellung). Beschreibung
Sprachausgabeunterstützung | `speak-header-cell:Wert;`
Bezieht sich sinnvollerweise auf das `th`-Element. Für `Wert` einen der folgenden Werte notieren: `always` = Kopfzelleninhalt bei jeder untergeordneten Datenzelle wiederholen. `once` = Kopfzelleninhalt nur einmal wiedergeben (Normaleinstellung). Beschreibung

## CSS-Eigenschaften: Positionierung und Anzeige von Elementen

Positionsart | `position:Wert;`

Für `Wert` einen der folgenden Werte notieren.
`absolute` = absolute Positionierung, gemessen am Rand des nächsthöheren 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).
Beschreibung

Startposition von oben | `top:Wert;`
In Verbindung mit absoluter oder relativer Positionierung für `Wert` eine numerische Angabe wie `100px` oder `2cm` notieren. Beschreibung
Startposition von links | `left:Wert;`
In Verbindung mit absoluter oder relativer Positionierung für `Wert` eine numerische Angabe wie `18mm` oder `30px` notieren. Beschreibung
Startposition von unten | `bottom:Wert;`
In Verbindung mit absoluter oder relativer Positionierung für `Wert` eine numerische Angabe wie `150px` oder `1in` notieren. Beschreibung
Startposition von rechts | `right:Wert;`
In Verbindung mit absoluter oder relativer Positionierung für `Wert` eine numerische Angabe wie `4.5cm` oder `300px` notieren. Beschreibung
Breite | `width:Wert;`
Für `Wert` eine numerische Angabe wie `120mm` oder `580px` oder `auto` (Voreinstellung) notieren. Beschreibung
Mindestbreite | `min-width:Wert;`
Für `Wert` eine numerische Angabe wie `400px` oder `3cm` notieren. Beschreibung
Maximalbreite | `max-width:Wert;`
Für `Wert` eine numerische Angabe wie `600px` oder `3.8in` notieren. Sinnvoll in Verbindung mit `overflow:` Beschreibung
Höhe | `height:Wert;`
Für `Wert` eine numerische Angabe wie `300px` oder `4cm` oder `auto` (Voreinstellung) notieren. Beschreibung
Mindesthöhe | `min-height:Wert;`
Für `Wert` eine numerische Angabe wie `35mm` oder `500px` notieren. Beschreibung
Maximalhöhe | `max-height:Wert;`
Für `Wert` eine numerische Angabe wie `250px` oder `1cm` notieren. Sinnvoll in Verbindung mit `overflow:` Beschreibung
Elementbereich mit übergroßem Inhalt | `overflow:Wert;`

Für `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 überschreitet.
`scroll` = Element wird abgeschnitten, wenn es die Grenzen überschreitet. Der WWW-Browser sollte jedoch Scroll-Leisten anbieten, ähnlich 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.
Beschreibung

Schriftrichtung | `direction:Wert;`
Für `Wert` einen der folgenden Werte notieren: `ltr` = von links nach rechts. `rtl` = von rechts nach links. Beschreibung
Textumfluss | `float:Wert;`
Für `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). Beschreibung
Fortsetzung bei Textumfluss | `clear:Wert;`
Für `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). Beschreibung
Schichtposition bei Überlappung | `z-index:Wert;`
Sinnvoll bei absolut positionierten Elementen, die sich überlappen. Für `Wert` eine Zahl notieren. Je höher die Zahl, desto weiter vorne das Element, je niedriger, desto weiter hinten das Element. Beschreibung
Anzeigeart ohne Platzhalter | `display:Wert;`

Für `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 Aufzählungszeichen (Bullet) davor.
`marker` = deklariert automatisch generierten Text für das Element.
`run-in` und `compact` = bewirken, dass das Element kontext-abhängig als Block-Element oder als Inline-Element dargestellt wird.
`none` = Element wird nicht angezeigt und es wird auch kein Platzhalter freigelassen.
Ferner - für Tabellen aus Nicht-Tabellen-Elementen (z.B. bei XML):
`table` = Das Element enthält tabellarisch angeordnete Kindelemente und erzeugt eine neue Zeile. Wirkt wie das `table`-Element in HTML.
`inline-table` = Das Element enthält tabellarisch angeordnete Kindelemente und wird im laufenden Textfluss angezeigt. Wirkt wie das `table`-Element in HTML, aber inline.
`table-row` = Das Element enthält nebeneinander angeordnete Kindelemente. Wirkt wie das `tr`-Element in HTML.
`table-row-group` = Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Wirkt wie das `tbody`-Element in HTML.
`table-header-group` = Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Wirkt wie das `thead`-Element in HTML.
`table-footer-group` = Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Wirkt wie das `tfoot`-Element in HTML.
`table-column` = Das Element steht für eine Gruppe von Elementen, die eine Spalte der Tabelle bilden. Wirkt wie das `col`-Element in HTML.
`table-column-group` = Das Element steht für eine Gruppe von Elementen mit der Eigenschaft table-cell. Wirkt wie das `colgroup`-Element in HTML.
`table-cell` = Das Element steht für eine Tabellenzelle. Wirkt wie das `td`-Element in HTML (auch für `th`-Elemente).
`table-caption` = Das Element steht für eine Tabellenüberschrift. Wirkt wie das `caption`-Element in HTML.
Beschreibung

Anzeigeart mit Platzhalter | `visibility:Wert;`
Für `Wert` einen der folgenden Werte notieren: `hidden` = Der Inhalt des Element wird zunächst versteckt (nicht angezeigt). `visible` = Der Inhalt des Element wird zunächst angezeigt (Normaleinstellung). Beschreibung
Anzeigebereich eingrenzen | `clip:rect(Wert1 Wert2 Wert3 Wert4);`
Für `Wert1` Wert für "oben", gemessen an der oberen Elementgrenze, notieren, z.B. `0px` Für `Wert2` Wert für "rechts", gemessen an der linken Elementgrenze, notieren, z.B. `130px` Für `Wert3` Wert für "unten", gemessen an der oberen Elementgrenze, notieren, z.B. `130px` Für `Wert4` Wert für "links", gemessen an der linken Elementgrenze, notieren, z.B. `0px` Beschreibung

## CSS-Eigenschaften: Anzeigefenster

Cursor | `cursor:Wert;`

Zugeordnetes Element erhält beim Überfahren mit der Maus einen anderen Cursor. Für `Wert` einen der folgenden Werte notieren:
`auto` = automatischer Cursor (Normaleinstellung).
`default` = Plattformunabhängiger Standard-Cursor.
`crosshair` = Cursor in Form eines einfachen Fadenkreuzes.
`pointer` = Cursor in Form eines Zeigers.
`move` = Cursor in Form eines Kreuzes, das die Fähigkeit 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 = Südost).
`s-resize` = Cursor in Form Pfeils, der nach unten zeigt (s = Süden).
`sw-resize` = Cursor in Form Pfeils, der nach links unten zeigt (sw = Südwest).
`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.
Beschreibung

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`. Für `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 für 3D-Effekte
`scrollbar-arrow-color` = Farbe für Verschiebepfeile
`scrollbar-darkshadow-color` = Farbe für Schatten
`scrollbar-face-color` = Farbe für Oberfläche
`scrollbar-highlight-color` = Farbe für oberen und linken Rand
`scrollbar-shadow-color` = Farbe für unteren und rechten Rand
`scrollbar-track-color` = Farbe für freibleibenden Verschiebeweg
Beschreibung

| Inhaltsverzeichnis
| Kurzreferenz: HTML

© 2007 Impressum