Tabelle CSS-Eigenschaften

Liste CSS-Eigenschaften

CSS ist ständig im Fluß: Neue Eigenschaften werden entwickelt und ergänzen die CSS-Standards. Die überschaubare Liste der CSS-Eigenschaften aus den Anfängen wurde um Verfahren für die Anpassung an den Viewport erweitert, um Variablen, Animationen und Techniken für die Berechnung von Abmessungen.

Dabei sind Eigenschaften, die bei jedem Design einer Webseite zum Tragen kommen, und Stile, die einer Seite ein vollständig neues Erscheinungsbild verleihen.

Heute sind es zu viele, um alle CSS-Stile hier vorzustellen und um alle Eigenschaften und ihre Wirkung in den Griff zu bekommen. Von Zeit zu Zeit lohnt sich ein Blick, um Altes wieder auszugraben oder neue Ideen aufzutun.

Die Eigenschaften sind hier in Gruppen eingeteilt:

Variablen und Berechnungen: variable und calc

CSS calc führt Berechnungen auf gemischten Werten (z.B. Breite aus %- und px-Angaben) aus, für die wir ansonsten Javascript oder einen CSS Preprozessor einsetzen müssten.

Variablen verringern Wiederholungen in langen CSS-Dateien durch globale Vereinbarung.

CSS-Animation

animation Deklariert eine Keyframe-Animation
.qualm { animation: smoke 5s; }
animation-delay Verzögerung des Starts
.qualm { animation: smoke 5s 1s; }
animation-direction einfacher, zyklischer, umgekehrter oder alternierender Ablauf
.qualm { animation: smoke 5s alternate infinite; }
animation-duration Dauer eines vollständigen Zyklus in Sekunden
.qualm { animation: smoke 5s; }
animation-fill-mode Stile am Ende der Animation zurücksetzen oder beibehalten
.qualm { animation: smoke 5s forwards; }
animation-iteration-count Anzahl der Wiederholungen
.qualm { animation: smoke 5s infinite; }
animation-name Name der @keyframes-Animation
.qualm { animation: smoke 5s; }
animation-play-state Zustand der Animation: Laufend oder pausiert
.element { animation-play-state: paused; }
animation-timing-function Gleichmäßiger Ablauf, beschleunigt oder abgebremst
.qualm { animation: smoke 5s ease-in; }

background – Hintergrundfarbe

background Kurzschrift – fasst mehrere Eigenschaften des Hintergrunds zusammen
elem { background: ivory url(background-image.jpg) repeat-x; }
background-attachment Hintergrund steht fest oder scrollt
elem { background-attachment: fixed; }
background-clip beschneidet das Hintergrundbild
elem { background-clip: border-box; }
background-color Hintergrundfarbe eines Elementes
elem { background-color: ivory; }
background-image Hintergrundbild
elem { background-image: url(background-image.jpg) no-repeat; }
background-origin Reichweite und die Position von Hintergrundbildern mit border-box, padding-box, content-box
elem { background-origin: content-box; }
background-position Position und Ausrichtung des Hintergrundbilds
elem { background-position: left top; }
background-repeat Hintergrundbild wiederholen
repeat | repeat-x | repeat-y | no-repeat
background-size skaliert Hintergrundbilder oder passt Hintergrundbilder an die Größe des Viewports an.
elem { background-image: url(overview.jpg); background-size: cover; }

border – sichtbarer Rahmen um ein Element

border Kurzschrift für alle Eigenschaften
elem { border: 4px dotted blue; }
border-color Farbe des Rahmens an allen vier Seiten
elem { border-color: thistle plum violet orchid; }
border-bottom
border-left
border-right
border-top
Kurzschrift für Eigenschaften einer border-Seite
elem { border-bottom: 2px dotted pink; }
border-bottom-color
border-left-color
border-right-color
border-top-color
Farbe des Rahmens an den individuellen Seiten
elem { border-bottom-color: violet; }
border-style Stil aller vier Rahmenseiten
elem { border-style: dotted double dotted solid; }
border-bottom-style
border-left-style
border-right-style
border-top-style
Stil der Rahmenlinie an den individuellen Seiten
elem { border-bottom-style: dotted; }
border-width Breite aller vier Rahmenseiten
elem { border-width: 8px 16px 8px 15px; }
border-bottom-width
border-left-width
border-right-width
border-top-width
Breite des Rahmens an den jeweiligen Seiten
elem { border-bottom-width: 16px; }
border-image Schmuckrahmen aus einem Bild, SVG-Grafik oder Verlauf
elem { border-image: url(border-image.png) 10 10 20 10 repeat; }
border-radius rundet die Ecken von HTML-Boxen ab
elem { border-radius: 18px }
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
Individuelle Ecken von border abrunden
elem { border-top-left-radius: 18px }

