Zum Inhalt springen

CSS-Referenz

3b9a57d5d5a147d286722444e9f88c4f CSS-Referenz

Die CSS-Referenz ist eine Liste aller CSS-Eigenschaften, die es gibt. Zu jeder Eigenschaft finden Sie einen Übersichtsartikel, in dem die Eigenschaft beschrieben ist, was sie bedeutet, welche Werte die Eigenschaft annehmen kann und Beispiele, wie das aussieht. Sie finden hier alle Informationen, die Sie brauchen, um CSS zu benutzen.

Was ist CSS?

Mit CSS verändert man die Darstellung bestimmter Elemente, indem man sie mittels eines Selektors auswählt und dann bestimmte Eigenschaften zuweist.

CSS (Abkürzung für Cascading Style Sheets) ist eine Auszeichnungssprache mit der (X)HTML- Dokumente (Allgemein auch XML, z.B. OpenDocument) formatiert werden können.

Vorteile

Die Verwendung von CSS bietet einige Vorteil gegenüber Formatierungen direkt im Dokument: Trennung von Inhalt und Darstellung sowie die Formatierung abhängig vom Ausgabemedium (Bildschirm, Druck, Handy, Sprache, Präsentation).

Aufbau und Syntax

Jede CSS-Regel hat grob den folgenden Aufbau:

selektor {
    eigenschaft1: wert1;
    eigenschaft2: wert2a wert2b;
    eigenschaft3: wert3a wert3b wert3c wert3d;
    ...
}

Der Selektor gibt an auf welche Elemente die Eigenschaften angewendet werden. Eigenschaften von Elementen sind zum Beispiel Farbe, Größe oder Position.

Collections

Properties

!important

!important Das Schlüsselwort !important verändert die Wertigkeit einer Style-Angabe. Normalerweise w…

@Charset

@Charset: Zeichenkodierung festlegen Wie in HTML-Dateien, kann in separaten Stylesheet-Dateien die v…

@import

@import Mit der @import Regel können weitere CSS Dateien in ein CSS Dokument oder in die CSS Angaben…

Abstände

Abstände In CSS gibt es zweierlei Arten von Abständen, den Außenabstand margin und den Innenabstand …

align-content

#align-content Legt fest, wie jede Zeile innerhalb eines Flexbox/Grid-Containers ausgerichtet wird. …

align-items

#align-items Legt fest, wie Flexbox-Elemente innerhalb einer Zeile eines Flexbox-Containers an der Q…

align-self

#align-self Funktioniert wie align-items, gilt aber nur für ein einzelnes Flexbox-Element, statt für…

animation

#animation Kurzschreibweise für animation-name animation-duration animation-timing-function animatio…

animation-delay

#animation-delay Legt fest, wie lange die Animation warten muss, bevor sie startet. Die Animation wi…

animation-direction

#animation-direction Legt fest, in welcher Richtung die Animation abgespielt wird. default animation…

animation-duration

#animation-duration Legt fest, wie lange die Animation dauert. default animation-duration: 0s; Der S…

animation-fill-mode

#animation-fill-mode Legt fest, was vor dem Beginn und nach dem Ende einer Animation geschieht. Der …

animation-iteration-count

#animation-iteration-count Legt fest, wie oft die Animation abgespielt wird. default animation-itera…

animation-name

#animation-name Legt fest, welche Animations-Keyframes verwendet werden sollen. default animation-na…

animation-play-state

#animation-play-state Legt fest, ob eine Animation abgespielt wird oder nicht. default animation-pla…

animation-timing-function

#animation-timing-function Legt fest, wie die Werte zwischen dem Start und dem Ende der Animation be…

background

#background Kurzschreibweise für background-image background-position background-size background-rep…

background-attachment

#background-attachment Legt fest, wie sich das Hintergrundbild beim Scrollen der Seite verhalten sol…

background-clip

#background-clip Legt fest, wie weit sich der Hintergrund innerhalb des Elements erweitern soll. def…

background-color

#background-color Legt die Farbe des Hintergrunds des Elements fest. default background-color: trans…

