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 wendet ein Browser die CSS Eingenschaft mit der höchsten Wertigkeit an. Findet ein Browser in einem S

@Charset

@Charset: Zeichenkodierung festlegen Wie in HTML-Dateien, kann in separaten Stylesheet-Dateien die vom Browser zu verwendende Zeichenkodierung mit einem eigenen Eintrag festlegt werden. Die Angabe mus…

@import

@import Mit der @import Regel können weitere CSS Dateien in ein CSS Dokument oder in die CSS Angaben im head eingebunden werden. @import sollte nach Möglichkeit am Anfang einer CSS Datei stehen, damit…

Abstände

Abstände In CSS gibt es zweierlei Arten von Abständen, den Außenabstand margin und den Innenabstand padding. Abstände ermöglichen es Elemente gegenüber anderen Elementen und ihren Elternelementen zu v…

align-content

#align-content Legt fest, wie jede Zeile innerhalb eines Flexbox/Grid-Containers ausgerichtet wird. Sie gilt nur, wenn flex-wrap: wrap vorhanden ist und wenn es mehrere Zeilen von Flexbox/Grid-Elemen…

align-items

#align-items Legt fest, wie Flexbox-Elemente innerhalb einer Zeile eines Flexbox-Containers an der Querachse ausgerichtet werden. align-items: flex-start; Die Flexbox-Elemente werden am Start der Que…

align-self

#align-self Funktioniert wie align-items, gilt aber nur für ein einzelnes Flexbox-Element, statt für alle davon. default align-self: auto; Das Ziel wird den Wert von align-items verwenden. 1 Target 3…

animation

#animation Kurzschreibweise für animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode und animation-play-state.…

animation-delay

#animation-delay Legt fest, wie lange die Animation warten muss, bevor sie startet. Die Animation wird nur bei ihrer ersten Wiederholung verzögert. default animation-delay: 0s; Die Animation wird nul…

animation-direction

#animation-direction Legt fest, in welcher Richtung die Animation abgespielt wird. default animation-direction: normal; Die Animation wird vorwärts abgespielt. Wenn sie das Ende erreicht, beginnt sie…

animation-duration

#animation-duration Legt fest, wie lange die Animation dauert. default animation-duration: 0s; Der Standardwert ist Null Sekunden: die Animation wird einfach nicht abgespielt. Hello World animation-d…

animation-fill-mode

#animation-fill-mode Legt fest, was vor dem Beginn und nach dem Ende einer Animation geschieht. Der Füllmodus erlaubt es, dem Browser mitzuteilen, ob die Stile der Animation auch außerhalb der Animat…

animation-iteration-count

#animation-iteration-count Legt fest, wie oft die Animation abgespielt wird. default animation-iteration-count: 1; Die Animation wird nur einmal abgespielt. Hello World animation-iteration-count: 2; …

animation-name

#animation-name Legt fest, welche Animations-Keyframes verwendet werden sollen. default animation-name: none; Wenn kein Animationsname angegeben ist, wird keine Animation abgespielt. Hello World anim…

animation-play-state

#animation-play-state Legt fest, ob eine Animation abgespielt wird oder nicht. default animation-play-state: running; Wenn die Animationsdauer und der Animationsname definiert sind, wird die Animatio…

animation-timing-function

#animation-timing-function Legt fest, wie die Werte zwischen dem Start und dem Ende der Animation berechnet werden. default animation-timing-function: ease; Die Animation beginnt langsam, beschleunig…

background

#background Kurzschreibweise für background-image background-position background-size background-repeat background-origin background-clip background-attachment und background-color.

background-attachment

#background-attachment Legt fest, wie sich das Hintergrundbild beim Scrollen der Seite verhalten soll. default background-attachment: scroll; Das Hintergrundbild bewegt sich mit der Seite. Es wird au…

background-clip

#background-clip Legt fest, wie weit sich der Hintergrund innerhalb des Elements erweitern soll. default background-clip: border-box; The background extends completely throughout the element, even un…

background-color

#background-color Legt die Farbe des Hintergrunds des Elements fest. default background-color: transparent; Standardmäßig ist die Hintergrundfarbe transparent, was bedeutet, dass es keine Hintergrund…

background-image

