CSS Kurs – Aufzählungen und Nummerierungen

Dieser Beitrag ist Teil des CSS Kurses.
In diesem Beitrag lernen Sie die Listen kennen. Man unterscheidet zwei Arten von Listen: Aufzählungen und Nummerierungen.
Aufzählungen stellen ungeordnete Listen dar. Das HTML-Element für diese lautet ul (engl. unordered list). Dieses enthält die einzelnen Listenelemente (Punkte) li (engl. list item).
Erstellen wir nun unsere Liste die die einzelnen Schritte dieses Kurses enthält.

<ul>
<li>Wie funktioniert HTML?</li>
<li>Kästchen mit CSS gestalten.</li>
<li>Kästchen mit CSS positionieren.</li>
</ul>

Nummerierungen sind nichts anderes als geordnete Liste. Vom Aufbau her weisen diese sehr große Ähnlichkeit mit den ungeordneten Listen auf. Allerdings müssen Sie statt ul das Element ol (engl. ordered list) verwenden.

<ol>
<li>Wie funktioniert HTML?</li>
<li>Kästchen mit CSS gestalten.</li>
<li>Kästchen mit CSS positionieren.</li>
</ol>

Probieren Sie es selbst aus und ändern Sie <ul> in <ol> um.

Sie können die Listen auch verschachteln. Dazu müssen Sie innerhalb eines Listenelementes eine neue Liste erstellen. Wir wollen nun den ersten Punkt weiter untergliedern.

<ul>
<li>Wie funktioniert HTML?
<ul>
<li>Grundgerüst</li>
<li>Webseite mit div in Bereiche unterteilen</li>
<li>Überschriften und Absätze</li>
</ul>
</li>
<li>Kästchen mit CSS gestalten.</li>
<li>Kästchen mit CSS positionieren.</li>
</ul>

Probieren Sie es selbst aus!

Quellen und weiterführende Literatur:
Peter Müller (2013): Flexible Boxes

Falls Ihnen dieser Beitrag weitergeholfen hat, wäre es eine sehr nette Anerkennung meiner Arbeit wenn Sie z.B. Ihre Bücher über Amazon bestellen würden. Wenn Sie ein Produkt kaufen, erhalte ich dafür eine Provision. Für Sie ändert sich am Preis des Produktes gar nichts. Ich möchte mich an dieser Stelle jetzt schon für Ihre Unterstützung bedanken.