Aus dem Kurs: Webtechniken lernen 2: CSS-Grundlagen

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.

Listen: Aufzählungszeichen gestalten mit list-style und dem Pseudoelement ::marker

Listen: Aufzählungszeichen gestalten mit list-style und dem Pseudoelement ::marker – Tutorial zu CSS

Aus dem Kurs: Webtechniken lernen 2: CSS-Grundlagen

Gratismonat starten Für Ihr Team erwerben

Listen: Aufzählungszeichen gestalten mit list-style und dem Pseudoelement ::marker

“

Ich möchte Ihnen jetzt das Wichtigste zum Gestalten von Listen zeigen und habe dazu die Übungsdatei aus dem Ordner zu diesem Film bereits im Chrome geöffnet. Und das Entwicklertool ist auch bereits aktiviert. Wenn ich jetzt mit der Maus auf das ul-Element fahre, dann sieht man gleich, dass das eine Besonderheit hat, denn wie hier auch zu sehen ist, vom Browser-Stylesheet aus wird das als Block-Element definiert. Es gibt ein Listenaufzählungszeichen list-style-type. Das ist disc, das sind die schwarzen Punkte hier. Dann gibt es ein bisschen Margin oben drüber und unten drunter, und dann gibt es links ein Padding von 40 Pixeln. Und das sorgt für die Einrückung, die hier links zu sehen ist. Wenn ich die Listenelemente anschaue, die werden vom Browser-Stylesheet hier auf display list-item gesetzt und erben das Aufzählungszeichen von ul, von der Liste selbst. Wenn dieses display list-item nicht vorhanden ist, sondern irgendein anderer Wert für Display hier eingetragen wird, dann…

Inhalt