Cascading Style Sheets

CSS beschreiben die typographische Gestaltung von strukturierten Dokumenten. Ursprünglich legte man damit Schriften, Farben, Rahmen und Hintergründe fest. Seit Level 3 wird die Spezifikation in verschiedene Module aufgeteilt und von der WHATWG kontinuierlich weiterentwickelt.

Beispiel

Das folgende Beispiel lädt Vorgaben aus einer weiteren Datei, zentriert alle Elemente der Klasse nav und stattet alle betitelten Absätze mit eine Versalie aus.

style.css
@import url(../style.css);

.nav {
	text-align: center;
}

p[title]:first-letter {
	font-size: xx-large;
}

Stilvorlagen betten wir vorzugsweise über ein link-Element in der Präambel des HTML-Dokuments ein. Dokumentspezifische Definitionen in der Präambel oder das direkte Einbetten in Elemente mit dem style-Attribut wollen wir vermeiden.

index.html
<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="style.css" />
		<style>
			body { text-align: justify; }
		</style>
	</head>
	<body style="hyphens: auto">
		…
	</body>
</html>

Syntax

Eine Stilvorlage besteht aus Direktiven und Regelsätzen. Eine Direktive bindet weitere Dateien ein, lädt Schriften oder legt Regeln für spezielle Ausgabemedien fest. Ein Regelsatz besteht aus einem Selektor, der eine Untermenge von Elementen auswählt, und einer Liste von Name-Wert-Paaren, welche die Eigenschaften der ausgewählten Elemente bestimmen.

Variable	Produktion	Beschreibung
`String`	{CHAR}	Zeichenkette
`Number`	[+\|-] {DIGIT} [. {DIGIT}]	Zahlenliteral
`Name`	ALPHA {ALPHA \| DIGIT \| _ \| -}	Bezeichner
Produkt	Produktion	Beschreibung
css	at-rule rule-set …	Datei mit Direktiven und Regeln
at-rule	@import url(`Url`);	Weitere Stilvorlage einfügen
	@charset `String`;	Zeichenkodierung dieser Datei
	@media media { rule-set }	Ausnahmen für bestimmte Ausgabemedien
	@page :pages { rule-set }	Seitenlayout
	@font-face {font}	Webfonts
	@namespace `Name` "`Url`";	Namensraum definieren
rule-set	selektor { `Property`: …; }	Regeln enthalten Eigenschaften
selektor	element	Elementname
	[attribute]	Element enthält Attribut
	#`Id`	`id`-Attribut
	.`Class`	`class`-Attribut
	:pseudoclass	Element ist im Zustand
	selektor selektor	Element ist Nachfahre
	selektor * selektor	Element ist Enkel
	selektor > selektor	Element ist Kind
	selektor + selektor	Element ist Geschwister
	name\|selektor	Namensraum, `*` für Alle
attribute	`Name`	Attribut ist vorhanden
	`Name` = "`Value`"	Attribut ist genau
	`Name` ~= "`Value`"	Attribut enthält Token
	`Name` \|= "`Value`"	Attribut enthält Token
	`Name` ^= "`Value`"	Attribut beginnt mit
	`Name` $= "`Value`"	Attribut endet mit
	`Name` *= "`Value`"	Attribut enthält Substring
length	auto	Längenangabe
	`Number`px	Pixel (1/96 Inch) für Linien
	`Number`pt	Punkt (1/72 Inch) für Schrift
	`Number`pc	Pica (12 Punkt)
	`Number`in	Inch (2.54 Zentimeter)
	`Number`cm	Zentimeter
	`Number`mm	Millimeter
	`Number`Q	¼ Millimeter
	`Number`%	Relativ zum Elternelement
	`Number`*	Anteilig (`1* 2* 3*` entspricht 1/6, 1/3 und 1/2)
	`Number`em	Breite des Metallblocks `M`
	`Number`ex	Höhe des Buchstaben `x`
	`Number`ch	Breite der `0`, meist `0.5em`
	`Number`rem	Schriftgröße des Wurzelelements
	`Number`vw	1/100 Anzeigebreite
	`Number`vh	1/100 Anzeigehöhe
	`Number`vmin	Das Kleinere von `vh` und `vw`
	`Number`vmax	Das Größere von `vh` und `vw`