#background-image Legt ein Bild als Hintergrund für das Element fest. default background-image: none; Entfernt jedes Hintergrundbild. Hello world background-image: url(/images/jt.png); Verwendet das …

background-origin

#background-origin Bestimmt den Ursprung des Hintergrundbildes. default background-origin: padding-box; Das Hintergrundbild beginnt am Rand des Rahmens: innerhalb der Auffüllung, aber nicht des Rahme…

background-position

#background-position Bestimmt die Position des Hintergrundbildes. default background-position: 0% 0%; Das Hintergrundbild wird bei 0% auf der horizontalen Achse und 0% auf der vertikalen Achse positi…

background-repeat

#background-repeat Legt fest, wie sich das Hintergrundbild, ausgehend von der Hintergrundposition, im Hintergrund des Elements wiederholt. default background-repeat: repeat; Das Hintergrundbild wird …

background-size

#background-size Bestimmt die Größe des Hintergrundbildes. default background-size: auto auto; Das Hintergrundbild behält seine originale Größe bei. Zum Beispiel ist dieses Hintergrundbild 960px x 64…

border

#border Kurzschreibweise für border-width border-style und border-color. border: 4px dotted red; Die Reihenfolge ist wichtig: width style color Hello world border: 2px solid; Nur die Farbe ist option

border-bottom

#border-bottom Kurzschreibweise für border-bottom-width border-bottom-style und border-bottom-color. border-bottom: 4px dotted red; Die Reihenfolge ist wichtig: width style color Hello world border-b…

border-bottom-color

#border-bottom-color Wie border-color, aber nur für den unteren Rand. border-bottom-color: transparent; Wendet eine transparente Farbe auf den unteren Rand an. Der untere Rand nimmt weiterhin den Rau…

border-bottom-left-radius

#border-bottom-left-radius Definiert den Radius der unteren linken Ecke. default border-bottom-left-radius: 0; Entfernt jeglichen Randradius. Hello world border-bottom-left-radius: 20px; Sie können P

border-bottom-right-radius

#border-bottom-right-radius Definiert den Radius der unteren rechten Ecke. default border-bottom-right-radius: 0; Entfernt jeglichen Randradius. Hello world border-bottom-right-radius: 20px; Sie könn…

border-bottom-style

#border-bottom-style Wie border-style, aber nur für den unteren Rand. default border-bottom-style: none; Entfernt den unteren Rand. Hello world border-bottom-style: dotted; Verwandelt den unteren Ran…

border-bottom-width

#border-bottom-width Wie border-width, aber nur für den unteren Rand. default border-bottom-width: 0; Entfernt den unteren Rand. Hello world border-bottom-width: 4px; Sie können Pixel-Werte verwenden…

border-collapse

#border-collapse Legt fest, ob die Ränder der Tabelle getrennt oder zusammengeklappt werden sollen. default border-collapse: separate; Jede Zelle der Tabelle zeigt ihre eigenen Ränder an. In diesem B…

border-color

#border-color Bestimmt die Farbe der Ränder des Elements. default border-color: transparent; Wendet eine transparente Farbe auf die Ränder an. Die Ränder nehmen weiterhin den Raum ein, der durch den …

border-left

#border-left Kurzschreibweise für border-left-width border-left-style und border-left-color. border-left: 4px dotted red; Die Reihenfolge ist wichtig: width style color Hello world border-left: 2px s…

border-left-color

#border-left-color Wie border-color, aber nur für den linken Rand. border-left-color: transparent; Wendet eine transparente Farbe auf den linken Rand an. Der linke Rand nimmt weiterhin den Raum ein, …

border-left-style

#border-left-style Wie border-style, aber nur für den linken Rand. default border-left-style: none; Entfernt den linken Rand. Hello world border-left-style: dotted; Verwandelt den linken Rand in eine…

border-left-width

#border-left-width Wie border-width, aber nur für den linken Rand. default border-left-width: 0; Entfernt den linken Rand. Hello world border-left-width: 4px; Sie können Pixel-Werte verwenden. Hello …

border-radius

#border-radius Legt den Radius der Ecken des Elements fest. default border-radius: 0; Entfernt jeglichen Randradius. Hello world border-radius: 20px; Sie können Pixel-Werte verwenden. Hello world bor…

border-right

