CSS Referenzliste

Text

Eigenschaft Werte Beschreibung
color color Setz Schriftfarbe
direction ltr
rtl		 Setzt Textrichtung (left to right, right to left)
letter-spacing normal
Länge		 Vergrößert oder verringert Abstand zwischen den Buchstaben
text-align left
right
center
justify		 Ausrichtung des Textes
text-decoration none
underline
overline
line-through
blink		 Gibt dem Text Dekoration (durchstreichen, obere Linie oder unten etc.)
text-indent Länge
%		 Einrückung der ersten Zeile
text-shadow none
Farbe
Länge		 Text Schatten
text-transform none
capitalize
uppercase
lowercase		 Kontrolliert die Buchstaben eines Elements (Kapitälchen, Großschreibung, Kleinschreibung)
white-space normal
pre
nowrap		 Legt das Verhalten für Zeilenumbruch fest (normal = automatischer Zeilenumbruch; pre= wie in Editor angegeben; nowrap = kein automatischer Zeilenumbruch, nur durch HTML Tags)
word-spacing normal
Länge		 Vergrößert oder Verkleinert Abstand zwischen Wörtern

Schrift

Eigenschaft Werte Beschreibung
font
 font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar		 Kurzeigenschaft um alle Werte für Font aufeinmal zu setzen.
font-family
 family-name
generic-family		 Schriftartsetzung (können auch mehrere sein)
font-size
 xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
Größe
%		 Setzt Schriftgröße (angaben auch in Punkt [pt] und Pixel [px])
font-stretch normal
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded		 Setzt Schriftlaufweite
font-style
 normal
italic
oblique		 Setzt Schriftstil (kursiv)
font-variant
 normal
small-caps		 Zeigt Schrift als Kapitälchen oder normal an.
font-weight
 normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900		 Setzt Schriftdicke

Hintergrund

Eigenschaft Werte Beschreibung
background background-color
background-image
background-repeat background-attachment background-position		 Kurzeigenschaft um alle Werte für background aufeinmal zu setzen.
background-attachment scroll
fixed		 Entscheidet ob Hintergrundbild mitscrollt oder fix bleibt.
background-color color-rgb
color-hex
color-name
transparent		 Setzt Hintergrundfarbe
background-image url
none		 Setzt bild als Hintergrund (z.B.: background-image: url(bild.jpg); )
background-position top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos		 Gibt an wo Bild anfangen soll (Hintergrundbild kann immer mittig ausgesetzt werden egal wie groß die Bildschirmauflösung ist)
background-repeat repeat
repeat-x
repeat-y
no-repeat		 Gibt an OB bzw. WIE Bild wiederholt wird.

Tabelle

Eigenschaft Werte Beschreibung
border-collapse collapse
separate		 Gibt an ob Zellen inenander übergehen oder einzeln gehandelt werden sollen.
border-spacing length length Abstand der Rahmen in einer Tabelle
caption-side top
bottom
left
right		 Tabellenüberschrift kann ausgerichtet werden.
empty-cells show
hide		 Macht Zellen ohne Inhalt unsichtbar/sichtbar (nur bei border-collapse: separate;)
table-layout auto
fixed		 Beeinflusst Tabellenanzeigen bei Breitenangaben

Border

