CSS Liste der Eigenschaften

Wer kennt alle CSS-Stile?

Heute sind es zu viele, um alle CSS-Stile hier vorzustellen und um alle Eigenschaften und ihre Wirkung systematisch in den Griff zu bekommen. Von Zeit zu Zeit lohnt sich ein Blick, um Altes wieder auszugraben oder neue Ideen aufzutun. Dabei sind Eigenschaften, die bei jedem Design einer Webseite zum Tragen kommen, und Stile, die einer Seite ein vollständig neues Erscheinungsbild verleihen.

Die Eigenschaften sind hier in Gruppen eingeteilt:

animation – CSS-Animationen
background – Hintergrundfarben und -bilder
border – Gestaltung eines Rahmens um ein Element
Columns – Spaltensatz
Color – Farbe
dimension – Abmessung und Ausrichtung von Elementen
generated content – Automatisch generierter Inhalt
display: flex Flexbox-Layout erzeugt einfache Zeilen oder Spalten
display: grid Layout-Elemente in einem Raster anordnen
font – Schriftgestaltung
lists – ungeordnete und geordnete Listen
margin – Abstand eines Elements gegen umgebende Elemente
Outline Rahmen ohne Platzbedarf
padding – Inneren Abstand (Poster) zum Element
paged media – Drucken
table – Gestaltung von Tabellen
text Textgestaltung
transform CSS Transformationen
transition Übergänge zwischen CSS Eigenschaften
visual – Visuelle Formatierung: Positionierung, Overflow

Eigenschaften eines Elements zurücksetzen

all: Setzt alle Eigenschaften, die einem Element zugewiesen wurden, zurück auf die initialen Werte.

CSS-Animation

animation Deklariert eine Keyframe-Animation, die eine oder mehr Eigenschaften an einem oder mehreren Zeitpunkten ändert: .qualm { animation: smoke 5s; }
animation-delay Verzögerung des Starts (z.B. für die Synchronisation von Animationen, wenn eine Animation erst starten soll, nachdem eine andere abgelaufen ist): .qualm { animation: smoke 5s 1s; }
animation-direction einfacher, zyklischer, umgekehrter oder alternierender (hin- und zurück) 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 – easing 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 }

color – Farbe

color Farbe für den Text eines Elements: elem { color: firebrick; }
opacity Transparenz, Durchsichtigkeit eines Elements: elem { opacity: 0.5; }

Column – Spaltensatz