#border-right Kurzschreibweise für border-right-width border-right-style und border-right-color. border-right: 4px dotted red; Die Reihenfolge ist wichtig: width style color Hello world border-right:…

border-right-color

#border-right-color Wie border-color, aber nur für den rechten Rand. border-right-color: transparent; Wendet eine transparente Farbe auf den rechten Rand an. Der rechte Rand nimmt weiterhin den Raum …

border-right-style

#border-right-style Wie border-style, aber nur für den rechten Rand. default border-right-style: none; Entfernt den rechten Rand. Hello world border-right-style: dotted; Verwandelt den rechten Rand i

border-right-width

#border-right-width Wie border-width, aber nur für den rechten Rand. default border-right-width: 0; Entfernt den rechten Rand. Hello world border-right-width: 4px; Sie können Pixel-Werte verwenden. H…

border-style

#border-style Legt den Stil der Ränder des Elements fest. default border-style: none; Entfernt die Ränder des Elements. Hello world border-style: dotted; Verwandelt den Rahmen in eine Folge von Punkt…

border-top

#border-top Kurzschreibweise für border-top-width border-top-style und border-top-color. border-top: 4px dotted red; Die Reihenfolge ist wichtig: width style color Hello world border-top: 2px solid; …

border-top-color

#border-top-color Wie border-color, aber nur für den oberen Rand. border-top-color: transparent; Wendet eine transparente Farbe auf den oberen Rand an. Der obere Rand nimmt weiterhin den Raum ein, de…

border-top-left-radius

#border-top-left-radius Legt den Radius der linken oberen Ecke fest. default border-top-left-radius: 0; Entfernt jeglichen Randradius. Hello world border-top-left-radius: 20px; Sie können Pixel-Werte…

border-top-right-radius

#border-top-right-radius Definiert den Radius der oberen rechten Ecke. default border-top-right-radius: 0; Entfernt jeglichen Randradius. Hello world border-top-right-radius: 20px; Sie können Pixel-W…

border-top-style

#border-top-style Wie border-style, aber nur für den oberen Rand. default border-top-style: none; Entfernt den oberen Rand. Hello world border-top-style: dotted; Verwandelt den oberen Rand in eine Fo…

border-top-width

#border-top-width Wie border-width, aber nur für den oberen Rand. default border-top-width: 0; Entfernt den oberen Rand. Hello world border-top-width: 4px; Sie können Pixel-Werte verwenden. Hello wor…

border-width

#border-width Bestimmt die Breite der Ränder des Elements. border-width: 1px; Legt die Breite von allen Rändern auf 1px fest. Hello world border-width: 2px 0; Definiert den oberen und unteren Rand au…

bottom

#bottom Bestimmt die Position des Elements entsprechend seiner unteren Kante. default bottom: auto; Das Element wird in seiner natürlichen Position bleiben. Parent container Natural position Actual p…

box-shadow

#box-shadow Definiert den Schatten des Elements. default box-shadow: none; Entfernt jeden Box-Shadow, der auf das Element angewendet wurde. Hello world box-shadow: 2px 6px; Du brauchst mindestens zwe…

box-sizing

#box-sizing Legt fest, wie die Breite und Höhe des Elements berechnet werden: ob sie den Padding und die Ränder einschließen oder nicht. default box-sizing: content-box; Die Breite und Höhe des Eleme…

clear

#clear Verschiebt das Element nach allen vorhergehenden Floating-Elementen. clear: none; Die clear Eigenschaft ist nur relevant, wenn sie mit Geschwistern verwendet wird, die einen float Wert haben. …

color

#color Bestimmt die Farbe des Textes. color: transparent; Wendet eine transparente Farbe auf den Text an. Der Text nimmt weiterhin den Platz ein, den er einnehmen sollte. Hello world color: red; Sie …

column-count

#column-count Bestimmt die Anzahl der Spalten des Elements. default column-count: auto; Entfernt alle Spalten aus dem Element (sofern keine andere column–Eigenschaft gesetzt wurde). Hello world Foo …

column-gap

#column-gap Bestimmt den Abstand zwischen den Spalten des Elements. default column-gap: normal; Der Abstand zwischen den Spalten wird auf den Standardwert des Browsers gesetzt, der normalerweise 1em …

column-width