Eigenschaft Werte Beschreibung
border border-width
border-style
border-color		 Zusammenfassende Eigenschaften um alle 4 Ränder mit demselben Wert zu versehen.
border-bottom border-bottom-width
border-style
border-color		 Zusammenfassende Eigenschaft um die Untere Linie mit einem Wert zu versehen
border-bottom-color border-color Setzt Farbe der unteren Linie
border-bottom-style border-style Setzt Stil der unteren Linie
border-bottom-width thin
medium
thick
length		 Setzt Breite der unteren Linie
border-color color Setzt Farben aller 4 Ränder, kann 4 verschiedene Angaben haben.
border-left border-left-width
border-style
border-color		 Zusammenfassende Eigenschaften um linken Rand werden mit demselben Wert zu versehen.
border-left-color border-color Setzt Farbe der linken Linie
border-left-style border-style Setzt Stil der linken Linie
border-left-width thin
medium
thick
length		 Setzt Breite der linken Linie
border-right border-right-width
border-style
border-color		 Zusammenfassende Eigenschaften um rechten Rand werden mit demselben Wert zu versehen.
border-right-color border-color Setzt Farbe der rechten Linie
border-right-style border-style Setzt Stil der rechten Linie
border-right-width thin
medium
thick
length		 Setzt Breite der rechten Linie
border-style none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset		 Sezt Stil der 4 Ränder, kann bis zu 4 verschiedene Eigenschaften haben.
border-top border-top-width
border-style
border-color		 Zusammenfassende Eigenschaften um oberen Rand werden mit demselben Wert zu versehen.
border-top-color border-color Setzt Farbe der oberen Linie
border-top-style border-style Setzt Stil der oberen Linie
border-top-width thin
medium
thick
length		 Setzt Breite der oberen Linie
border-width thin
medium
thick
length		 Sezt Breite der 4 Ränder, kann bis zu 4 verschiedene Eigenschaften haben.

Margin

Eigenschaft Werte Beschreibung
margin margin-top
margin-right
margin-bottom
margin-left		 Zusammenfassende Eigenschaft um Seitenränder aufeinmal zu setzen.

margin-bottom

auto
length
%		 Setzt unteren Seitenrandes eines Elementes.

margin-left

auto
length
%		 Setzt linken Seitenrandes eines Elementes.

margin-right

auto
length
%		 Setzt rechten Seitenrandes eines Elementes.
margin-top auto
length
%		 Setzt oberen Seitenrandes eines Elementes.

Padding

Eigenschaft Werte Beschreibung
padding padding-top
padding-right
padding-bottom
padding-left		 Zusammenfassende Eigenschaft um Innenabstand aufeinmal zu setzen.

padding-bottom

 length
%		 Setzt unteren Innenabstand eines Elementes.

padding-left

 length
%		 Setzt linken Innenabstand eines Elementes.

padding-right

 length
%		 Setzt rechten Innenabstand eines Elementes.
padding-top length
%		 Setzt oberen Innenabstand eines Elementes.

Positionierung

Eigenschaft Werte Beschreibung
bottom auto
%
length		 Bestimmt wo ein Element von Unten beginnt.
clip shape
auto		 Grenzt den Anzeigebereich eines Elementes ein.
left auto
%
length		 Bestimmt wo ein Element von links beginnt.
overflow
 visible
hidden
scroll
auto		 Gibt an was passiert wenn ein Element größer ist als das in dem es steckt.
right auto
%
length		 Bestimmt wo ein Element von rechts beginnt.
top auto
%
length		 Bestimmt wo von oben ein Element beginnt.
vertical-align baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%		 Setzt die Vertikale Ausrichtung eines Elementes.
z-index auto
number		 Gibt Ebenennummer an in der Elemtent liegt (bei Überlappung)

Klassifikationen

Eigenschaft Werte Beschreibung
clear left
right
both
none		 Kann Umfluss unterbrechen, und unter dem umflossenen Elementes fortsetzen.
cursor url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help		 Spezifiziert die Mauszeiger Darstellung.
display none
inline
block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption		 Setzt wie/ob ein Element angezeigt wird.
float left
right
none		 Setzt wo ein Bild oder text in einem anderen Element aufscheint.
position static
relative
absolute
fixed		 Plaziert ein Element in einer Statischen, relativen, absoluten oder fixierten Position.
visibility visible
hidden
collapse		 Bestimmt ob ein Element sichtbar oder unsichtbar sein soll.

Dimension

Eigenschaft Werte Beschreibung
height auto
length
%		 Gibt die Höhe eines Elements an.
line-height normal
number
length
%		 Setzt den Abstand zwischen den Zeilen
max-height none
length
%		 Setzt die maximale Höhe eines Elementes.
max-width none
length
%		 Setzt die maximale Breite eines Elementes.
min-height length
%		 Setzt die minimale Höhe eines Elementes.
min-width length
%		 Setzt die minimale Breite eines Elementes.
width auto
%
length  		 Setzt die Breite eines Elementes.

