Teil von SELFHTML Teil von Navigationshilfen
SELFHTML

Kurzreferenz: CSS
Informationsseite

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

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 Seite Beschreibung direkt zu den ausführlichen Beschreibungen innerhalb der Dokumentation.

nach obennach unten

Maßeinheiten und Farbangaben

Numerische Angaben
absolut

 pt Punkt. Typografische Maßeinheit. 1 Punkt entspricht 1/72 Inches. Seite 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. Seite 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. Seite 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%)

 

nach obennach unten

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.
Seite 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.
Seite 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.
Seite 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.
Seite 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>.
Seite 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.
Seite 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.
Seite Beschreibung
 

 

nach obennach unten

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.
Seite Beschreibung
 

 

nach obennach unten

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.
Seite Beschreibung
 

Schriftstil

 font-style:Wert;
Für Wert einen der folgenden Werte notieren:
italic = Schriftstil kursiv.
oblique = Schriftstil kursiv.
normal = normaler Schriftstil.
Seite Beschreibung
 

Schriftvariante

 font-variant:Wert;
Für Wert einen der folgenden Werte notieren:
small-caps = Kapitälchen.
normal = normale Schriftvariante.
Seite 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.
Seite 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.
Seite 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.
Seite 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;
Seite Beschreibung
 

Wortabstand

 word-spacing:Wert;
Für Wert eine numerische Angabe wie 0.2em oder 4px notieren, jedoch keine Prozentwerte.
Seite Beschreibung
 

Zeichenabstand

 letter-spacing:Wert;
Für Wert eine numerische Angabe wie 0.1em oder 2px notieren, jedoch keine Prozentwerte.
Seite 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).
Seite 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).
Seite Beschreibung
 

Textfarbe

 color:Wert;
Für Wert eine Farbangabe wie #FFCC99, red oder rgb(96,255,0) notieren.
Seite Beschreibung
 

 

nach obennach unten

CSS-Eigenschaften: Ausrichtung/Absatzkontrolle

Texteinrückung

 text-indent:Wert;
Für Wert eine numerische Angabe wie z.B. 20px oder 2.5cm notieren.
Seite 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.
Seite 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.
Seite 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.
Seite 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.
Seite Beschreibung
 

 

nach obennach unten

CSS-Eigenschaften: Außenrand/Abstand

Außenrand/Abstand
oben

 margin-top:Wert;
Für Wert einen numerischen Wert wie 2.3cm oder 24pt notieren.
Seite Beschreibung
 

Außenrand/Abstand
unten

 margin-bottom:Wert;
Für Wert einen numerischen Wert wie 30px oder 25mm notieren.
Seite Beschreibung
 

Außenrand/Abstand
links

 margin-left:Wert;
Für Wert einen numerischen Wert wie 1.2cm oder 40px notieren.
Seite Beschreibung
 

Außenrand/Abstand
rechts

 margin-right:Wert;
Für Wert einen numerischen Wert wie 1.25cm oder 65px notieren.
Seite 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.
Seite Beschreibung
 

 

nach obennach unten

CSS-Eigenschaften: Innenabstand

Innenabstand oben

 padding-top:Wert;
Für Wert einen numerischen Wert wie 3px oder 15pt notieren.
Seite Beschreibung
 

Innenabstand unten

 padding-bottom:Wert;
Für Wert einen numerischen Wert wie 0.7cm oder 3em notieren.
Seite Beschreibung
 

Innenabstand links

 padding-left:Wert;
Für Wert einen numerischen Wert wie 30px oder 1.4cm notieren.
Seite Beschreibung
 

Innenabstand rechts

 padding-right:Wert;
Für Wert einen numerischen Wert wie 25mm oder 0.4in notieren.
Seite 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.
Seite Beschreibung
 

 

nach obennach unten

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.
Seite 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.
Seite 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.
Seite 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;.
Seite Beschreibung
 

 

nach obennach unten

CSS-Eigenschaften: Hintergrundfarben und -bilder

Hintergrundfarbe

 background-color:Wert;
Für Wert eine Farbangabe wie #0000CC, fuchsia oder rgb(50%,60%,80%) notieren.
Seite 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.
Seite 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.
Seite 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.
Seite 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.
Seite 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;
Seite Beschreibung
 

 

nach obennach unten

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.
Seite Beschreibung
 

Listeneinrückung

 list-style-position:Wert;
Für Wert einen der folgenden Werte notieren:
inside = eingerückt.
outside = ausgerückt (Voreinstellung).
Seite 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.
Seite 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;
Seite Beschreibung
 

 

nach obennach unten

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.
Seite 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).
Seite 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.
Seite Beschreibung
 

Rahmenabstand
Gitternetz

 border-spacing:Wert;
Bezieht sich sinnvollerweise auf das table-Element. Für Wert eine numerische Angabe wie 3mm oder 10px notieren.
Seite 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).
Seite 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).
Seite Beschreibung
 

 

nach obennach unten

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).
Seite Beschreibung
 

Startposition
von oben

 top:Wert;
In Verbindung mit absoluter oder relativer Positionierung für Wert eine numerische Angabe wie 100px oder 2cm notieren.
Seite Beschreibung
 

Startposition
von links

 left:Wert;
In Verbindung mit absoluter oder relativer Positionierung für Wert eine numerische Angabe wie 18mm oder 30px notieren.
Seite Beschreibung
 

Startposition
von unten

 bottom:Wert;
In Verbindung mit absoluter oder relativer Positionierung für Wert eine numerische Angabe wie 150px oder 1in notieren.
Seite 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.
Seite Beschreibung
 

Breite

 width:Wert;
Für Wert eine numerische Angabe wie 120mm oder 580px oder auto (Voreinstellung) notieren.
Seite Beschreibung
 

Mindestbreite

 min-width:Wert;
Für Wert eine numerische Angabe wie 400px oder 3cm notieren.
Seite Beschreibung
 

Maximalbreite

 max-width:Wert;
Für Wert eine numerische Angabe wie 600px oder 3.8in notieren. Sinnvoll in Verbindung mit overflow:
Seite Beschreibung
 

Höhe

 height:Wert;
Für Wert eine numerische Angabe wie 300px oder 4cm oder auto (Voreinstellung) notieren.
Seite Beschreibung
 

Mindesthöhe

 min-height:Wert;
Für Wert eine numerische Angabe wie 35mm oder 500px notieren.
Seite Beschreibung
 

Maximalhöhe

 max-height:Wert;
Für Wert eine numerische Angabe wie 250px oder 1cm notieren. Sinnvoll in Verbindung mit overflow:
Seite 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.
Seite Beschreibung
 

Schriftrichtung

 direction:Wert;
Für Wert einen der folgenden Werte notieren:
ltr = von links nach rechts.
rtl = von rechts nach links.
Seite 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).
Seite 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).
Seite 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.
Seite 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.
Seite 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).
Seite 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
Seite Beschreibung
 

 

nach obennach unten

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.
Seite 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
Seite Beschreibung
 

 
 nach oben
weiter Seite Inhaltsverzeichnis
zurück Seite Kurzreferenz: HTML
 
Teil von SELFHTML Teil von Navigationshilfen

© 2007 Seite Impressum