Pseudoklassen
pseudoclass	link	Ankerziel unbekannt
	visited	Ankerziel bekannt
	active	Anker angeklickt
	before	Vor dem Inhalt
	after	Nach dem Inhalt
	first-letter	Erster Buchstabe
	first-line	Erste Zeile
	hover	Element hat Mauszeiger
	focus	Element im Fokus
	lang(de \| en \| …)	Sprachcode (`lang`-Universalattribut)
	first-child	Das erste Kindelement
	nth-child(even \| odd)	Nur gerade oder ungerande Kindelemente
	nth-child(`Number`n + `Number`)	Nur das soundsovielte Kindelement
	target	Id enstpricht URL-Fragment
	enabled	Formularelement aktiv
	disabled	Formularelement inaktiv (ausgegraut)
	checked	Checkbox angehakt
	indeterminate	Checkbox weder an- noch abgewählt
	root	Wurzelelement (`html`)
	nth-last-child
	nth-of-type
	nth-last-of-type
	last-child
	only-child
	first-of-type
	last-of-type
	only-of-type
	empty	Element hat weder Text noch Kindelemente
	not(selector)	Invertiert die Bedeutung des Selektors
	footnote-call	Verweis auf Fussnote
	footnote-marker	Zähler in der Fussnote

Box

Die Seite wird von oben nach unten mit Block-Elementen (zum Beispiel Überschriften, Absätze und Bilder) gefüllt. Diese wiederum werden von links nach rechts mit Inline-Elementen (Buchstaben, Wörter, Hyperlinks) gefüllt, wobei Zeilen automatisch umgebrochen werden.

static static static relative static … absolute
bottom left absolute
bottom right <div>

fixed
top right fixed
bottom right

Diese Vorgaben können durch Schreibrichtung und Positionierung beeinflusst werden.

Klassifikation
display:	initial		Standardverhalten
	none	script	Keine Box erzeugen, auch nicht für Kindelemente
	inline	span	Normaler Textfluss mit automatischem Zeilenumbruch
	block	div	Neue Zeile mit der Breite des Elternelements
	inline-block		Neue Zeile mit eigener Breite
	inline-table		Fließende Tabelle
	list-item	li	Zwei Boxen für Markierung und Inhalt
	run-in		Inline oder Block abhängig vom Kontext
	table	table	Matrix mit Zeilen und Spalten
	table-caption	caption	Tabellenüberschrift
	table-column	col	Spalte
	table-column-group	colgroup	Spaltengruppe
	table-header-group	thead	Tabellenkopf
	table-row-group	tbody	Tabellenkörper
	table-footer-group	tfoot	Tabellenfuss
	table-row	tr	Tabellenzeile
	table-cell	td	Tabellenzelle
	flex		Dehnbare Benutzerschnittstelle
	inline-flex
Positionierung
position:	static		Normalposition (Default ohne Positionierung)
	relative		Verschiebung relativ zur Normalposition
	absolute		Abstand vom Rand des nächsten (nicht-statischen) Elterelements
	fixed		Abstand vom Rand des Sichtbereichs
	running(name)		In der Kopf- oder Fusszeile
top:	length		Element nach unten verschieben
right:	length		Element nach links verschieben
bottom:	length		Element nach oben verschieben
left:	length		Element nach rechts verschieben
Sichtbarkeit
visibility:	visible \| hidden \| collapse		Element sichtbar, unsichtbar oder minimiert
overflow:	auto		Zu große Objekte…
	visible		…hinausragen lassen, abschneiden oder mit Rollbalken
	hidden		…abschneiden oder mit Rollbalken
	scroll		…Rollbalken anzeigen
clip:	auto		Inhalt am Rahmen abschneiden
	rect(top, right, bottom, left)