background-image

#background-image Legt ein Bild als Hintergrund für das Element fest. default background-image: none…

background-origin

#background-origin Bestimmt den Ursprung des Hintergrundbildes. default background-origin: padding-b…

background-position

#background-position Bestimmt die Position des Hintergrundbildes. default background-position: 0% 0%…

background-repeat

#background-repeat Legt fest, wie sich das Hintergrundbild, ausgehend von der Hintergrundposition, i…

background-size

#background-size Bestimmt die Größe des Hintergrundbildes. default background-size: auto auto; Das H…

border

#border Kurzschreibweise für border-width border-style und border-color. border: 4px dotted red; Die…

border-bottom

#border-bottom Kurzschreibweise für border-bottom-width border-bottom-style und border-bottom-color.…

border-bottom-color

#border-bottom-color Wie border-color, aber nur für den unteren Rand. border-bottom-color: transpare…

border-bottom-left-radius

#border-bottom-left-radius Definiert den Radius der unteren linken Ecke. default border-bottom-left-…

border-bottom-right-radius

#border-bottom-right-radius Definiert den Radius der unteren rechten Ecke. default border-bottom-rig…

border-bottom-style

#border-bottom-style Wie border-style, aber nur für den unteren Rand. default border-bottom-style: n…

border-bottom-width

#border-bottom-width Wie border-width, aber nur für den unteren Rand. default border-bottom-width: 0…

border-collapse

#border-collapse Legt fest, ob die Ränder der Tabelle getrennt oder zusammengeklappt werden sollen. …

border-color

#border-color Bestimmt die Farbe der Ränder des Elements. default border-color: transparent; Wendet …

border-left

#border-left Kurzschreibweise für border-left-width border-left-style und border-left-color. border-…

border-left-color

#border-left-color Wie border-color, aber nur für den linken Rand. border-left-color: transparent; W…

border-left-style

#border-left-style Wie border-style, aber nur für den linken Rand. default border-left-style: none; …

border-left-width

#border-left-width Wie border-width, aber nur für den linken Rand. default border-left-width: 0; Ent…

border-radius

#border-radius Legt den Radius der Ecken des Elements fest. default border-radius: 0; Entfernt jegli…

border-right

#border-right Kurzschreibweise für border-right-width border-right-style und border-right-color. bor…

border-right-color

#border-right-color Wie border-color, aber nur für den rechten Rand. border-right-color: transparent…

border-right-style

#border-right-style Wie border-style, aber nur für den rechten Rand. default border-right-style: non…

border-right-width

#border-right-width Wie border-width, aber nur für den rechten Rand. default border-right-width: 0; …

border-style

#border-style Legt den Stil der Ränder des Elements fest. default border-style: none; Entfernt die R…

border-top

#border-top Kurzschreibweise für border-top-width border-top-style und border-top-color. border-top:…

border-top-color

#border-top-color Wie border-color, aber nur für den oberen Rand. border-top-color: transparent; Wen…

border-top-left-radius

#border-top-left-radius Legt den Radius der linken oberen Ecke fest. default border-top-left-radius:…

border-top-right-radius

#border-top-right-radius Definiert den Radius der oberen rechten Ecke. default border-top-right-radi…

border-top-style

#border-top-style Wie border-style, aber nur für den oberen Rand. default border-top-style: none; En…

border-top-width

#border-top-width Wie border-width, aber nur für den oberen Rand. default border-top-width: 0; Entfe…

border-width

#border-width Bestimmt die Breite der Ränder des Elements. border-width: 1px; Legt die Breite von al…

bottom

#bottom Bestimmt die Position des Elements entsprechend seiner unteren Kante. default bottom: auto; …

box-shadow

#box-shadow Definiert den Schatten des Elements. default box-shadow: none; Entfernt jeden Box-Shadow…

box-sizing

#box-sizing Legt fest, wie die Breite und Höhe des Elements berechnet werden: ob sie den Padding und…

clear

#clear Verschiebt das Element nach allen vorhergehenden Floating-Elementen. clear: none; Die clear E…

