CSS3

1994 CSS wird von Håkon Wium Lie erfunden

1995 W3C Workshop zum Thema der Stilblätter in Rocquencourt (Frankreich)

1996 Das W3C veröffentlicht die “CSS level 1 Recommendation ” (CSS1 )

1998 Das W3C veröffentlicht die “CSS level 2 Recommendation ” (CSS2 )

2014 CSS3 ist in Entwicklung befindlich

2016 Große Teile des bisher publizierten CSS3 sind von vielen aktuellen Browsern umgesetzt

Selektoren

Die folgenden Notizen sind nur als Gedächtnisstütze für Leser geeignet, welche die Selektoren schon kennen!

Standardselektoren

Die folgenden drei Selektoren sind wahrscheinlich die wichtigsten und am häufigsten verwendeten Selektoren.

elementtypename — (Merkhilfe: als auffälligster Teil eines Elements ohne besonderes Zeichen)

#id — (Merkhilfe: Kennung ist eindeutig wie eine Nummer)

.class — (Merkhilfe: Klasse ist eine Typ wie eine Dateinamenserweiterung)

Kombinationen von Selektoren

x y — (direkte Hintereinanderschreibung) Beide Selektoren müssen gleichzeitg gelten

x y — (Verbindung mit einem Leerzeichen) Ein beliebiger y -Nachkomme von x Leerzeichen darf nicht entfallen! (Merkhilfe: Das Leerzeichen steht für einen unbestimmten [mit leerer Spezifikation] Zwischenteil)

x , y — Regel gilt sowohl für x als auch für y

x + y — Ein y, das einem x direkt folgt, ohne etwas dazwischen (Merkhilfe: + = „… und dann …“); Vorsicht! Könnte leerer Texteintrag sein!

x > y — Ein direkter y -Nachkomme von x (Merkhilfe: > = „… und direkt darunter …“)

x ~ y — Alle Geschwister (Merkhilfe: ~ = „… wie …“) y nach einem x innerhalb desselben umgebenden Elements

Dynamische Pseudoklassenselektoren

:link — Ein noch nicht besuchter Link

:visited — Ein bereits besuchter Link

:checked — Ein Element das abgehakt ist.

:hover — Ein Element das unter der Pfeilspitze ist

Musterselektoren

* — Joker (jedes Element), auch am Ende eines Pfades

Statische Pseudoklassenselektoren

:not(y ) — Verneinung des Selektors y.

:nth-child(n ) — 1basierte Auswahl: 2, 2n, 2n + 1 usw.; z.B.: ul>li:nth-child(2) ist der 2. li-Eintrag in einer ul, n = »odd«, »even«

:nth-last-child(n ) —

:nth-of-type(n ) —

:nth-last-child(n ) —

:first-child — Dies trifft nur zu, wenn das Element das erste Element in seinem Behälter ist, nicht zu verwechseln mit »:first-of-type«!

:last-child —

:only-child —

:only-of-type — Elemente ohne Mitelemente gleichen Typs

:first-of-type — Dies trifft zu, wenn das Element das erste Element mit seinem Typ in seinem Behälter ist, nicht zu verwechseln mit »:first-child«!

:target — Das derzeit aktive #-Fragment

Pseudoelementselektoren

::after — Einfügen nach einem Element

::before — Einfügen vor einem Element

::first-letter — Erstes Zeichen

::first-line — Erste Zeile

allgemeine Schlüsselwörter

inherit — Übernahme von Behälter

initial — Übernahme von Anfangswert

unset — inherit, falls vererbbar – sonst initial

Attributeselektoren

[y ] — Alle mit einem y -Attribut

[y ="z "] — Alle mit einem y -Attribut mit dem Text z

[y *="z "] — Alle mit einem y -Attribut, das den Text z enthält

[y ^="z "] — Alle mit einem y -Attribut, das mit dem Text z beginnt

[y $="z "] — Alle mit einem y -Attribut, das mit dem Text z endet

[data-y *="z "] — Alle mit einem benutzerdefinierten data-y -Attribut mit dem Text z

[y ~="z "] — Alle mit einem y -Attribut, welches das Wort z in einer leerzeichengetrennten Liste von Worten enthält

Farbangabe

#RGB

#RRGGBB

Textangaben

"\000041" — Das Unicode-Zeichen U+41.

Einheiten

Es handelt sich nicht unbedingt um physikalische Einheiten.

1px = 127/480 mm = 2.6458{3}10^(-1) mm = 2.6458{3}10^(-4) m

Beispiele

Tabs

main.html
<!DOCTYPE html><html>
    <head><meta charset="UTF-8" /><title></title><style type="text/css">
label { padding: 5px 20px 5px 20px; border: 1px solid #CCC }
input, p { display: none; }
input:checked + p { display: block; }
    </style></head><body>
<label for='button0'>0</label>
<label for='button1'>1</label>
<label for='button2'>2</label>
<input id='button0' name='radio' type='radio' />
<input id='button1' name='radio' type='radio' /><p>paragraph 1</p>
<input id='button2' name='radio' type='radio' /><p>paragraph 2</p>
    </body></html>