z-index:	`Number`		Tiefe für Überlappungen
Flexbox
flex:	grow shrink basis		Kombiniertes Ausdehnungsverhalten
	none	0 0 auto	Unflexibel
	initial	0 1 auto	Linksbündig
	auto	1 1 auto	Ausdehnen
flex-grow:	`Number`		Gewicht beim Ausdehnen
flex-shrink:	`Number`		Gewicht beim Schrumpfen
flex-basis:	size \| fill \| {min,fit,max}-content		Initiale Größe des Elements
flex-flow:	direction wrap		Flussrichtung und Umbruch
flex-direction:	row[-reverse] \| column[-reverse]		Zeilen- oder Spaltenweise fliessen
flex-wrap:	nowrap \| wrap[-reverse]		Zeilen bzw. Spalten umbrechen
order:	`Number`		Index für Sortierung
Ausrichtung
place-content:	align justify		Alle Nachfahren ausrichten und verteilen
place-items	align justify		Nur Kindelemente ausrichten und verteilen
justify-content:	…		Ausrichtung
align-content:	…		Mehrzeilige
justify-items:	…		Ausrichtung
align-items:	…		Mehrzeilige
align-self:	…		Ein Element
	normal
	space-{between,around,evenly}		Zwischenraum
	[[un]safe] start \| center \| end		Positionierung
gap:	height width		Durchschuss
row-gap	height		Zeilendurchschuss
column-gap	width		Spaltendurchschuss

Rahmen

Dimension
[min-\|max-]width:	length	Breite des Elements
[min-\|max-]height:	length	Höhe des Elements
Abstände
margin[…]:	length	Außenabstand
padding[…]:	length	Innenabstand
Umrandung
border[…]:	width style color	Umrandung
border[…]-width:	length	Randbreite
border[…]-style:	none \| hidden	ganz ohne oder verborgen
	dotted \| dashed	gepunktet oder gestrichelt
	solid \| double	einfach oder doppelt
	groove \| ridge	gefugt oder gegratet
	inset \| outset	eingelassen oder aufgesetzt
border[…]-color:	color	Rahmenfarbe
Hintergrund
background:	color image repeat attach pos	Hintergrund
background-color:	color	Hintergrundfarbe
background-image:	url(`Url`)	Hintergrundbild
background-repeat:	repeat	Hintergrundbild kacheln
	no-repeat	Keine Wiederholung
	repeat-x	Horizontal wiederholen
	repeat-y	Vertikal wiederholen
background-attachment:	scroll \| fixed	Mitrollen oder verankern
background-position:	top left	Abstand zur linken oberen Ecke
Mauszeiger
cursor:	auto \| default \| crosshair \| pointer
	help \| move \| progress \| text \| wait
	n-resize \| ne-resize \| e-resize \| se-resize
	s-resize \| sw-resize \| w-resize \| nw-resize

Text

Das CSS Text Module beschreibt Zeilenumbruch und Ausrichtung, das CSS Text Decoration Module Unterstreichungen, Schattenwurf und Betonungsmarker in asiatischen Sprachen und CSS Writing Modes alle Varianten der Schreibrichtung.

Zeilenumbruch
white-space:	normal	Zeilen umbrechen, Leerzeichen zusammenfassen
	pre	Zeilen nicht umbrechen, Leerzeichen beibehalten
	nowrap	Zeilen nicht umbrechen, Leerzeichen zusammenfassen
	pre-wrap	Zeilen umbrechen, Leerzeichen beibehalten
	pre-line	Zeilen umbrechen, Leerzeichen zusammenfassen
