Liste CSS-Eigenschaften

CSS Eigenschaften, Liste und Tabelle

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 Animationen und Techniken für die Berechnung von Abmessungen ergänzt.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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:

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
.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 – 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.