color

#color Bestimmt die Farbe des Textes. color: transparent; Wendet eine transparente Farbe auf den Tex…

column-count

#column-count Bestimmt die Anzahl der Spalten des Elements. default column-count: auto; Entfernt all…

column-gap

#column-gap Bestimmt den Abstand zwischen den Spalten des Elements. default column-gap: normal; Der …

column-width

#column-width Bestimmt die Anzahl der Spalten des Elements. default column-width: auto; Das Element …

content

#content Definiert den Textinhalt der Pseudo-Elemente :before und :after. default content: normal; D…

cursor

#cursor Legt den Mauszeiger fest, wenn der Mauszeiger über dem Element schwebt. cursor: default; Set…

display

#display Legt das Anzeigeverhalten des Elements fest. display: none; Das Element wird vollständig en…

flex-basis

#flex-basis Bestimmt die Anfangsgröße eines Flexbox-Elements. default flex-basis: auto; Die Größe de…

flex-direction

#flex-direction Legt fest, wie Flexbox-Elemente innerhalb eines Flexbox-Containers angeordnet werden…

flex-flow

#flex-flow Kurzschreibweise für flex-direction und flex-wrap. Die Eigenschaft flex-flow ist eine Kur…

flex-grow

#flex-grow Legt fest, wie stark ein Flexbox-Element wachsen soll, wenn Platz vorhanden ist. default …

flex-shrink

#flex-shrink Legt fest, wie stark ein Flexbox-Element schrumpfen soll, wenn nicht genug Platz vorhan…

flex-wrap

#flex-wrap Legt fest, ob Flexbox-Elemente in einer einzigen Zeile oder in mehreren Zeilen innerhalb …

float

#float Schiebt das Element entweder auf die linke oder die rechte Seite. Die folgenden Geschwister w…

font

#font Kurzschreibweise für font-style font-variant font-weight font-size line-height und font-family…

font-family

#font-family font-family: "Source Sans Pro", "Arial", sans-serif; Wenn mehrere Werte verwendet werde…

font-size

#font-size Bestimmt die Größe des Textes. default font-size: medium; Der Text wird in der Standardgr…

font-style

#font-style Legt fest, wie stark der Text geneigt ist. default font-style: normal; Der Text ist nich…

font-variant

#font-variant Legt fest, welche Glyphe für jeden Buchstaben zu verwenden ist. default font-variant: …

font-weight

#font-weight Legt die Stärke des Textes fest. default font-weight: normal; Der Text ist in normaler …

grid

#grid Kurzschreibweise für grid-template-rows grid-template-columns grid-template-areas grid-auto-ro…

grid-area

#grid-area Kurzschreibweise für grid-row-start grid-column-start grid-row-end und grid-column-end. d…

grid-auto-columns

#grid-auto-columns Legt die Größe von Rasterspalten fest, die implizit erstellt wurden: Das bedeutet…

grid-auto-flow

#grid-auto-flow Bestimmt die Position der automatisch erzeugten grid items. default grid-auto-flow: …

grid-auto-rows

#grid-auto-rows Definiert die Größe von Rasterzeilen, die implizit erstellt wurden: Das bedeutet, da…

grid-column

#grid-column Kurzschreibweise für grid-column-start und grid-column-end. default grid-column: auto a…

grid-column-end

#grid-column-end Definiert die Position des Spaltenendes eines Rasterelements. default grid-column-e…

grid-column-gap

#grid-column-gap Definiert den Zwischenraum zwischen den Spalten eines Raster-Containers. default gr…

grid-column-start

#grid-column-start Definiert die Spaltenanfangsposition eines Rasterelements. default grid-column-st…

grid-gap

#grid-gap Kurzschreibweise für grid-row-gap und grid-column-gap. default grid-gap: 0 0; Entfernt sow…

grid-row

#grid-row Kurzschreibweise für grid-row-start und grid-row-end. default grid-row: auto auto; Der Zei…

grid-row-end

#grid-row-end Definiert die Position des Zeilenendes eines Rasterelements. default grid-row-end: aut…

