Skip to content

CSS: Listen

Auch Listen haben bei der Website-Gestaltung eine wichtige Rolle. In dieser Aufgabe untersuchen wir die unterschiedlichen Deklarationen zum Thema «Listen».

Ziel(e)

  • Ich kann CSS-Deklarationen zum Thema «Listen» einsetzen.

Aufgabe

Listen-CSS-Deklarationen

Recherchiere im Internet die folgenden «wichtigen» CSS-Deklarationen.

Erstelle dir zusätzlich eine HTML + CSS-Datei und probiere die CSS-Deklaration aus oder arbeite mit Live-Beispielen im Internet. Entscheide dich für diese Variante, wo du mehr lernst.

Eigenschaft Mögliche Werte
list-style-type none, disc, circle, square (bei ul)
decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman, upper-roman (bei ol)
list-style-image url(???)

Pseudo-Elemente

Auch für «Listen» gibt es sinnvolle Pseudo-Elemente. Informiere dich über folgende Pseudo-Elemente:

  • :first-child

  • :last-child

  • :nth-child

Wann könnte man z.B. diese Pseudo-Elemente einsetzen?

Halte alles gewohnt in deinem Projektjournal fest und arbeite mit Beispielen.