#column-width Bestimmt die Anzahl der Spalten des Elements. default column-width: auto; Das Element verteilt nicht seine Kindelemente in Spalten, es sei denn, ein column-count Wert ist definiert. In …

content

#content Definiert den Textinhalt der Pseudo-Elemente :before und :after. default content: normal; Dem Element wird kein Inhalt hinzugefügt. Hello world content: „Foo bar“; In Anbetracht dieses HTML-…

cursor

#cursor Legt den Mauszeiger fest, wenn der Mauszeiger über dem Element schwebt. cursor: default; Setzt den Cursor auf den Standardwert des Elements. Bei einem Link wäre dies ein Zeiger. Für Text wäre…

display

#display Legt das Anzeigeverhalten des Elements fest. display: none; Das Element wird vollständig entfernt, als ob es gar nicht im HTML-Code enthalten wäre. Lorem ipsum dolor sit amet, consectetur ad…

flex-basis

#flex-basis Bestimmt die Anfangsgröße eines Flexbox-Elements. default flex-basis: auto; Die Größe des Elements wird automatisch auf der Grundlage seines Inhalts oder eines height – oder width -…

flex-direction

#flex-direction Legt fest, wie Flexbox-Elemente innerhalb eines Flexbox-Containers angeordnet werden. default flex-direction: row; Die Flexbox-Elemente sind in der gleichen Weise wie die Textrichtung…

flex-flow

#flex-flow Kurzschreibweise für flex-direction und flex-wrap.

flex-grow

#flex-grow Legt fest, wie stark ein Flexbox-Element wachsen soll, wenn Platz vorhanden ist. default flex-grow: 0; Das Element wird nicht wachsen, wenn noch Platz vorhanden ist. Es wird nur den Platz …

flex-shrink

#flex-shrink Legt fest, wie stark ein Flexbox-Element schrumpfen soll, wenn nicht genug Platz vorhanden ist. default flex-shrink: 1; Wenn nicht genug Platz in der Hauptachse des Containers vorhanden …

flex-wrap

#flex-wrap Legt fest, ob Flexbox-Elemente in einer einzigen Zeile oder in mehreren Zeilen innerhalb eines Flexbox-Containers erscheinen. default flex-wrap: nowrap; Die Flexbox-Elemente bleiben auf ei…

float

#float Schiebt das Element entweder auf die linke oder die rechte Seite. Die folgenden Geschwister werden sich um das schwebende Element wickeln default float: none; Entfernt jeden zuvor definierten …

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 werden, definiert die font-family Liste der Schriftfamilien die Priorität, mit der der Browser die Schri…

font-size

#font-size Bestimmt die Größe des Textes. default font-size: medium; Der Text wird in der Standardgröße Mittel des Browsers dargestellt. Hello world The quick brown fox jumps over the lazy dog font-s…

font-style

#font-style Legt fest, wie stark der Text geneigt ist. default font-style: normal; Der Text ist nicht schräg. Hello world font-style: italic; Verwenden Sie die kursive Version der Schrift: Die Buchst…

font-variant

#font-variant Legt fest, welche Glyphe für jeden Buchstaben zu verwenden ist. default font-variant: normal; Jeder Buchstabe verwendet seine normale Glyphe. Hello world font-variant: small-caps; Jeder…

font-weight

#font-weight Legt die Stärke des Textes fest. default font-weight: normal; Der Text ist in normaler Stärke. Hello world font-weight: bold; Der Text wird fett. Hello world font-weight: 600; Sie können…

grid

#grid Kurzschreibweise für grid-template-rows grid-template-columns grid-template-areas grid-auto-rows grid-auto-columns und grid-auto-flow. grid: „header header header“ 50px „sidebar main main“ 200p…

grid-area

#grid-area Kurzschreibweise für grid-row-start grid-column-start grid-row-end und grid-column-end. default grid-area: auto; Die Spalten- und Zeilenanfänge und -enden des Gitterelements werden automat…

grid-auto-columns

#grid-auto-columns Legt die Größe von Rasterspalten fest, die implizit erstellt wurden: Das bedeutet, dass grid-auto-columns auf die Spalten abzielt, die nicht mit grid-template-columns oder grid-tem…

grid-auto-flow

