CSS Eigenschaften

Verschiedene (bedeutende)

color
Setzt die Farbe der enthaltenen Schrift
FARBWERT | inherit
opacity
Setzt die Gesamt-Transparenz von einem Objekt, und seinen Inhalten.
Kommazahl von 0 bis 1
content
Wird zusammen mit :before and :after Pseudo-Element verwendet, um dort einzufügenen Inhalt zu generieren.
normal | none | inherit | attr(identifier) | TEXT
cursor
Bestimmt das Bild des Mousezeiger beim Hover.
auto | croshair | default | pointer | move | wait | help | progress | u.a.

Hintergrund

background
Kurzform für die diversen "background-" Eigenschaften. Es dürfen alle erlaubten Werte der verschiedenen Eigenschaften in unterschiedlicher Reihenfolge mit Leerzeichen getrennt eingetragen werden.
auto | croshair | default | pointer | move | wait | help | progress | u.a.
background-attachment
Bestimmt ob der Hintergrund mitscrollen darf.
scroll | fixed | inherit
background-color
Bestimmt die Hintergrundfarbe des Elementes.
FARBWERT | inherit
background-image
Bestimmt ein Bild, welches im Element als Hintergrund gezeigt werden soll.
URL | none | inherit
background-position
Bestimmt die Position eines Hintergrundbildes, und benötigt zwei mit Leerzeichen getrennte Angaben (oder ein inherit), horizontale und vertikale Startposition.
MAßANGABE | left | center | right UND MAßANGABE | top | center | bottom
background-repeat
Bestimmt wie das Hintergrundbild wiederholt wird.
repeat | repeat-x | repeat-y | no-repeat | inherit
background-clip
Bestimmt für welche Bereiche des Box-Models der Hintergrund gesetzt werden soll (kumulativ).
border-box | padding-box | content-box | initial | inherit
background-origin
Bestimmt in welchen Bereich des Box-Models das Hintergrundbild positioniert werden soll.
padding-box | border-box | content-box | initial | inherit
background-size
Bestimmt wie große das Hintergrundbild angezeigt werden soll.
auto | 1 oder 2 MAßANGABEN für Breite & Länge | cover | contain | initial | inherit

Rahmen

