Sie sind hier: Startseite -> CSS-Grundlagen -> Listen -> Bulletzeichen (ul)

CSS-Grundlagen: Bulletzeichen bei ul-Tag

Ungeordnete Listen und das Aufzählungssymbol

Wenn man eine ungeordnete Aufzählungsliste in HTML mit dem ul-Tag erstellt, erhält man standardmäßig den gefüllten Kreis als Bulletzeichen geliefert. Das Bulletzeichen ist das kleine grafische Symbol, das jeden Listeneintrag ankündigt und diesem vorangestellt ist.



zuerst die normale Liste

  • Erster Eintrag
  • Zweiter Eintrag

dann die CSS-Variante

  • Erster Eintrag
  • Zweiter Eintrag

Im ersten Fall habe ich eine simple ungeordnete Aufzählungsliste mit zwei Einträgen erstellen, wie sie für HTML klassisch ist. Die zweite Aufzählungsliste ist im Prinzip ident, aber dem ul-Tag wurde der CSS-Befehl list-style-type mit auf den Weg gegeben und er erhielt die Option "square", womit aus dem üblichen Zeichen ein Quadrat wurde und die Liste gleich anders wirkt - auch wenn das Geschmackssache ist.

Möglich sind folgende Optionen:

  • none -> kein Zeichen wird dargestellt
  • disc zeigt das übliche Zeichen als vollen Kreis
  • circle zeigt einen leeren Kreis
  • square habe ich verwendet und zeigt das Quadrat

Damit stehen im Basispaket von CSS vier verschiedene Möglichkeiten zur Verfügung, wie das Bulletzeichen mit einem einzigen Befehl verändert werden kann. Später kommt noch die Option hinzu, dass man eine eigene Grafik nutzt.

Ebenfalls interessant:

[aktuelle Seite]

Bulletzeichen (ul)

Informationen über die Möglichkeit, mit CSS die Aufzählungszeichen der Listen zu verändern.

Bullettzeichen (ol)

Informationen über die Möglichkeit, die Aufzählungszeichen bei geordneten Listen mit CSS zu verändern.

list-style-image

Informationen über den CSS-Befehl list-style-image, mit dem bei einer ungeordneten Aufzählungsliste ein eigenes Zeichen eingebaut werden kann.

Listen formatieren

Informationen über die Möglichkeiten, mit CSS Aufzählungslisten zu formatieren.

Soziale Medien

Wenn der Artikel gefallen und/oder geholfen hat, bitte teilen:

Zurück zum Hauptthema

Übersicht Listen

Startseite CSS-Grundlagen