word-spacing:	normal \| length	Zusätzlicher Raum zwischen Wörtern
letter-spacing:	normal \| length	Zusätzlicher Raum zwischen Buchstaben
line-height:	normal \| length	Abstand der Grundlinien
line-break:	auto \| loose \| normal \| strict	Weiche Trennung zwischen Interpunktion
word-break:	normal \| keep-all \| break-all	Harte Trennung zwischen Buchstaben
hyphens:	none \| manual \| auto	Silbentrennung
word-wrap:	normal \| break-word	Verhalten bei sonst untrennbaren Wörtern
hanging-punctuation:	none \| first [force-end \| allow-end] last	Klammern außerhalb des Textblocks darstellen
Ausrichtung
vertical-align:	baseline	Grundline
	top	Oberkante der Box
	middle	Mitte der Box
	bottom	Unterkante der Box
	sub	Tiefgestellt
	super	Hochgestellt
	text-bottom	Unterkante der Elternbox
	text-top	Oberkante der Elternbox
text-align:	left \| right \| justify \| center	Ausrichtung links-, rechts-, blockbündig oder zentriert
	start \| end	Sprachabhängig
	start end	Erste Zeile linksbündig, weitere rechtsbündig
	match-parent	Wie beim Elternelement
text-align-last:	auto \| start \| end \| …	Ausrichtung der letzten Zeile im Absatz
text-justify:	auto \| none \| inter-word \| distribute	Strategie für Blocksatz
text-indent:	length [hanging] [each-line]	Einrückung der ersten Zeile
Dekoration
text-decoration:	line style color	Linie, Muster und Farbe
text-decoration-line:	none \| blink \| line-through \| overline \| underline	Keine, Blinkend, Mittel, Ober- oder Unterstrich
text-decoration-style:	solid \| double \| dotted \| dashed \| wavy	Einfach, Doppelt, Gepunkted, Gestrichelt oder Wellig
text-decoration-color:	color	Farbe der Dekoration
text-decoration-skip:	none \| objects \| spaces \| ink \| edges \| box-decoration	Auslassungen beim Dekorieren
text-underline-position:	auto \| under \| left \| right	Abstand der Unterstreichung
text-emphasis:	style color	Betonung in asiatischen Sprachen
text-emphasis-style:	none	Keine Betonungsmarken setzen
	filled dot • \| circle ● \| double-circle ◉ \| triangle ▲ \| sesame ﹅
	open dot ◦ \| circle ○ \| double-circle ◎ \| triangle △ \| sesame ﹆
	`String`	Zeichenkette statt Symbol
text-emphasis-color:	color	Farbe der Betonungsmarken
text-emphasis-position:	over \| under right \| left	Position der Betonungsmarken
text-shadow:	none \| horizontal vertical blur-radius color	Schattenwurf
Schreibrichtung
direction:	ltr \| rtl	Schreibrichtung meist von Links nacht Rechts
unicode-bidi:	normal	Definition für Vorne und Hinten in einer Box
	embed
	bidi-override
	isolate-override
	plaintext
writing-mode:	horizontal-tb	Horizontal von Oben nach Unten
	vertical-rl	Vertikal von Rechts nach Links
	vertical-lr	Vertikal von Links nach Rechts
	lr \| lr-tb \| rl \| rl-tb \| tb \| tb-rl	SVG
text-orientation:	mixed	Textorientierung
	upright
	sideways-right
	sideways-left
	sideways
	use-glyph-orientation
text-combine-upright:	none \| all \| digits `Number`	@todo
Sonstiges
text-transform:	none	Kein Effekt
	capitalize	Anfangsbuchstaben als Versalien
	lowercase	Kleinbuchstaben
	uppercase	Großbuchstaben
	full-width	Volle Breite
	rotate(length deg)	Drehung

Schrift

Siehe CSS Fonts Module.

`@font-face {…}`
src:	[local("family"),] url(`Url`) [format("fmt")]	Ressource für `@font-face`
	woff \| truetype \| [embedded-]opentype \| svg	Dateiformat
unicode-range:	U+0-10FFFF	Bereich abgedeckter Codepunkte
Schriften
font:	style variant weight stretch size[/height] family	Eigenschaften der Schrift
	caption	Systemschrift für Knöpfe
	icon	Systemschrift für Etiketten
	menu	Systemschrift für Menüs
	message-box	Systemschrift für Dialogboxen
	small-caption	Systemschrift für besonders kleine Elemente
	status-bar	Systemschrift der Statuszeile