border
Bestimmt die Rahmeneigenschaften in Einem.
border-width border-style border-color | initial | inherit
border-bottom
Bestimmt die Rahmeneingenschaften in Einem, für den unteren Rahmen.
border-width border-style border-color | initial | inherit
border-bottom-color
Bestimmt die Farbe der unteren Linie.
FARBWERT | transparent | initial | inherit
border-bottom-left-radius
Bestimmt den Radius der Ecke links unten.
LÄNGE | initial | inherit
border-bottom-right-radius
Bestimmt den Radius der Ecke rechts unten.
LÄNGE | initial | inherit
border-bottom-style
Bestimmt die Linienart des unteren Rahmen.
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit
border-bottom-width
Bestimmt die Breite des unteren Rahmen
medium | thin | thick | LÄNGE | initial | inherit
border-color
Berstimmt die Farbe des Rahmens für alle Seiten
FARBWERT | transparent | initial | inherit
border-image
Setzt alle border-image-* Eigenschaften gleichzeitig
source slice width outset repeat | initial | inherit
border-image-outset
Bestimmt das Offset des Rahmenbildes
length | number | initial | inherit
border-image-repeat
Bestimmt ob das Rahmenbild wiederholt oder gedehnt wird
stretch | repeat | round | initial | inherit
border-image-slice
Bstimmt wie das Bild für den Rahmenbereiche zerschnitten werden soll.
LÄNGE | fill | initial | inherit
border-image-source
Bestimmt die Bildquelle für den Rahmen
none | image | initial | inherit
border-image-width
Bestimmt die Breite des Bildrahmens (genauso wie border-width)
LÄNGE | auto | initial | inherit
border-left
Bestimmt die Eigenschaften für den linken Rahmen
border-width border-style border-color | initial | inherit
border-left-color
Bestimmt die Farbe der linken Linie.
FARBWERT | transparent | initial | inherit
border-left-style
Bestimmt die Linienart des linken Rahmen.
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit
border-left-width
Bestimmt die Breite des linken Rahmen
medium | thin | thick | LÄNGE | initial | inherit
border-radius
Bestimmt den Radius aller Ecken des Rahmen
1-2-4 LÄNGEN | initial | inherit
border-right
Bestimmt die Eigenschaften für den linken Rahmen
border-width border-style border-color | initial | inherit
border-right-color
Bestimmt die Farbe der rechten Linie.
FARBWERT | transparent | initial | inherit
border-right-style
Bestimmt die Linienart des rechten Rahmen.
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit
border-right-width
Bestimmt die Breite des rechten Rahmen
medium | thin | thick | LÄNGE | initial | inherit
border-style
Bestimmt die Linienart des Rahmens für alle Seiten.
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit
border-top
Bestimmt die Eigenschaften für den linken Rahmen
border-width border-style border-color | initial | inherit
border-top-color
Bestimmt die Farbe der oberen Linie.
FARBWERT | transparent | initial | inherit
border-top-left-radius
Bestimmt den Radius der Ecke links oben.
LÄNGE | initial | inherit
border-top-right-radius
Bestimmt den Radius der Ecke rechts oben.
LÄNGE | initial | inherit
border-top-style
Bestimmt die Linienart des oberen Rahmen.
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit
border-top-width
Bestimmt die Breite des oberen Rahmen
medium | thin | thick | LÄNGE | initial | inherit
border-width
Bestimmt die Breite des Rahmen jeder Seite
medium | thin | thick | LÄNGE | initial | inherit
box-decoration-break
Bestimmt das Verhalten von Rahmen und Hintergrund von Boxen die geteilt werden (z.B. Umbruch).
clone | slice
box-shadow
Bestimmt ob eine Box einen Schatten werfen soll, und wie dieser aussehen soll.
none | h-shadow v-shadow blur spread color inset | initial | inherit

Box(-Model)-Eigenschaften & Position

box-sizing
Bestimmt ob bei Größenangaben Rahmen und Innenabstand mitzählen
content-box | border-box | initial | inherit
bottom
Positioniert von unten gesehen mit angegebenen Abstand
auto | LÄNGE | initial | inherit
left
Positioniert von links gesehen mit angegebenen Abstand
auto | LÄNGE | initial | inherit
right
Positioniert von rechts gesehen mit angegebenen Abstand
auto | LÄNGE | initial | inherit
top
Positioniert von oben gesehen mit angegebenen Abstand
auto | LÄNGE | initial | inherit
clear
Bestimmt auf welcher Seite dieses Elementes kein float erlaubt ist.
none | left | right | both | initial | inherit
clip
Stellt ein absolute positioniertes Element frei, Angabe erfolgt über ein Rechteck (px), welches oben links anfängt.
auto | rect (top, right, bottom, left) | initial | inherit
display
Bestimmt ob das Element dargestellt werden soll, und wenn, dann verschiedene Box-Eigenschaften
inline | block | flex | inline-block | inline-flex | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit
float
Bestimmt ob ein Element floated (sich links oder rechts ausrichtet)
none | left | right | initial | inherit
height
Bestimmt die Höhe eines Elementes
auto | LÄNGE | initial | inherit
margin
Bestimmt alles Außenabstände (margin-*) auf einmal
LÄNGEN | auto | initial | inherit
margin-bottom
Bestimmt den unteren Außenabstand
LÄNGE | auto | initial | inherit
margin-left
Bestimmt den linken Außenabstand
LÄNGE | auto | initial | inherit
margin-right
Bestimmt den rechten Außenabstand
LÄNGE | auto | initial | inherit
margin-top
Bestimmt den oberen Außenabstand
LÄNGE | auto | initial | inherit
max-height
Bestimmt die maximale Höhe eines Elementes
none | LÄNGE | initial | inherit
max-width
Bestimmt die maximale Breite eines Elementes
none | LÄNGE | initial | inherit
min-height
Bestimmt die minimale Höhe eines Elementes
none | LÄNGE | initial | inherit
min-width
Bestimmt die minimale Breite eines Elementes
none | LÄNGE | initial | inherit
overflow
Bestimmt ob der Inhalt sichtbar über die Abmaße des Elementes bleibt
visible | hidden | scroll | auto | initial | inherit
overflow-x
Wie overflow, aber nur für die Breite
visible | hidden | scroll | auto | initial | inherit
overflow-y
Wie overflow, aber nur für die Höhe
visible | hidden | scroll | auto | initial | inherit
padding
Bestimmt den Innenabstand für alle Seiten
LÄNGE | initial | inherit
padding-bottom
Bestimmt den Innenabstand für die untere Seite
LÄNGE | initial | inherit
padding-left
Bestimmt den Innenabstand für die linke Seite
LÄNGE | initial | inherit
padding-right
Bestimmt den Innenabstand für die rechteSeite
LÄNGE | initial | inherit
padding-top
Bestimmt den Innenabstand für die obere Seite
LÄNGE | initial | inherit
position
Bestimmt die Positionierungmethode des Elementes
static | absolute | fixed | relative | initial | inherit
visibility
Bestimmt ob ein Element sichtbar ist (aber behält einen Platzhalter)
visible | hidden | collapse | initial | inherit
width
Bestimmt die Breite eines Elementes
auto | LÄNGE | initial | inherit
vertical-align
Berstimmt die vertiakle Ausrichtung eines Elementes an der Baseline (Text)
baseline | LÄNGE | sub | super | top | text-top | middle | bottom | text-bottom | initial | inherit
z-index
Bestimmt in welcher Ebene (Layer) das Element gerendert werden soll, geht aber nur mit positionierten Elementen (position: absolute | relative | fixed)
auto | GANZE ZAHL | initial | inherit