#grid-auto-flow Bestimmt die Position der automatisch erzeugten grid items. default grid-auto-flow: row; In diesem zweispaltigen Aufbau ist das zweite Gitterelement zweispaltig, das dritte Element is…

grid-auto-rows

#grid-auto-rows Definiert die Größe von Rasterzeilen, die implizit erstellt wurden: Das bedeutet, dass grid-auto-rows auf die Zeilen abzielt, die nicht mit grid-template-rows oder grid-template-areas…

grid-column

#grid-column Kurzschreibweise für grid-column-start und grid-column-end. default grid-column: auto auto; Der Spaltenanfang und das Spaltenende des Gitterelements werden automatisch festgelegt. Item I…

grid-column-end

#grid-column-end Definiert die Position des Spaltenendes eines Rasterelements. default grid-column-end: auto; Bei dieser 3-spaltigen Einrichtung wird das Gitterelement automatisch platziert. Item Ite…

grid-column-gap

#grid-column-gap Definiert den Zwischenraum zwischen den Spalten eines Raster-Containers. default grid-column-gap: 0; Entfernt die Lücke. 1. One 2. Two 3. Three grid-column-gap: 10px; Sie können Pixe…

grid-column-start

#grid-column-start Definiert die Spaltenanfangsposition eines Rasterelements. default grid-column-start: auto; Bei dieser 3-spaltigen Einrichtung wird das Gitterelement automatisch platziert. Item It…

grid-gap

#grid-gap Kurzschreibweise für grid-row-gap und grid-column-gap. default grid-gap: 0 0; Entfernt sowohl Zeilen- als auch Spaltenlücken. 1. One 2. Two 3. Three 4. Four 5. Five 6. Six grid-gap: 10px; S…

grid-row

#grid-row Kurzschreibweise für grid-row-start und grid-row-end. default grid-row: auto auto; Der Zeilenanfang und das Zeilenende des Gitterelements werden automatisch festgelegt. Item Item Target Ite…

grid-row-end

#grid-row-end Definiert die Position des Zeilenendes eines Rasterelements. default grid-row-end: auto; Bei dieser 3-spaltigen Einrichtung wird das Gitterelement automatisch platziert. Item Item Targe…

grid-row-gap

#grid-row-gap Definiert den Zwischenraum zwischen den Zeilen eines Raster-Containers. default grid-row-gap: 0; Entfernt die Lücke. 1. One 2. Two 3. Three 4. Four 5. Five 6. Six grid-row-gap: 10px; Si…

grid-row-start

#grid-row-start Definiert die Position des Zeilenanfangs eines Rasterelements. default grid-row-start: auto; Bei dieser 3-spaltigen Einrichtung wird das Gitterelement automatisch in der ersten Zeile …

grid-template

#grid-template Kurzschreibweise für grid-template-rows grid-template-columns und grid-template-area. default grid-template: none; Es sind keine Zeilen, Spalten oder Bereiche definiert. 1. One 2. Two …

grid-template-areas

#grid-template-areas Definiert Bereiche innerhalb eines Raster-Containers. Diese Bereiche können dann referenziert werden, wenn ein Gitterelement platziert wird. default grid-template-areas: none; Es…

grid-template-columns

#grid-template-columns Definiert die Spalten eines Raster-Containers. Sie können die Breite einer Spalte durch ein Schlüsselwort (wie auto) oder eine Länge (wie 10px) angeben. Die Anzahl der Spalten …

grid-template-rows

#grid-template-rows Definiert die Zeilen eines Raster-Containers. Sie können die Breite einer Zeile durch ein Schlüsselwort (wie auto) oder eine Länge (wie 10px) angeben. Die Anzahl der Zeilen wird d…

height

#height Bestimmt die Höhe des Elements. default height: auto; Das Element passt seine Höhe automatisch an, damit sein Inhalt korrekt angezeigt werden kann. Lorem ipsum dolor sit amet, consectetur adi…

justify-content

#justify-content Legt fest, wie Flexbox/Grid-Elemente innerhalb eines Flexbox/Grid-Containers an der Hauptachse ausgerichtet werden. default justify-content: flex-start; Die Flexbox/Grid-Elemente wer…

left

#left Bestimmt die Position des Elements entsprechend seinem linken Rand. default left: auto; Das Element wird in seiner natürlichen Position bleiben. Parent container Natural position Actual positio…