grid-row-gap

#grid-row-gap Definiert den Zwischenraum zwischen den Zeilen eines Raster-Containers. default grid-r…

grid-row-start

#grid-row-start Definiert die Position des Zeilenanfangs eines Rasterelements. default grid-row-star…

grid-template

#grid-template Kurzschreibweise für grid-template-rows grid-template-columns und grid-template-area.…

grid-template-areas

#grid-template-areas Definiert Bereiche innerhalb eines Raster-Containers. Diese Bereiche können dan…

grid-template-columns

#grid-template-columns Definiert die Spalten eines Raster-Containers. Sie können die Breite einer Sp…

grid-template-rows

#grid-template-rows Definiert die Zeilen eines Raster-Containers. Sie können die Breite einer Zeile …

height

#height Bestimmt die Höhe des Elements. default height: auto; Das Element passt seine Höhe automatis…

justify-content

#justify-content Legt fest, wie Flexbox/Grid-Elemente innerhalb eines Flexbox/Grid-Containers an der…

left

#left Bestimmt die Position des Elements entsprechend seinem linken Rand. default left: auto; Das El…

letter-spacing

#letter-spacing Legt die Abstände zwischen den Zeichen eines Textblocks fest. default letter-spacing…

line-height

#line-height Definiert die Höhe einer einzelnen Textzeile. default line-height: normal; Setzt den St…

list-style

#list-style Kurzschreibweise für list-style-type list-style-image und list-style-position. Listen la…

list-style-image

#list-style-image Definiert das Bild, das als Bullet Point eines Listenelements verwendet werden sol…

list-style-position

#list-style-position Bestimmt die Position der Aufzählungspunkte einer Liste. default list-style-pos…

list-style-type

#list-style-type Definiert den Typ des Aufzählungspunktes eines Listenelements. default list-style-t…

margin

#margin Kurzschreibweise für margin-top margin-right margin-bottom und margin-left. default margin: …

margin-bottom

#margin-bottom Definiert den Raum außerhalb des Elements, an der unteren Seite. default margin-botto…

margin-left

#margin-left Definiert den Raum außerhalb des Elements, auf der linken Seite. default margin-left: 0…

margin-right

#margin-right Definiert den Raum außerhalb des Elements, auf der rechten Seite. default margin-right…

margin-top

#margin-top Definiert den Raum außerhalb des Elements, auf der oberen Seite. default margin-top: 0; …

max-height

#max-height Bestimmt die maximale Höhe des Elements. default max-height: none; Das Element hat keine…

max-width

#max-width Legt die maximale Breite fest, die das Element haben kann. default max-width: none; Das E…

min-height

#min-height Bestimmt die Mindesthöhe des Elements. default min-height: 0; Das Element hat keine Mind…

min-width

#min-width Bestimmt die Mindestbreite des Elements. default min-width: 0; Das Element hat keine Mind…

mix-blend-mode

#mix-blend-mode Legt fest, wie das Element mit dem Hintergrund vermischt werden soll. default mix-bl…

opacity

#opacity Legt fest, wie undurchsichtig das Element ist. default opacity: 1; Das Element ist völlig u…

order

#order Bestimmt die Reihenfolge eines Flexbox-Elements. default order: 0; Die Reihenfolge der Flexbo…

outline

#outline Kurzschreibweise für outline-width outline-style und outline-color. outline: 4px dotted red…

outline-color

#outline-color Bestimmt die Farbe der Umrisse des Elements. default outline-color: transparent; Wend…

outline-style

#outline-style Legt den Stil der Umrisse des Elements fest. default outline-style: none; Entfernt di…

outline-width

#outline-width Bestimmt die Breite der Umrisse des Elements. default outline-width: medium; Setzt di…

overflow

#overflow Legt fest, wie überlaufender Inhalt auf der horizontalen und vertikalen Achse angezeigt wi…

overflow-wrap

#overflow-wrap Legt fest, ob Wörter am Ende einer Zeile umbrochen werden sollen. default overflow-wr…