margin – äußerer Rand: Abstand zum umgebenden Block

margin Abstand von benachbarten Elementen
px, pt, pc, cm, in, em, ex, %, auto ] {1,4}
margin-top, margin-right, margin-bottom, margin-left margin an den einzelnen Seiten
px, pt, pc, cm, in, em, ex, %, auto

padding – Abstand des Inhalts zum den Rand des Elements.

padding Kurzschrift
px, pt, pc, cm, in, em, ex, % {1,4}
padding-top, padding-right, padding-bottom, padding-left
px, pt, pc, cm, in, em, ex, %

Effekte: Shadow, Gradient, Transition, Transform

text-shadow setzt einen Schatten hinter den Text
text-shadow: 3px 3px 4px #777
linear-gradient Linearer Verlauf ohne Hintergrundbild
linear-gradient(to top, white 0%, black 50%)
radial-gradient Kreisverlauf ohne Hintergrundbild
background-image: radial-gradient( white 29%, blue 50%)
transition ändert den Wert einer CSS-Eigenschaft über die Zeit
transition-property , transition-duration, transition-timing-function, transition-delay
transform ändert die Position, Größe und Form von HTML-Elementen
translate, translateX, translateY, scale, scaleX, scaleY, scaleZ, scale3d, rotate, rotate3d, skew, skewX, skewY, matrix, matrix3d, perspective, transform-origin

Generated Content

Automatische Erzeugung von Inhalten und Nummerierung

content automatisch generierte Inhalte (z.B. Zeichenketten, Hochkommas, Zähler)
selector::before { content: "string" attr(x) attr(y) "string"; }
attr(x), counter(name), counter(name, list-style-type), counters(name, string), counters(name, string, list-style-type), no-close-quote, no-open-quote, close-quote, open-quote, string, uri("urladdress")
counter-increment generiert Zähler
section { counter-increment: mycounter 10; }
none, normal, [ identifier number? ]+
counter-reset Zähler auf Anfangswert zurücksetzen
section { counter-increment: section-counter; counter-reset: h3-counter; }
none, [ identifier number? ]+
quotes Liste von Anführungszeichen
blockquote p { quotes: "»" "«"; }
none | [ string string? ]+

Horizontale und vertikale Abmessung eines Elements

Z.B. Höhe und Breite eines Absatzes, einer Tabelle, eines <div>-Containers und der Zeilenhöhe.

width / height Breite / Höhe eines Blockelements
px, pt, pc, cm, in, em, ex, %, auto
line-height Abstand aufeinander folgenden Zeilen
normal , number , px, pt, pc, cm, in, em, ex, %
max-width / max-height maximale Breite / Höhe eines Elements
none, px, pt, pc, cm, in, em, ex, %
min-width / min-height minimale Breite / Höhe eines Elements
px, pt, pc, cm, in, em, ex, %
box-sizing Vereinfacht das CSS-Box-Modell
box-sizing: border-box, box-sizing: content-box

font und text

Darstellung von Schrift (Schriftart, -größe, -stile und -varianten) und Text