font-style:	normal	Aufrecht
	italic	Kursiv
	oblique	Geneigt
font-variant:	normal	Standardschrift
	small-caps	Kapitälchen
	ligatures	Ligaturen
	position	Sub- und Superskripte
	caps	Weitere Kapitälchen
	numeric	Ziffern und Zahlen
	alternates	Schriftspezifische Varianten
	east-asian	Ostasiatische Besonderheiten
font-weight:	normal \| 400	Normal
	bold \| 700	Fett
	bolder	300 mehr
	lighter	300 weniger
	100 \| … \| 900	Numerisches Gewicht
font-stretch:	normal \| narrower \| wider	Laufweite relativ zur Aktuellen
	[ultra-\|extra-\|semi-]condensed	Eng
	[ultra-\|extra-\|semi-]expanded	Weit
font-size:	medium \| smaller \| larger	Schriftgröße relativ zur Aktuellen
	[xx-\|x-]small	Kleiner
	[xx-\|x-]large	Größer
	length	Schriftgröße in Punkt oder relativ zur Grundschrift
font-family:	name, …	Liste von Schriften
	serif	Generische Antiqua
	sans-serif	Generische Groteske
	cursive	Generische Handschrift
	fantasy	Generische dekorative Schrift
	monospace	Generische dicktengleiche Schrift
font-synthesis:	weight style \| weight \| style \| none	Steuerung der Erzeugung fehlender Stile
font-kerning:	auto \| normal \| none	Kerning ein- oder ausschalten
font-size-adjust:	none \| `Number`	Automatische Anpassung der x-Höhe
font-feature-settings:	normal \| "`String`" `Number` \| on \| off	Schriftspezifische Low-Level Einstellungen
font-language-override:	normal \| "`String`"	Sprachspezifische Einstellungen verwenden
font-variant-ligatures:	normal \| none	Ligaturen ein- oder ausschaltenX
	[no-]common-ligatures	Gewöhnliche Ligaturen wie fi und fl(`clig`)
	[no-]discretionary-ligatures	Vom Designer festgelegte Ligaturen (`dlig`)
	[no-]historical-ligatures	Historische Ligaturen wie tz und sz (`hlig`)
	[no-]contextual	Kontextbezogene Ligaturen (`calt`)
font-variant-position:	normal \| sub \| super	Sub- und Superskript-Varianten ein- oder ausschalten
font-variant-caps:	normal	Standard-Kapitälchen
	[all-]small-caps	Kapitälchen mit x-Höhe
	[all-]petite-caps	@todo
	titling-caps	Kapitälchen mit em-Höhe
	unicase	@todo
font-variant-numeric:	normal	Standardeinstellungen verwenden
	lining-nums \| oldstyle-nums	Versal- oder Mediävalziffern
	proportional-nums \| tabular-nums	Variable oder feste Breite
	diagonal-fractions \| stacked-fractions	Diagonale oder vertikale Bruchstriche
	ordinal	Ordnungszahlen wie 1st, 2nd
	slashed-zero	Nullen mit Querstrich
font-variant-alternates:	normal	Standardeinstellungen verwenden
	historical-forms	Historische Schreibweise (hist)
	stylistic(`Salt`)	Schriftspezifische Stilvarianten
	styleset(ss01…20>)	Schriftspezifische Stilsätze
	character-variant(cv01…99)	Schriftspezifische Zeichenvarianten
	swash(swsh`Number`)	Schriftspezifische Schwünge
	ornaments(ornm`Number`)	Ornamente
	annotation(nalt`Number`)	Alternative Formen
font-variant-east-asian:	normal	Standardeinstellungen verwenden
	simplified	Vereinfachte Formen (smpl)
	traditional	Traditionelle Formen (trad)
	full-width \| proportional-width	Breite (fwid) oder (pwid)
	ruby	Annotationen (ruby)
	jis78 \| jis83 \| jis90 \| jis04	Japanische Standards

Farbe

Siehe CSS Color Module Level 3.