overflow-x

#overflow-x Legt fest, wie überlaufender Inhalt auf der horizontalen Achse angezeigt wird. default o…

overflow-y

#overflow-y Legt fest, wie überlaufender Inhalt auf der vertikalen Achse angezeigt wird. default ove…

padding

#padding Kurzschreibweise für padding-top padding-right padding-bottom und padding-left. default pad…

padding-bottom

#padding-bottom Definiert den Raum innerhalb des Elements, an der unteren Seite. default padding-bot…

padding-left

#padding-left Definiert den Raum innerhalb des Elements, auf der linken Seite. default padding-left:…

padding-right

#padding-right Definiert den Raum innerhalb des Elements, auf der rechten Seite. default padding-rig…

padding-top

#padding-top Definiert den Raum innerhalb des Elements, auf der oberen Seite. default padding-top: 0…

pointer-events

#pointer-events Legt fest, ob das Element auf Zeigerereignisse reagiert oder nicht. default pointer-…

position

#position Legt das Positionsverhalten des Elements fest. default position: static; Das Element wird …

resize

#resize Legt fest, ob die Textarea in der Größe veränderbar ist oder nicht. default resize: none; Di…

right

#right Bestimmt die Position des Elements entsprechend seiner rechten Kante. default right: auto; Da…

text-align

#text-align Legt fest, wie der Textinhalt des Elements horizontal ausgerichtet wird. text-align: lef…

text-decoration

#text-decoration Defines how the text content of the element is decorated. default text-decoration: …

text-indent

#text-indent Legt die Einrückung der ersten Textzeile des Elements fest. default text-indent: 0; Der…

text-overflow

#text-overflow Legt fest, wie sich der versteckte Textinhalt verhält, wenn er überläuft. default tex…

text-shadow

#text-shadow Bestimmt den Schatten des Textinhalts. default text-shadow: none; Der Textinhalt hat ke…

text-transform

#text-transform Legt fest, wie der Textinhalt umgewandelt werden soll. default text-transform: none;…

top

#top Bestimmt die Position des Elements entsprechend seiner Oberkante. default top: auto; Das Elemen…

transform

#transform Legt fest, wie das Element transformiert wird. default transform: none; Entfernt jede Tra…

transform-origin

#transform-origin Legt den Ursprung für Transformationen fest, die durch die transform-Eigenschaft d…

transition

#transition Kurzschreibweise transition-property transition-duration transition-timing-function und …

transition-delay

#transition-delay Legt fest, wie lange der Übergang vor dem Beginn warten muss. default transition-d…

transition-duration

#transition-duration Legt fest, wie lange der Übergang dauert. default transition-duration: 0s; Der …

transition-property

#transition-property Legt fest, welche Eigenschaften übergehen werden. default transition-property: …

transition-timing-function

#transition-timing-function Legt fest, wie die Werte zwischen dem Start und dem Ende des Übergangs b…

vertical-align

#vertical-align Legt fest, wie ein Inline- oder Tabellenzellenelement vertikal ausgerichtet wird. ve…

visibility

visibility: Elemente mit CSS ausblenden Mit der Eigenschaft visibility kann ein Element versteckt we…

Werte und Einheiten

Jede in CSS verwendete Eigenschaft hat einen Wertetyp, der die für diese Eigenschaft zulässigen Wert…

white-space

#white-space Legt fest, wie der Weißraum des Elements behandelt wird. default white-space: normal; S…

width

#width Bestimmt die Breite des Elements. default width: auto; Das Element passt seine Breite automat…

will-change

#will-change Legt fest, welche Eigenschaften sich in Zukunft ändern sollen (entweder durch CSS oder …

word-break

#word-break Legt fest, wie Wörter am Ende einer Zeile umbrochen werden sollen. default word-break: n…

word-spacing

#word-spacing Legt die Abstände zwischen den Wörtern eines Textblocks fest. default word-spacing: no…

z-index

#z-index Bestimmt die Ordnung der Elemente auf der z-Achse. Es funktioniert nur bei positionierten E…