font Kurzfassung für alle Eigenschaften der Schrift
p { font: italic small-caps bold 1.2em/1.5em Georgia,Times,serif; }
[ [ font-style &| font-variant &| font-weight ]? font-size [ / line-height ]? font-family ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
font-family wählt eine spezielle Schrift
[ [ family-name | generic-family], ]* [family-name | generic-family] | inherit
font-size Größe der Schrift
cm (Zentimeter), em (ems), ex (x-Höhe), in (Inch), mm (Millimeter), pc (Pica), pt (Punkt), px (Pixel), %, larger, smaller, xx-small, x-small, small, medium, large, x-large, xx-large
font-style Schriftstil
normal | italic | oblique
font-variant stellt die Schrift in Kapitälchen dar
normal, small-caps
font-weight Abstufungen von fett
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
direction Richtung des Textflusses
ltr | rtl
letter-spacing Abstand zwischen den Zeichen eines Textes
normal, px, pt, pc, cm, in, em, ex, %
text-align Text-Ausrichtung
left | right | center | justify
text-decoration Unterstreichen (wie Links)
none, text-decoration-line, text-decoration-color, text-decoration-style, text-decoration-skip
text-indent Text einrücken
px, pt, pc, cm, in, em, ex, %
text-transform Groß- und Kleinschreibung
capitalize, uppercase, uppercase, lowercase, none
unicode-bidi Richtung des Textes
bidi-override , embed, normal
vertical-align Vertikale Ausrichtung
baseline, sub, super, top, text-top, middle, bottom, text-bottom, px, pt, pc, cm, in, em, ex, %
white-space Weißraum innerhalb eines Elements
normal, pre, pre-wrap, pre-line, nowrap
word-spacing Weißraum zwischen Wörtern.
normal , px, pt, pc, cm, in, em, ex, %

Listen – ungeordnete Aufzählungen

Ungeordnete Listen werden per Default durch gefüllte Kreise / Punkte eingeleitet, gefolgt von einem Einzug und einem Text. Alternativ können eigene Bilder anstelle des gefüllten Kreises benutzt werden.

Geordnete Aufzählungen werden durch eine Folge von Zahlen oder Buchstaben eingeleitet, gefolgt von einem Einzug und einem Text.

list-style-image Adresse eines Bildes als Aufzählungssymbol
.active { list-style-image:url(open.svg) }
url ("urladdress") | none
list-style-position >Einziehen von Listenelementen
inside | outside
list-style-type Aufzählungssymbol in einer Liste
disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, armenian, cjk-ideographic, georgian, lower-greek, hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha, lower-latin, upper-latin
list-style Kurzschrift
list-style-image &| list-style-position &| list-style-type

CSS Positionieren

Die große Auswahl: absolute und relative Positionierung, float, display: flex und display: grid

float setzt ein Element an den linken oder rechten Rand
.img-left { float: left; }
left, right, none
clear beendet float
h2 { clear: both; }
both, left, right, none
position Art der Positionierung
.slides { position: relative; }
absolute, fixed, relative, static, sticky
top, right, bottom, left Position
auto , px, pt, pc, cm, in, em, ex, %
display Typ des Elements
block, flex, grid, inline, inline-block, inline-table, list-item, marker, run-in, table, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, table-row-group, none
z-index Ebene für positionierte Elemente
auto | number
flex Layout und Positionieren in Zeilen und Spalten
.row { display: flex}

Visual Effects – Layout vor Inhalt

Die Stile der Gruppe Visual Effects geben den Maßen eines Elements Vorrang vor den Inhalten (ähnlich wie die Stile für Tabellen) und beschneiden übergroße Inhalte.

clip Beschneiden (deprecated)
.clipped { clip:rect(50px 550px 300px 100px); }
auto | rect (top, right, bottom, left)
clip-path Beschneiden mit Freistellpfad
.clipPath { clip-path: url(#clipPath) }
overflow Verhalten beim Überfließen des Inhalts
auto, hidden, scroll, visible
visibility Sichtbarkeit
collapse, hidden, visible
box-shadow erzeugt einen oder mehrere Schlagschatten

CSS-Stile für Tabellen

Stile für Tabellen verleihen den vorgegebenen Maßen der Tabelle Vorrang vor den Inhalten und modernisieren das sichtbare Gitternetz der Tabelle.

border-collapse Tabellenrahmen zusammenlegen
table { border-collapse: collapse; }
collapse, separate
border-spacing Raum zwischen Tabellenrahmen
px, pt, pc, cm, in, em, ex, %
caption-side Position einer Tabellenbeschriftung
bottom, top
empty-cells unterdrückt die Darstellung leerer Zellen
hide, show
table-layout feste Breite
auto, fixed

User Interface – Mauszeiger und Extrarahmen

Stile für die Gestaltung von Elementen der Benutzerschnittstelle

cursor Symbol für den Mauszeiger
auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize; w-resize; text; wait; help | <uri> | progress
outline-color zusätzlicher Rahmen ohne Platzanspruch
color
outline-style Form eines zusätzlichen Rahmens
wie border-style
outline-width Breite eines zusätzlichen Rahmens
wie border-width
outline Kurzschrift
outline-color
outline-style
outline-width

Paged Media

Während die Ausgabe auf dem Monitor und die Sprachausgabe als "fortlaufende" Ausgabe betrachtet werden können, muss der Druck ein HTML-Dokument in eine oder mehrere Seiten unterteilen. Die Seitenausgabe erweitert das Modell der visuellen Formatierung um die Seitenbox und Seitenumbrüche.

page-break-before
page-break-after

Seitenumbruch
auto | always | avoid | left | right
page-break-inside
auto | avoid
orphans
Absätze umbrechen: Hurenkinder
integer
widows
Absätze umbrechen: Schusterjungen
integer
:left :right :first
linke, rechte, erste Seite
first | left | right
BACKGROUND BORDER DIMENSION FONT POSITION TABLE FLOAT background-attachment background-color background-size background-repeat border-width border-style border-color width height min-width max-width line-height font-family font-size font-style font-variant font-weight absolute relative static fixed sticky border-collapse border-spacing empty-cells table-layout left right