CSS, HTML und Javascript mit {stil}

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

@keyframes Keyframes-Regel
.qualm { animation-name: smoke; animation-duration: 5s; }
@keyframes smoke {
from { transform: translateX(0px) } to { transform: translateX(-100px) }}
animation Kurzschrift
.qualm { animation: smoke 5s; }
animation-name, animation-delay, animation-duration, animation-direction, animation-play-state, animation-iteration-count,animation-fill-mode, animation-timing-function

background and color – Hintergrund- und Vordergrundfarben

color Farbe des Vordergrundes
Hex-Wert, RGB-Wert, HSL-Wert, linear-gradient, radial-gradient, transparent
opacity Transparenz
0 – 1
background Kurzschrift – fasst Eigenschaften zusammen
background-color, background-image, background-repeat, background-attachment, background-position
background-attachment Hintergrund steht fest oder scrollt
scroll, fixed
background-clip Hintergrund unter border
padding-box, border-box, content-box
background-color Hintergrundfarbe eines Elementes
transparent, Hex-Wert, RGB-Wert, HSL-Wert, Gradient
background-image Hintergrundbild
uri | none
background-origin Ursprung und Reichweite
padding-box, border-box, content-box
background-position anfängliche Position
px, pt, pc, cm, in, em, ex, % {1,2} | [ [ top | center | bottom ] und / oder [ left | center | right ] ]
background-repeat Hintergrundbild wiederholen
repeat | repeat-x | repeat-y | no-repeat
background-size Hintergrundbild skalieren
px, pt, pc, cm, in, em, ex, %, contain, cover
box-shadow erzeugt einen oder mehrere Schlagschatten

border – sichtbarer Rahmen um ein Element

border Kurzschrift für alle Eigenschaften
border-width , border-style , border-color
border-color Farbe des Rahmens an allen vier Seiten
Hex-Wert, RGB-Wert, HSL-Wert, linear-gradient, linear-gradient, transparent
border-top-color, border-right-color, border-bottom-color, border-left-color Farbe des Rahmens
Hex-Wert, RGB-Wert, HSL-Wert, linear-gradient, linear-gradient, transparent
border-style Stil aller vier Rahmenseiten
none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
border-top
border-right, border-bottom, border-left
border-top-style, border-right-style, border-bottom-style, border-left-style Rahmenlinie
hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
border-width Breite aller vier Rahmenseiten
thin, medium, thick, px, pt, pc, cm, in, em, ex, %
border-top-width, border-right-width, border-bottom-width, border-left-width Breite des Rahmens
thin, medium, thick, px, pt, pc, cm, in, em, ex, %
border-image Schmuckrahmen aus einem Bild, SVG-Grafik oder Verlauf
border-image-source, border-image-slice, border-image-width, border-image-repeat, none
border-radius rundet die Ecken von HTML-Boxen ab
border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius

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

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