color:	#[0…f][0…f][0…f][0…f][0…f][0…f]	Hexadezimal (00-ff) jeweils für Rot, Grün und Blau
	#[0…f][0…f][0…f]	Kurzschreibweise (0-f)
	rgb(`Red`, `Green`, `Blue`)	Dezimal (0-255) oder Prozentual (0-100%)
	hsl(`Hue`, `Saturation`, `Lightness`)	Dezimal (0-255) oder Prozentual (0-100%)
	rgba(`Red`, `Green`, `Blue`, `Opacity`)	RGB mit Transparenz
	hsla(`Hue`, `Saturation`, `Lightness`, `Opacity`)	HSL mit Transparenz
	keyword-color	ANSI- und X11-Farbnamen
	system-color	Systemfarben
	transparent	Entspricht `rgba(0, 0, 0, 0.0)`
opacity:	`Number`	Transparenz von 0.0 (unsichtbar) bis 1.0 (opak)

Listen & Tabellen

Listen
list-style:	type image position	Aufzählungszeichen
list-style-type:	disc \| circle \| square	Knubbel, Kreis oder Quadrat
	decimal \| decimal-leading-zero	1, 2, 3 oder 01, 02, 03
	lower-roman \| upper-roman	i, ii, iii, iv
	lower-latin \| upper-latin	a, b, c oder A, B, C
	lower-alpha \| upper-alpha	a, b, c oder A, B, C
	lower-greek \| armenian \| georgian )	α, β, γ
	symbols("`String`", …)	Liste von Symbolen
list-style-image:	url(`Url`)	Knübbelchengrafik
list-style-position:	outside \| inside
list-pos:	outside \| inside
Tabellen
table-layout:	auto \| fixed	Spaltenbreiten dem Inhalt anpassen oder Inhalt umbrechen
border-collapse:	separate \| collapse	Abstand zwischen Zellenrahmen anzeigen oder zusammenfügen
border-spacing:	length	Abstand zwischen Zellenrahmen
empty-cells:	hide \| show	Umrandung leerer Zellen ausblenden oder anzeigen
caption-side:	top \| bottom	Tabellenüber- oder unterschrift

Seiten

Bei der Aufbereitung für den Druck muss ein Dokument auf Seiten mit festgelegter Größe verteilt werden. Traditionell wird der zentrale Textblock von Kopf- und Fusszeilem sowie inneren und äußeren Rändern eingefasst.

@top-left-corner

@top-left

@top-center

@top-right

@top-right-corner

@left-top

@page :first :blank :left :right

@right-top

@left-middle

@right-middle

@left-bottom

@footnote

@right-bottom

@bottom-right-corner

@bottom-right

@bottom-center

@bottom-left

@bottom-left-corner

Das Modul Generated Content for Paged Media legt diese Bereiche fest. Aktuelle Entwicklungen spiegelt der CSS Books – Living Standard wieder.

Seitenformat (in `@page`)
size:	width height	Dimension
	auto	Abhängig vom Ausgabemedium
	portrait	Hochformat
	landscape	Querformat
margin[…]:	top right bottom left	Seitenränder
marks	crop \| cross \| none	Schnitt- und Registermarken
Seitenumbruch
page:	`Name`	Verwende benannte Seite
page-break-inside:	auto \| avoid	Im Elements nicht umbrechen
page-break-before:	auto \| avoid \| always \| left \| right	Vor dem Element nicht, immer nur links oder nur rechts
page-break-after:	auto \| avoid \| always \| left \| right	Hinter dem Element nicht, immer nur links oder nur rechts
orphans:	`Number`	Mindestens so viele Zeilen auf der alten Seite
widows:	`Number`	Mindestens so viele Zeilen auf der neuen Seite
counter-increment:	name	Zähler hochzählen
counter-reset:	name	Zähler zurücksetzen
	page	Seitenzähler zurücksetzen
	footnote	Fussnotenzähler zurücksetzen (meistens pro Seite)