columns Kurzschrift für column-width und column-count: .cols { columns: 200px 3; }
column-count Zahl der Spalten: .cols { column-count: 3; }
column-fill Gibt an, wie Spalten zu füllen sind: .cols { column-count: 3; }
column-gap Abstand zwischen Spalten: .cols { column-fill: balance; }
column-rule senkrechte Linie zwischen Spalten: .cols { column-rule: 2px double silver;
column-rule-style Stile der senkrechten Linie zwischen Spalten: .cols { column-rule-style: dotted; }
column-rule-width Breite der Linie: .cols { column-rule-width: 2px; }
column-span Zahl der Spalten, über die sich ein Element spannt (z.B. eine Überschrift): h2 { column-span: all; }
column-width Optimale Breite der Spalten: .cols { column-width: 28vh; }

Horizontale und vertikale Abmessung eines Elements

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

aspect-ratio Seitenverhältnis von Elementen: Verhältnis der Seiten eines Rechtecks als Breite zu Höhe.
width height Breite / Höhe eines Blockelements: elem { width: 80vh; }
max-width max-height maximale Breite / Höhe eines Elements: elem { max-width: 40%; }
min-width min-height minimale Breite / Höhe eines Elements: elem { min-width: 200px; }

Generated Content

Automatische Erzeugung von Inhalten und Nummerierung

content automatisch generierte Inhalte (z.B. Zeichenketten, Hochkommas, Zähler): elem::before { content: "string" attr(x) attr(y) "string"; }
quotes Liste von Anführungszeichen: blockquote { quotes: "»" "«"; }
counter-increment generiert Zähler: elem { counter-increment: mycounter 10; }
counter-reset Zähler auf Anfangswert zurücksetzen: section { counter-increment: section-counter; counter-reset: h3-counter; }

display:flex – Flexbox-Layout

Ablösung für das trickreiche float: left / float: right, nicht nur flexibler, sondern auch komfortabler.

align-content verteilt die Flexboxen anhand auf der zweiten Achse: elem { display: flex; justify-content: space-around; align-content: flex-start; }
align-items richtet Flexboxen an den Kanten oben, unten oder zentriert entlang der zweiten Achse aus: elem { display: flex; justify-content: space-around; align-items: baseline; }
align-self überschreibt align-items für individuelle Flex-Elemente.: elem { align-self: flex-end; }
flex positioniert Elemente in Zeilen bzw. Spalten.: elem { display: flex; }
flex-basis anfängliche Breite der Flex-Items: elem:nth-child(1) { flex-basis: 25%; }
flex-direction Verteilt alle direkten Nachkommen in einer Zeile (bzw. in einer Spalte): elem { display: flex; flex-direction: column; }
flex-flow Kurzschrift für flex-direction und flex-wrap: elem { flex-flow: column wrap; }
flex-grow verteilt überschüssigen Raum: elem:nth-child(1) { flex-shrink: 3; }
flex-shrink verkleinert die Elemente, enn der Raum zu klein ist.: elem { display: flex; flex-wrap: wrap; }
flex-wrap bricht die Zeile / Spalte um oder kehrt die Reihenfolge der Flexboxen um.: elem { display: flex; flex-wrap: wrap; }
justify-content richtet Flexboxen entlang der Hauptachse aus: elem { display: flex; justify-content: space-around; }
order bestimmt eine ausdrückliche Reihenfolge: elem:nth-child(1) { order: 4; }

display:grid – Grid-Layout

Das CSS Grid erzeugt ein Layout-Raster, ähnlich wie Tabellen mit Zeilen und Spalten, aber perfekt für ein responsives Layout.

display: grid macht das Layout unabhängig von der Reihenfolge der Inhalte.: elem { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 28px}
justify-content und align-content, justify-self und align-self Grid-Container und Grid-Elemente ausrichten.: elem { display: grid; align-content:space-between }
grid-template-areas und grid-area Anstelle von Zeilen und Spalten treten Namen für die Zellen des Grid-Rasters.: elem { display: grid; grid-template-areas: "sitebar main marginale"; grid-template-columns: 1fr 1fr 1fr }

font – Schrift

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

font Kurzfassung für alle Eigenschaften der Schrift: elem { font: italic small-caps bold 1.2em/1.5em Georgia,Times,serif; }
font-family wählt eine spezielle Schrift: elem { font-family: Helvetica, Arial, sans-serif}
font-size Größe der Schrift: elem { font-size: 1.2em; }
font-size-adjust Erhält die Lesbar des Texts, wenn auf ein Fallback der Schrift zurückgegriffen wird: elem { font-size-adjust: 0.58; }
font-stretch Dehnt den Text im Element aus (variable Fonts, alle modernen Browser): elem { font-stretch: expanded; }
font-style Schriftstil: elem { font-style: italic; }
font-variant stellt die Schrift in Kapitälchen dar: elem { font-variant: small-caps; }
font-weight Abstufungen von fett: elem { font-weight: 600; }

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 Kurzschrift: elem { list-style: url(closed.png) outside; }
list-style-image Adresse eines Bildes als Aufzählungssymbol: elem { list-style-image:url(open.svg) }
list-style-position >Einziehen von Listenelementen: elem { list-style-position: outside; }
list-style-type Aufzählungssymbol in einer Liste: elem {list-style-type: lower-alpha; }

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

margin Abstand von benachbarten Elementen: elem { margin: 2em auto; }
margin-top margin-right margin-bottom margin-left margin an den einzelnen Seiten eines Elements.: elem { margin-bottom: 2em; }

Outline

Extra-Rahmen ohne Platzbedarf (z.B. um ein aktives Eingabefeld)

outline-color zusätzlicher Rahmen ohne Platzanspruch: elem { outline-color: blue}
outline-style Form eines zusätzlichen Rahmens: elem { outline-style: solid}
outline-width Breite eines zusätzlichen Rahmens: elem { outline-width: 2px; }
outline Kurzschrift für outline-color, outline-style und outline-width.: elem { outline: 2px solid blue}

padding – Abstand des Inhalts zum den Rand des Elements.

padding Kurzschrift für alle vier Eigenschaften: elem { padding: 8px auto}
padding-top padding-right padding-bottom padding-left Polster an den vier Seiten eines Elements: elem { padding-bottom: 8px; }

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-after Seitenumbruch: @media print { footer { page-break-after: always; } }
page-break-before Seitenumbruch: @media print { footer { page-break-after: avoid; } }
page-break-inside: pre, blockquote {page-break-inside: avoid; }
orphans Absätze umbrechen: Hurenkinder, min. Zahl der Zeilen am Ende: elem { orphans: 2; }
widows Absätze umbrechen: Schusterjungen: elem { widows: 3; }
:left :right :first linke, rechte, erste Seite: first | left | right

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; }
border-spacing Raum zwischen Tabellenrahmen: table { border-collapse: separate; border-spacing: 10px 15px; }
caption-side Position einer Tabellenbeschriftung: table { caption-side: bottom; }
empty-cells unterdrückt die Darstellung leerer Zellen: table { empty-cells: hide; }
table-layout feste Breite: table { table-layout: fixed; }

