CSS Cheat-Sheet auf Deutsch

Kontext-Selektoren helfen z.B. Abstände zwischen Paragraphen die aufeinander folgen anders zu setzen, als zwischen einem Paragraphen und einer Überschrift.

Attribut-Selektoren erlauben es, CSS-Eigenschaften nur an Elemente zu binden die z.B. mit einem Aria-Attribut ausgestattet sind.

Beispiel-Seite, auf der ich viel mit Kontext- und Attribut-Selektoren gearbeitet habe, um CSS-Eigenschaften an Elemente zu binden, die keiner sauberen HTML-Struktur entstammen: Monatsübersicht, Liste der Heutigen Veranstaltungen, sowie der einzelnen Veranstaltungsdarstellungen auf 60 Plus in Charlottenburg‑Wilmersdorf

Für die Erstellung der Übersicht habe ich auf die Seiten www.mediaevent.de/css/css-selektor-kontextselektor.html und www.mediaevent.de/css/css-selektor-attributselektor.html zugegriffen.

Mit Flexbox können Layouts per CSS beeinflusst werden.

Dazu wird zunächst das Elternelement/der Container mit display: flex oder display: inline-flex als Flexbox definiert und eingerichtet, wie sich die Elemente darin grundsätzlich verhalten sollen.

Innerhalb dieser Flexbox können die einzelnen Kinderelemente/Items beeinflusst werden: in welcher Reihenfolge sie (im sichtbaren!) Layout angezeigt werden und wie sie sich bei mehr und weniger Platz innerhalb des Elternelementes verhalten sollen.

Beispiel-Seite, auf der ich viel mit Flexbox gearbeitet habe: Die Schaubilder Geschlechtliche, amouröse und sexuelle Vielfalt und Heterosexuelle Matrix sowie die Themen auf der Seite von Katharina-Debus.de sind mit Hilfe von Flexbox responsiv umgesetzt!

Für die Erstellung der Übersicht habe ich auf die Seite https://css-tricks.com/snippets/css/a-guide-to-flexbox/ zugegriffen.