5. CSS-Referenz

Schrift Eigenschaft + Wert Mögliche Werte
Schriftart font-family: "Comis Sans MS"; Arial, Times New Roman, etc.
Schriftgrösse font-size: 26px; numerischer Wert (pt, px, em)
Schriftgewicht font-weight: bold; normal, bold, bolder, lighter
Kursiv- und Schrägschrift font-style: italic; normal, oblique, italic
Kurzform font: italic bold 26px Arial;
Schriftfarbe color: #ff6600; yellow, red oder Hexadezimalwert
Text Eigenschaft + Wert Mögliche Werte
Horizontale Textausrichtung text-align: right; left, right, center, justify
Vertikale Textausrichtung vertical-align: top;
vertical-align: middle; 
vertical-align: bottom; 
vertical-align: baseline; 
vertical-align: sub; 
vertical-align: super; 
vertical-align: text-top; 
vertical-align: text-bottom;
oben bündig
mittig
unten bündig
ausrichten an Basislinie
tieferstellen
höherstellen
am oberen Schriftrand
am unteren Schriftrand
Unter-, Über- und Durchstreichen text-decoration: underline; underline, overline, line-through
Gross-/Kleinschreibung erzwingen text-transform: uppercase; uppercase, lowercase, capitalize
Textschatten text-shadow: gray 3px 3px 5px; Farbe & numerischer Wert (pt, px, em)
Zeichenabstand letter-spacing: 3px; numerischer Wert (pt, px, em)
Wortabstand word-spacing: 5px; numerischer Wert (pt, px, em)
Zeilenabstand line-height: 10px; numerischer Wert (pt, px, em)
Texteinrückung text-indent: 20px; numerischer Wert (pt, px, em)
Zeilenumbruch wie im HTML-Editor eingegeben bei: white-space: pre; white-space: pre; normal = autom. Umbruch pre = Umbruch wie im Editor nowrap = Kein autom.Umbruch
Kommentar /* Kommentar */ Kommentar
Hintergrund Eigenschaft + Wert Mögliche Werte
Hintergrundfarbe background-color: #ff6600; yellow, red oder Hexadezimalwert
Hintergrundbild background-image: url(bilder/bild.gif); Ort und Name des Bildes
Hintergrundbild fixieren, wenn mit der Maus gescrollt wird. background-attachment: fixed; fixed
Hintergrundbild positionieren background-position: 10px 20px; Die Grafik wird 100px von links und 20px von oben platziert.
Hintergrundbild einmal oder wiederholt anzeigen background-repeat: repeat;
background-repeat: repeat-y;
background-repeat: repeat-x;
background-repeat: no-repeat;
wiederholen
senkrecht wiederholen
waagerecht wiederholen
nur einmal anzeigen
Kurzform background: url(bilder/bild.gif) red repeat-x 100px 20px fixed; image color repeat position attachment
Listen Eigenschaft + Wert Mögliche Werte
Aussehen der Listenzeichen list-style-type: decimal; Für ol-Listen:
decimal = 1.,2.,3.,4.
lower-roman = i.,ii.,iii.,iv.
upper-roman = I.,II.,III.,IV.
lower-alpha = f a.,b.,c.,d.
upper-alpha = A.,B.,C.,D.

Für ul-Listen:
disc = gefüllter Kreis
disc = gefüllter Kreis
disc = gefüllter Kreis
disc = gefüllter Kreis
Grafik als Zeichen für Aufzählungslisten bestimmen list-style-image:url(bilder/Aufzaehlung.jpg); Ort und Name des Bildes
Listeneinrückung list-style-position:outside; inside = eingerückt.
outside = ausgerückt (Standard)
Positionsart bestimmen position: static;
position: relative;
position: absolute;
position: fixed;
static = (Standard)

relative = gemessen an der Anfangsposition des Elements selbst.

absolute = gemessen am Rand des nächsthöheren Vorfahrenelements, das nicht die Standardeinstellung position: static aufweist.

fixed = bleibt beim Scrollen stehen.
Bestimmen für ein Element, dass nachfolgende Elemente dieses Element umfliessen. float: left;
float: right;
left = Element links wird rechts von nachfolgenden Elementen umflossen.

right = Element rechts wird links von nachfolgenden Elementen umflossen.
Umfluss abbrechen und die Fortsetzung unterhalb des umflossenen Elements erzwingen. clear:left;
clear:right;
clear:both;
left = gilt für Elemente mit clear:left

right = gilt für Elemente mit clear:right

both = gilt in jedem Fall
Beginn eines absolut oder relativ positioniertes Elements. top: 180px;
left: 180px;
right: 180px;
bottom: 180px;
180 Pixel von oben
180 Pixel von links
180 Pixel von rechts
180 Pixel von unten
Reihenfolge von überlappenden Elementen bestimmen. z-index: 1;
z-index: 2;
1, 2, 3, 4, 5, usw.
Wie sollen übergrosse innere Elemente dargestellt werden. overflow: hidden; = Abgeschnitten
overflow: scroll; = Scroll-Leisten
overflow: visible; = Sichtbar
Anzeige von Elementen unterdrücken oder die Art der Anzeige festlegen. display: block;
display: inline;
display: none;
Element erzeugt eine neue Zeile.
Element wird im Textfluss angezeigt.
Element wird nicht angezeigt.
Element anzeigen oder nicht visibility: visible;
visibility: hidden;
visibility: collapse;
visible = sichtbar
hidden = versteckt
collapse = Spalten oder Zeilen einer Tabelle werden versteckt.