Flex-Box-Eigenschaften

align-content
Bestimmt das Anpassungsverhalten der Boxen, inwiefern sie Zwischenräume nutzen sollen, und von wo sie beginnen sollen. (Ähnliche der Textausrichtung)
flex-start | flex-end | center | space-between | space-around | stretch | initial | inherit
align-items
Ausrichtung der Boxen in der horizontalen gesehen
flex-start | flex-end | center | baseline | stretch | initial | inherit
align-self
Siehe align-items, nur für eine einzelne Box
auto | stretch | center | flex-start | flex-end | baseline | initial | inherit
flex
Bestimmt alle Größenverhältnisse der einzelnen Box gleichzeitig
flex-grow flex-shrink flex-basis | auto | initial | inherit
flex-basis
Bestimmt die Startbreite der Box
GANZE ZAHL | auto | initial | inherit
flex-direction
Specifies the direction of the flexible items
LÄNGE | auto
flex-flow
Zusammenfassung für  flex-direction und flex-wrap
flex-direction flex-wrap
flex-grow
Beschreibt inwieweit die Box wachsen darf im Verhältnis der anderen
GANZE ZAHL | initial | inherit
flex-shrink
Bestimmt inwieweit die Box schrumpfen darf im Verhältnis zu den Anderen
GANZE ZAHL | initial | inherit
flex-wrap
Bestimmt ob die Boxen umbrechen dürfen, oder nicht
nowrap | wrap | wrap-reverse | initial | inherit
justify-content
Bestimmt das Verhalten des Boxen auf horizontaler Ebene, wie freie Bereiche genutzt werden sollen, und die Ausrichtung
flex-start | flex-end | center | space-between | space-around | initial | inherit
order
Bestimmt die Darstellungs-Reihenfolge der einzelnen Boxen
GANZE ZAHL | initial | inherit

Text- & Schrifteigenschaften