Text

direction Richtung des Textflusses: ltr | rtl
tab-size Breite eines Tabulatorsprungs
text-align Text-Ausrichtung: elem { text-align: justify; }
text-align-last Text-Ausrichtung: elem { text-align-last: left; }
text-decoration Unterstreichen (wie Links): elem { text-decoration: none; }
text-decoration-line text-decoration-color text-decoration-style text-decoration-skip
text-indent Text einrücken: p:first-line { text-indent: 4px; }
text-overflow Text kürzen, der zu lang für ein Element ist.: elem { overflow: hidden; text-overflow:ellipsis; }
text-justify legt die Blocksatzmethode fest, wenn text-align: justify gilt.: elem { text-align: justify; text-justify: inter-word; }
text-shadow setzt einen Schatten hinter den Text: text-shadow: 3px 3px 4px #777
text-transform Groß- und Kleinschreibung: elem { text-transform: uppercase; }
line-height Abstand aufeinander folgenden Zeilen: body { line-height: 1.5; }
vertical-align Vertikale Ausrichtung relative zur Grundline (baseline): elem { vertical-align: top; }
letter-spacing Abstand zwischen den Zeichen eines Textes: h1 { letter-spacing: 1px; }
unicode-bidi Richtung des Textes: bidi-override , embed, normal
word-spacing Weißraum, Abstand zwischen Wörtern.: elem { word-spacing: 1em; }
white-space Behandlung von Leerzeichen innerhalb eines Elements: elem { white-space: pre-wrap; }
word-break besonders für chinesischen, japanischen und koreanischen Text: lange Wörter umbrechen.
word-wrap Wörter umbrechen, wenn der Text über den Rand des Blocks läuft: elem { word-wrap: break-word; }

Transformationen

backface-visibility gibt an, ob die Rückseite eines Elements angezeigt werden soll oder nicht: elem { backface-visibility: hidden; }
perspective Legt die Perspektive fest: elem { transform:perspective(500px) rotateY(75deg); }
perspective-origin Der Ursprung der Perspektive (3D Fluchtpunkt): elem { transform:perspective(500px) rotateY(75deg); }
transform ändert die Position, Größe und Form von HTML-Elementen: elem { transform:rotate(60deg); }
transform-style 3D-Transformation von verschachtelten Elementen
: elem { transform-style: preserve-3d; }

Transitions

transition Kurzschrift: ändert den Wert einer CSS-Eigenschaft über die Zeit: input { border-bottom-color: silver; transition: border-bottom-color 1s 2s; }
transition-delay Verzögerung bis zum Start der Transition: elem { transition-delay: 2s; }
transition-duration Dauer der Transition: elem { transition-duration: 1s; }
transition-property CSS Eigenschaften, die durch transition geändert werden.: elem { transition-name: border-bottom-color; }

Visuelle Formatierung

display legt fest, wie ein Element im Browser angezeigt werden soll.: elem { display: table; }
position Art der Positionierung: .slides { position: relative; }
top right bottom left Platziert ein absolut oder relative positioniertes Element: elem { position: absolute; top: 0; left: 0; }
float setzt ein Element an den linken oder rechten Rand: .img-left { float: left; }
clear beendet float: h2 { clear: both; }
z-index Ebene für positionierte Elemente: auto | number
overflow Verhalten beim Überfließen des Inhalts: auto, hidden, scroll, visible
overflow-x overflow-y Verhalten beim Überfließen des Inhalts: auto, hidden, scroll, visible
resize
clip Beschneiden (deprecated, aber noch unersetzlich): .clipped { clip:rect(50px 550px 300px 100px); }
clip-path Beschneiden mit Freistellpfad: .clipPath { clip-path: url(#clipPath) }
visibility Sichtbarkeit: elem { visibility: hidden; }
cursor Symbol für den Mauszeiger: elem { cursor: pointer; }
box-shadow erzeugt einen oder mehrere Schlagschatten
box-sizing Vereinfacht das CSS-Box-Modell: box-sizing: border-box, box-sizing: content-box

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.