Generierter Inhalt

Eigenschaft Werte Beschreibung
content string
url
counter(name)
counter(name, list-style-type)
counters(name, string)
counters(name, string, list-style-type)
attr(X)
open-quote
close-quote
no-open-quote
no-close-quote		 Generiert den Inhalt eines Dokuments. Wird mit den Pseudo-Elementen :before und :after verwendet.
counter-increment none
identifier number		 Zählt den Zähler hoch.
counter-reset none
identifier number		 Setzt den Zähler auf den Anfangswert (1) zurück.

Listen und Marker

Eigenschaft Werte Beschreibung
list-style list-style-type
list-style-position
list-style-image		 Zusammenfassende Eigenschaft um alle Werte einer Liste zu deklarieren.
list-style-image none
url		 Einbinden eines eigenen Aufzählungszeichens (z.B.: list-style-image: url(aufzaehler.gif); )
list-style-position inside
outside		 Gibt an wie die Zeileneinrückung passieren soll.
list-style-type none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha 		 Setzt Art der Aufzählungszeichen.

Outlines

Eigenschaft Werte Beschreibung
outline outline-color
outline-style
outline-width		 Zusammenfassende Eigenschaft um alle Werte der outlines zu deklarieren.
outline-color color
invert		 Setzt die Farbe einer Linie um ein Element.
outline-style none
dotted
dashed
solid
double
groove
ridge
inset
outset		 Setzt den Stil einer Linie un ein Element.
outline-width thin
medium
thick
length		 Setzt dei Breite einer Line um ein Element.

Pseudoelemente

Eigenschaft Werte Beschreibung
:link   Links zu noch nicht besuchten Seiten - in Verbindung mit a (also a:link, a:visited, a:hover, a:active, a:focus)
:visited   Links zu bereits besuchten Seiten
:hover   Beim über-den Link fahren
:active   Wenn Link gerade geklickt wird
:focus   Für dinge die Fokus erhalten (zB durch Tabulatoren)
:first-line   Erste Textzeile des Elements enthält CSS Eigenschaft (z.B.: p:first-line)
:first-letter   Erster Buchstabe des Elements enthält CSS Eigenschaft (z.B.: p:first-letter)
:first-child   Erstes Kindelement bekommt die Eigenschaft (z.B.: div p:first-child)

Nicht-valide Eigenschaften (nur Microsoft)

Eigenschaft Werte Beschreibung
scrollbar-base-color color Basisfarbe der Scrolleiste.
scrollbar-3dlight-color color Farbe für 3D-Effekt.
scrollbar-arrow-color color Pfeilfarbe.
scrollbar-darkshadow-color color Schattenfarbe.
scrollbar-face-color color Oberflächenfarbe.
scrollbar-highlight-color color Farbe für oberen und linken Rand.
scrollbar-shadow-color color Farbe für unteren und rechten Rand.
scrollbar-track-color color Farbe für Freibleibenden Weg der Scrollbar.
filter:Alpha() opacity
finishopacity
style
startx
starty
finishx
finishy		 Vordergrund/Hintergrund verschmelzen
Angabe z.B.: filter:Alpha(opacity=100, finishopacity=0, style=2) (ebenso bei anderen Filtern)
filter:Blur() add
direction
strength		 Verwisch Effekt
filter:Chroma() color Transparenzfarbe
filter:DropShadow() color
offx
offy
positive
Schatten
filter:FlipH() - Horizontal spiegeln
filter:FlipV() - Vertikal spielgen
filter:Glow() color
strength		 Glühender Rand
filter:Gray() - Graustufen
filter:Invert() - Invertieren
filter:Mask() color Transparenzmaske
filter:Shadow() color
direction		 Schatten
filter:Wave() freq
light
phase
strength
add		 Wellenartige Störung
filter:XRay() - Negativ-Effekt