letter-spacing

#letter-spacing Legt die Abstände zwischen den Zeichen eines Textblocks fest. default letter-spacing: normal; Die Abstände zwischen den Zeichen sind normal. The quick brown fox jumps over the lazy do…

line-height

#line-height Definiert die Höhe einer einzelnen Textzeile. default line-height: normal; Setzt den Standardwert des Browsers wieder ein. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam …

list-style

#list-style Kurzschreibweise für list-style-type list-style-image und list-style-position. Listen lassen sich mittels CSS leicht modifizieren. Es ist möglich verschiedene Aufzählungszeichen zu defini…

list-style-image

#list-style-image Definiert das Bild, das als Bullet Point eines Listenelements verwendet werden soll. default list-style-image: none; Die Listenelemente verwenden den Aufzählungspunkt, der durch den…

list-style-position

#list-style-position Bestimmt die Position der Aufzählungspunkte einer Liste. default list-style-position: outside; Der Aufzählungspunkt steht außerhalb des Listenelements, als ob er nicht Teil des L…

list-style-type

#list-style-type Definiert den Typ des Aufzählungspunktes eines Listenelements. default list-style-type: disc; Die Listenelemente verwenden eine Scheibe als Aufzählungszeichen. One Two Three list-sty…

margin

#margin Kurzschreibweise für margin-top margin-right margin-bottom und margin-left. default margin: 0; Entfernt alle Ränder. First item Target Third item margin: 30px; Bei Verwendung des Wertes 1 wir…

margin-bottom

#margin-bottom Definiert den Raum außerhalb des Elements, an der unteren Seite. default margin-bottom: 0; Entfernt alle Ränder am unteren Rand. First item Target Third item margin-bottom: 30px; Sie k…

margin-left

#margin-left Definiert den Raum außerhalb des Elements, auf der linken Seite. default margin-left: 0; Entfernt alle Ränder auf der linken Seite. First item Target Third item margin-left: 50px; Sie kö…

margin-right

#margin-right Definiert den Raum außerhalb des Elements, auf der rechten Seite. default margin-right: 0; Entfernt alle Ränder auf der rechten Seite. First item Target Third item margin-right: 50px; S…

margin-top

#margin-top Definiert den Raum außerhalb des Elements, auf der oberen Seite. default margin-top: 0; Entfernt alle Ränder am oberen Rand. First item Target Third item margin-top: 30px; Sie können Pixe…

max-height

#max-height Bestimmt die maximale Höhe des Elements. default max-height: none; Das Element hat keine Begrenzung in Bezug auf die Höhe. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam s…

max-width

#max-width Legt die maximale Breite fest, die das Element haben kann. default max-width: none; Das Element hat keine Begrenzung in Bezug auf die Breite. Lorem ipsum dolor sit amet, consectetur adipis…

min-height

#min-height Bestimmt die Mindesthöhe des Elements. default min-height: 0; Das Element hat keine Mindesthöhe. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvina…

min-width

#min-width Bestimmt die Mindestbreite des Elements. default min-width: 0; Das Element hat keine Mindestbreite. Hello world min-width: 300px; Sie können numerische Werte wie Pixel, (r)em, Prozentwerte…

mix-blend-mode

#mix-blend-mode Legt fest, wie das Element mit dem Hintergrund vermischt werden soll. default mix-blend-mode: normal; Das Element ist nicht mischbar. Hello world Hello world Hello world mix-blend-mod…

opacity

#opacity Legt fest, wie undurchsichtig das Element ist. default opacity: 1; Das Element ist völlig undurchsichtig. Hello world opacity: 0; Das Element ist völlig transparent. Hello world opacity: 0.3…

order

#order Bestimmt die Reihenfolge eines Flexbox-Elements. default order: 0; Die Reihenfolge der Flexbox-Elemente ist die, die im HTML-Code definiert ist. One order: 0 Two order: 0 Target order: 0 Four …

outline

#outline Kurzschreibweise für outline-width outline-style und outline-color. outline: 4px dotted red; Die Reihenfolge ist wichtig: width style color Hello world outline: 2px solid; Nur die Farbe ist …

outline-color