hanging-punctuation
Bestimmt das verhalten von Satzendezeichen, ob diese die Box überschreiten dürfen ACHTUNG: Wird bisher nicht unterstützt!
none | first | last | allow-end | force-end | initial | inherit
hyphens
Silbentrennung ACHTUNG wird noch nicht wirklich unterstützt
none | manual | auto
letter-spacing
Bestimmt den Abstand zwichen den Buchstaben
normal | LÄNGE | initial | inherit
line-height
Bestimmt die Zeilenhöhe
normal | LÄNGE | initial | inherit
overflow-wrap
Bestimmt ob der Browser zu lange Worte umbrechen darf, wenn diese die Box überschreiten
auto | loose | normal | strict
tab-size
Bestimmt die Länge des Tab-Zeichend (Tabulator)
LÄNGE | initial | inherit
text-align
Bestimmt die horizontale Ausrichtung des Textes
left | right | center | justify | initial | inherit
text-align-last
Beschreibt die Textausrichtung der letzten Zeile eines Blocks ACHTUNG Wird kaum unterstützt
auto | left | right | center | justify | start | end | initial | inherit
text-indent
Bestimmt die Einrückung der ersten Zeile
LÄNGE | initial | inherit
text-transform
Verändert enthaltenen Text (zum Beispiel alles Großbuchstaben)
none | capitalize | uppercase | lowercase | initial | inherit
white-space
Bestimmt wie mit "white-space" Zeichen verfahren wird (Umbruch)
normal | nowrap | pre | pre-line | pre-wrap | initial | inherit
word-break
Bestimmt den Umbruch (nur Worte, oder jedes Zeichen)
normal | break-all | keep-all | initial | inherit
word-spacing
Bestimmt den Abstand von Worten
normal | LÄNGE | initial | inherit
word-wrap
Erlaubt auch langen Worten umzubrechen
normal | break-word | initial | inherit
text-decoration
Bestimmt die Text-Dekoration (Linie am Text)
none | underline | overline | line-through | initial | inherit
text-shadow
Textschatten
h-shadow v-shadow blur-radius color | none | initial | inherit
@font-face
Lädt Schriftarten und stellt sie zur Benutzung bereit (TTF, OTF, WOFF, andere nur teilweise)
@font-face { font-family: NAME; src: url(URL); [font-stretch] [font-style] [font-weight] [unicode-range] }
font
Zusammenfassung der font-* Eigenschaften
font-style font-variant font-weight font-size/line-height font-family | caption | icon | menu | message-box | small-caption | status-bar | initial | inherit
font-family
Bestimmt die Schriftart
NAME | initial | inherit
font-size
Größe des Textes
medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | LÄNGE | initial | inherit
font-style
Bestimmt die Schriftauszeichnung
normal | italic | oblique | initial | inherit
font-variant
Bestimmt ob Kleinbuchstaben verwendet werden dürfen
normal | small-caps | initial | inherit
font-weight
Schriftgewichtung
normal | bold | bolder | lighter | number | initial | inherit
direction
Schreibrichtung des Textes (z.B. arabisch rechts nach links)
xxx
text-orientation
Defines the orientation of the text in a line
ltr | rtl | initial | inherit

Tabellen-Eigenschaften

border-collapse
Läßt die Rahmen der umgebenen Elemente auf eine zusammenfallen
separate | collapse | initial | inherit
border-spacing
Abstand der Zellen (damaliges cellspacing)
1x 2x LÄNGE | |initial | inherit
caption-side
Unter- oder Überschrift (caption)
top | bottom | initial | inherit
empty-cells
Bestimmt ob leere Zellen und ihr Rahmen nicht gezeigt werden sollen
show | hide | initial | inherit
table-layout
Bestimmt die automatische Größenanpassung der Zellen
auto | fixed | initial | inherit

Listen und Aufzählung