Kopf- und Fusszeilen
string-set:	`Name` "`String`", …	Assoziiert eine Variable mit Text,
	`Name` counter(name[, style])	Wert des Zählers,
	`Name` counters(@todo)	mehreren Zählern,
	`Name` attr(`Name`)	dem Inhalt eines Attributs
	`Name` content(text)	Inhalt des Elements
	`Name` content(before)	Inhalt der Pseudoklasse
	`Name` content(after)	Inhalt der Pseudoklasse
	`Name` content(first-letter)	Ersten Buchstaben
footnote-display:	block \| inline \| compact	Fussnoten einzeln, hintereinander oder zusammengefasst ausgeben
footnote-policy:	auto \| line \| block	Algorithmus
bookmark-level:	none \| `Number`	Schachtelungstiefe
bookmark-label:	content(content)	Titel
bookmark-state:	open \| closed	Zustand
Generierter Inhalt
quotes:	'„' '“' '‚' '‘'	Anführungszeichen für `q`-Element und content-Direktive
content:	"`String`"	Text
	url(`Url`)	Externe Ressource
	attr(`Name`)	Inhalt eines Attributs
	counter(name[, style])	Wert des Zählers
	open-quote \| close-quote	Anführungszeichen aus `quotes`-Direktive
	no-open-quote \| no-close-quote	Unsichtbare Anführungszeichen für Schachtelung
	string(name)	Inhalt einer Variable
	string(name, start)	…aus Zuweisung auf der ersten Seite
	string(name, first)	…aus erster Zuweisung auf der aktuellen Seite
	string(name, last)	…aus letzter Zuweisung auf der aktuellen Seite
	string(name, first-except)	…nichts, wenn die Variable noch nicht zugewiesen wurde
	leader(dotted \| solid \| space \| "`String`")	Horizontale Verbindung
	element(name)	Inhalt eines Elements mit Formatierung
	target-counter(url(`Url`), name[, style])	Wert des Zählers
	target-text(url(`Url`), name)	Inhalt des referenzierten Elements

Spalten

CSS Multi-column Layout Module

columns:	width \| count	Breite oder Anzahl
column-width:	width	Spaltenbreite
column-count:	`Number`	Anzahl Spalten
column-gap:	width \| normal	Zwischenraum
column-rule:	width style color	Trennlinie
column-rule-width:	width	Breite der Trennlinie
column-rule-style:	border-style	Muster der Trennlinie
column-rule-color:	color	Farbe der Trennlinie
column-span:	none \| all / `Number` \| width \| auto	Element über mehrere Spalten ausbreiten
column-fill:	auto \| balanced	Hängend oder ausgleichend
break-inside:	auto \| avoid \| avoid-page \| avoid-column	Umbruch im Element vermeiden
break-before:	auto \| always \| left \| right \| page \| column \| …	Umbruch Vor dem Element nicht, immer nur links oder nur rechts
break-after:	auto \| always \| left \| right \| page \| column \| …	Umbruch Hinter dem Element nicht, immer nur links oder nur rechts

Fluss

float:
left Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa float:
right quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

CSS Figures

float:	none	Element nicht umfliessen lassen
	left \| right	Element links oder rechts verankern
	top \| bottom	Element oben oder unten verankern
	top-bottom \| bottom-top	Element bevorzugt alleine verankern
	inside \| outside	Element am Innen- oder Außenrand verankern
	snap	Element in der nächstliegenden Ecke verankern
	snap(length, top \| bottom \| near)	…mit besonderen Schwellen
	footnote	Element als Fussnote darstellen
float-reference:	column \| element \| page \| bleed-box
float-defer-page:	none	Element in der aktuellen Seite ausgeben
	`Number`	Element frühestens nach `N` Seiten ausgeben
	left \| right	Element in nächsten linken oder rechten Seite ausgeben
	last	Element in der letzten Seite ausgeben
float-defer-column:	none	Element in der aktuellen Spalte ausgeben
	`Number`	Element frühestens nach `N` Spalten ausgeben
	inside \| outside	Element in der nächsten inneren oder äußeren Spalte ausgeben
	last	Element in der letzten Spalte ausgeben