#outline-color Bestimmt die Farbe der Umrisse des Elements. default outline-color: transparent; Wendet eine transparente Farbe auf die Umrisse an. Die Umrisse nehmen weiterhin den Platz ein, der durc…

outline-style

#outline-style Legt den Stil der Umrisse des Elements fest. default outline-style: none; Entfernt die Umrisse des Elements. Hello world outline-style: dotted; Verwandelt den Umriss in eine Folge von …

outline-width

#outline-width Bestimmt die Breite der Umrisse des Elements. default outline-width: medium; Setzt die Breite aller Umrisse auf mittel. Hello world outline-width: 1px; Legt die Breite aller Umrisse au…

overflow

#overflow Legt fest, wie überlaufender Inhalt auf der horizontalen und vertikalen Achse angezeigt wird. default overflow: visible; Der überlaufende Inhalt ist sichtbar, während das Element selbst in …

overflow-wrap

#overflow-wrap Legt fest, ob Wörter am Ende einer Zeile umbrochen werden sollen. default overflow-wrap: normal; Wörter ohne Leerzeichen werden nicht umbrochen. Sequenzen von ununterbrochenen Zeichen …

overflow-x

#overflow-x Legt fest, wie überlaufender Inhalt auf der horizontalen Achse angezeigt wird. default overflow-x: visible; Der überlaufende Inhalt ist sichtbar, während das Element selbst in der angegeb…

overflow-y

#overflow-y Legt fest, wie überlaufender Inhalt auf der vertikalen Achse angezeigt wird. default overflow-y: visible; Der überlaufende Inhalt ist sichtbar, während das Element selbst in der angegeben…

padding

#padding Kurzschreibweise für padding-top padding-right padding-bottom und padding-left. default padding: 0; Entfernt alle Auffüllungen. Target padding: 30px; Wenn der Wert 1 verwendet wird, wird die…

padding-bottom

#padding-bottom Definiert den Raum innerhalb des Elements, an der unteren Seite. default padding-bottom: 0; Entfernt alle Polsterungen an der Unterseite. First item Target Third item padding-bottom: …

padding-left

#padding-left Definiert den Raum innerhalb des Elements, auf der linken Seite. default padding-left: 0; Entfernt alle Auffüllungen auf der linken Seite. First item Target Third item padding-left: 50p…

padding-right

#padding-right Definiert den Raum innerhalb des Elements, auf der rechten Seite. default padding-right: 0; Entfernt alle Auffüllungen auf der rechten Seite. First item Target Third item padding-right…

padding-top

#padding-top Definiert den Raum innerhalb des Elements, auf der oberen Seite. default padding-top: 0; Entfernt alle Räume an der Oberseite. First item Target Third item padding-top: 50px; Sie können …

pointer-events

#pointer-events Legt fest, ob das Element auf Zeigerereignisse reagiert oder nicht. default pointer-events: auto; Das Element reagiert auf Zeigerereignisse, wie :hover oder click. Hover me Lorem ipsu…

position

#position Legt das Positionsverhalten des Elements fest. default position: static; Das Element wird im natürlichen Fluss der Seite bleiben. Folglich wird es nicht als Ankerpunkt für den absolut posit…

resize

#resize Legt fest, ob die Textarea in der Größe veränderbar ist oder nicht. default resize: none; Die Textarea ist nicht größenveränderbar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et…

right

#right Bestimmt die Position des Elements entsprechend seiner rechten Kante. default right: auto; Das Element wird in seiner natürlichen Position bleiben. Parent container Natural position Actual pos…

text-align

#text-align Legt fest, wie der Textinhalt des Elements horizontal ausgerichtet wird. text-align: left; Der Textinhalt ist links ausgerichtet. Hello world Lorem ipsum dolor sit amet, consectetur adipi…

text-decoration

#text-decoration Defines how the text content of the element is decorated. default text-decoration: none; Entfernt jegliche Textdekoration. Hello world text-decoration: underline; Unterstreicht den T…

text-indent

#text-indent Legt die Einrückung der ersten Textzeile des Elements fest. default text-indent: 0; Der Text ist nicht eingerückt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper d…

text-overflow

#text-overflow Legt fest, wie sich der versteckte Textinhalt verhält, wenn er überläuft. default text-overflow: clip; Der Textinhalt ist abgeschnitten und nicht zugänglich. Hello world text-overflow:…