counter-increment
Setzt und erhöht einen Zähler. Interessant in Kombination mit counter-reset und content.
none | id | initial | inherit
counter-reset
Macht einen Reset auf einen oder mehrere Counter
none | name number | initial | inherit
list-style
Bestimmt alle list-style Elemente gleichzeitig für Listen
list-style-type list-style-position list-style-image | initial | inherit
list-style-image
Bestimmt ein Bild als Aufzählungspunkt
none | URL | initial | inherit
list-style-position
Bestimmt ob der Listenpunkt innerhalb oder außerhalb des Textflusses liegen soll
inside | outside | initial | inherit
list-style-type
Bestimmt das Aussehen des Listenpunktes aus Vorgaben
disc | armenian | circle | cjk-ideographic | decimal | decimal-leading-zero | georgian | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-alpha | lower-greek | lower-latin | lower-roman | square | upper-latin | upper-roman | initial | inherit

Animationen

@keyframes
Bestimmt einen Animations-Code, Styles die sich ändern und wann sie es tun.
@keyframes animationname {keyframes-selector {css-styles;}}
animation
Kurzform für die "animation-" Eigenschaften
name duration timing-function delay iteration-count direction fill-mode play-state
animation-delay
Verzögerung des Starts der Animation
ZEIT | initial | inherit
animation-direction
Bestimmt die Richting oder ob wiederholt werden soll.
normal | reverse | alternate | alternate-reverse | initial | inherit
animation-duration
Bestimmt die Gesamtzeit für eine Animation
ZEIT | initial | inherit
animation-fill-mode
Beschreibt die Eigenschaften / Zustand wenn keine Animation läuft.
none | forwards | backwards | both | initial | inherit
animation-iteration-count
Anzahl wie oft eine Animation gespielt werden soll
ZAHL | infinite | initial | inherit
animation-name
Weist die Animation (@keframes) per Name zu
NAME | none | initial | inherit
animation-play-state
Bestimmt ob die Animation läuft oder angehalten ist
paused | running | initial | inherit
animation-timing-function
Bestimmt die Geschwindigkeitsfunktion der Animation (beschleunigt, etc.)
linear | ease | ease-in | ease-out | cubic-bezier(n,n,n,n) | initial | inherit
transition
Beschreibt alle "transition-" Eigenschaften (steht für einfache Übergangsanimation)
property duration timing-function delay | initial | inherit
transition-property
Bestimmt welche CSS-Eigenschaft von der Übergangsanimation betroffen sein soll
none | all | property | initial | inherit
transition-duration
Dauer der gesamten Übergangsanimation
ZEIT | initial | inherit
transition-timing-function
Bestimmt die Geschwindigkeitsfunktion der Übergangsanimation (beschleunigt, etc.)
linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) | initial | inherit
transition-delay
Bestimmt de Zeit, wann die Übergangsanimation anfangen soll (Verzögerung)
ZEIT | initial | inherit

Transformation

backface-visibility
Bestimmt ob die Rückseite eines Objektes gezeigt wird oder nicht (transformationen, aniamationen)
visible | hidden | initial | inherit
perspective
Bestimmt die (einfache) Perspektive von 3D-Objekten
LÄNGE | none
perspective-origin
Bestimmt die Position für die Perspektive
x-axis y-axis | initial | inherit
transform
Erlaubt die Anwendung von 2D oder 3D transmations-Funktionen an einem Objektes
none | FUNKTION | initial | inherit
transform-origin
Verändert die Position eines Objektes
x-axis (left center right length %) y-axis (top center bottom length %) [z-axis] | initial | inherit
transform-style
Specifies how nested elements are rendered in 3D space
flat | preserve-3d | initial | inherit

Benutzereingaben

ime-mode
Controls the state of the input method editor for text fields
nav-down
Specifies where to navigate when using the arrow-down navigation key
nav-index
Specifies the tabbing order for an element
nav-left
Specifies where to navigate when using the arrow-left navigation key
nav-right
Specifies where to navigate when using the arrow-right navigation key
nav-up
Specifies where to navigate when using the arrow-up navigation key
outline
Sets all the outline properties in one declaration
outline-color
Sets the color of an outline
outline-offset
Offsets an outline, and draws it beyond the border edge
outline-style
Sets the style of an outline
outline-width
Sets the width of an outline
resize
Specifies whether or not an element is resizable by the user
text-overflow
Specifies what should happen when text overflows the containing element