float-defer-line:	none	Element in der aktuellen Zeile ausgeben
	`Number`	Element frühestens nach `N` Zeilen ausgeben
	`Number`%	Element auf einer bestimmten Höhe ausgeben
float-policy:	normal \| drop-tail \| in-order \| forward	@todo
float-offset:	none	Keine Verschiebung entlang der Zeile
	length	Absolute Verschiebung
	`Number`%	Relative Verschiebung
	auto	Nach Platzbedarf
wrap-side:	none \| all	Inhalt darf nirgends oder auf allen Seiten um das Element fließen
wrap-contrast:	normal	Inhalt umfließt das Element an den optischen Kanten
	`Contrast` distance	Kontrast (0–1) und Abstand
clear:	none \| left \| right \| both	Schwebende Elemente umfliessen oder nächste Zeile abwarten
	column \| page	Nächste Spalte oder Seite abwarten

Literatur

Håkon Wium Lie: Ten CSS One-Liners to Replace Native Apps.
Mozilla Developer Network: CSS
W³C: Cascading Style Sheets, Level 1 (Recommendation, 12/1996)
W³C: Cascading Style Sheets, Level 2 (Recommendation, 05/1998)
W³C: Cascading Style Sheets, Level 2 Revision 1 (06/2005)
W³C: CSS Current Status

all		Regeln für alle Geräte
aural		Sprachsynthese
braille		Blindenschrift
embossed		Braille-Drucker
handheld		Tragbare Kleingeräte
print		Drucker
projection		Präsentation
screen		Bildschirm
tty		Terminal-Emulation
tv		Fernsehgeräte

first		Regeln für die erste Seite
left		Regeln für linke Seiten
right		Regeln für rechte Seiten
nth(even)		Regeln für gerade Seitennnummern
nth(odd)		Regeln für ungerade Seitennnummern
nth(`Number`n + `Number`)		Regeln für bestimmte Seitennnummern
`Name`		Regeln für benannte Seiten

	`-top`
`-left`		`-right`
	`-bottom`

black #000000	maroon #800000	purple #80080	green #008000	olive #8080000	navy #000080	teal #008080	silver #c0c0c0
gray #808080	red #ff0000	fuchsia #ff00ff	lime #00ff00	yellow #ffff00	blue #0000ff	aqua #00ffff	white #ffffff

	ActiveBorder		Rahmenfarbe des aktiven Fensters
	ActiveCaption		Hintergrundfarbe des aktiven Fenstertitels
	AppWorkspace		Hintergrundfarbe der aktiven Anwendung
	Background		Hintergrundfarbe des Desktops
	ButtonFace		Hintergrundfarbe von Knöpfen
	ButtonHighlight		Heller Schatten
	ButtonShadow		Dunkler Schatten
	ButtonText		Textfarbe auf Knöpfen
	CaptionText		Textfarbe von Überschriften
	GrayText		Textfarbe von deaktiviertem Text
	Highlight		Textfarbe von ausgewählten Einträgen
	HighlightText		Textfarbe von selektiertem Text
	InactiveBorder		Rahmenfarbe inaktiver Fenster
	InactiveCaption		Hintergrundfarbe inaktiver Fenstertitel
	InactiveCaptionText		Textfarbe inaktiver Fenstertitel
	InfoBackground		Hintergrundfarbe für Tooltips
	InfoText		Textfarbe für Tooltips
	Menu		Menüleiste
	MenuText		Menüeintrag
	Scrollbar		Rolleiste
	ThreeDFace		3D-Elemente
	ThreeDHighlight		Aktiviertes 3D-Element
	ThreeDShadow		Dunkler Schatten
	ThreeDDarkShadow		Dunkler Schatten
	ThreeDLightShadow		Heller Schatten
	Window		Hintergrundfarbe von Dokumentfenstern
	WindowFrame		Rahmenfarbe des Fensters
	WindowText		Textfarbe in Dokumentfenstern