text-shadow

#text-shadow Bestimmt den Schatten des Textinhalts. default text-shadow: none; Der Textinhalt hat keinen Schatten. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat p…

text-transform

#text-transform Legt fest, wie der Textinhalt umgewandelt werden soll. default text-transform: none; Entfernt jegliche Textumwandlung: Der Text erscheint so wie im HTML-Code. Hello world! Lorem ipsum…

top

#top Bestimmt die Position des Elements entsprechend seiner Oberkante. default top: auto; Das Element wird in seiner natürlichen Position bleiben. Parent container Natural position Actual position to…

transform

#transform Legt fest, wie das Element transformiert wird. default transform: none; Entfernt jede Transformation. Natural position transform: translateX(40px); Verschiebe das Element auf der horizonta…

transform-origin

#transform-origin Legt den Ursprung für Transformationen fest, die durch die transform-Eigenschaft definiert sind. default transform-origin: 50% 50% 0; Der Ursprung der Transformation liegt in der Mi…

transition

#transition Kurzschreibweise transition-property transition-duration transition-timing-function und transition-delay. Nur transition-duration ist erforderlich. transition: 1s; transition-duration ist…

transition-delay

#transition-delay Legt fest, wie lange der Übergang vor dem Beginn warten muss. default transition-delay: 0s; Der Übergang wird null Sekunden warten und somit sofort beginnen. Hover me transition-del

transition-duration

#transition-duration Legt fest, wie lange der Übergang dauert. default transition-duration: 0s; Der Übergang dauert null Sekunden und ist somit instant. Hover me transition-duration: 1.2s; Sie können…

transition-property

#transition-property Legt fest, welche Eigenschaften übergehen werden. default transition-property: all; Das Element wird alle Eigenschaften übertragen: background color transform Hover me transition…

transition-timing-function

#transition-timing-function Legt fest, wie die Werte zwischen dem Start und dem Ende des Übergangs berechnet werden. default transition-timing-function: ease; Der Übergang beginnt langsam, beschleuni…

vertical-align

#vertical-align Legt fest, wie ein Inline- oder Tabellenzellenelement vertikal ausgerichtet wird. vertical-align: baseline; Das Element wird an der Grundlinie des übergeordneten Elements ausgerichtet…

visibility

visibility: Elemente mit CSS ausblenden Mit der Eigenschaft visibility kann ein Element versteckt werden ohne es aus dem Textfluss zu nehmen (wie es bei display: none der Fall wäre). Unsichtbar bedeut…

Werte und Einheiten

Jede in CSS verwendete Eigenschaft hat einen Wertetyp, der die für diese Eigenschaft zulässigen Werte definiert. Ein Blick auf eine beliebige Eigenschaftsseite in unserer CSS-Referenz hilft, die Werte…

white-space

#white-space Legt fest, wie der Weißraum des Elements behandelt wird. default white-space: normal; Sequenzen von Leerzeichen werden zu einem zusammengefasst. Zeilenumbrüche werden ignoriert. Der Text…

width

#width Bestimmt die Breite des Elements. default width: auto; Das Element passt seine Breite automatisch an, damit sein Inhalt korrekt dargestellt werden kann. Lorem ipsum dolor sit amet, consectetur…

will-change

#will-change Legt fest, welche Eigenschaften sich in Zukunft ändern sollen (entweder durch CSS oder JavaScript). default will-change: auto; Sagt dem Browser nicht, dass er irgendeine Eigenschaft opti…

word-break

#word-break Legt fest, wie Wörter am Ende einer Zeile umbrochen werden sollen. default word-break: normal; Wörter ohne Leerzeichen werden nicht umbrochen. Sequenzen von ununterbrochenen Zeichen werde…

word-spacing

#word-spacing Legt die Abstände zwischen den Wörtern eines Textblocks fest. default word-spacing: normal; Die Abstände zwischen den Zeichen sind normal. The quick brown fox jumps over the lazy dog wo…

z-index

#z-index Bestimmt die Ordnung der Elemente auf der z-Achse. Es funktioniert nur bei positionierten Elementen (alles außer static). default z-index: auto; Die Reihenfolge wird durch die Reihenfolge im…