CSS Liste

CSS-Listenattribute erlauben es Ihnen, die Symbole der Listenelemente zu platzieren, zu ändern oder ein Bild als Listenelementsymbol zu verwenden.

CSS Liste

In gewisser Weise kann jedes nicht beschreibende Textinhalt als Liste betrachtet werden. Volkszählung, Sonnensystem, Stammbaum, Besichtigungsmenu, sogar alle Ihre Freunde können als Liste oder als Liste von Listen dargestellt werden.

Da Listen so vielfältig sind, ist dies ein sehr wichtiger Faktor, daher ist es wirklich schade, dass die Listenstile in CSS nicht reichhaltig sind.

Listenart

Um den Stil der Liste zu beeinflussen, ist der einfachste (und gleichzeitig umfassendste) Weg, den Symboltyp zu ändern.

Zum Beispiel ist in einer ungeraden Liste das Symbol des Listenelements (marker) ein neben jedem Listenelement stehender Punkt. In einer geordneten Liste können die Symbole Buchstaben, Ziffern oder ein Symbol aus einer anderen Zählungssystem sein.

Um das Symboltyp des Listenelements zu ändern, kann das Attribut verwendet werden list-style-type:

ul {list-style-type : square}

Diese Angabe setzt das Symbol für das Listenelement in einer ungeraden Liste auf das Quadrat.

Listenelementbild

Manchmal sind reguläre Symbole nicht ausreichend. Möglicherweise möchten Sie für verschiedene Symbole ein Bild verwenden, was durch list-style-image dieses Attribut erreicht:

ul li {list-style-image : url(xxx.gif)}

Mit einfachem Einsatz eines url()-Werts kann ein Bild als Symbol verwendet werden.

Listensymbolposition

CSS2.1 kann bestimmen, ob das Symbol außerhalb oder innerhalb des Listeninhalts erscheint. Dies wird durch list-style-position Erledigt.

Kurzschreibweise für Listenstile

Um es einfacher zu machen, können die oben genannten 3 Listenstil-Attribute zu einem bequemen Attribut zusammengefasst werden:list-styleso wie hier:

li {list-style : url(example.gif) square inside}

Die Werte von list-style können in beliebiger Reihenfolge aufgeführt werden und können ignoriert werden. Sobald ein Wert bereitgestellt wird, werden die anderen mit den Standardwerten gefüllt.

CSS-Listenbeispiel:

Listenelement in ungeordneten Listen mit verschiedenen Typen markiert
Dieses Beispiel zeigt die verschiedenen Arten von Listeinstzeichen in CSS.
Listenelement in geordneten Listen mit verschiedenen Typen markiert
Dieses Beispiel zeigt die verschiedenen Arten von Listeinstzeichen in CSS.
Alle Listeinstzeichtypen
Dieses Beispiel zeigt alle verschiedenen Arten von Listeinstzeichen in CSS.
Bilder als Listeinstzeichen verwenden
Dieses Beispiel zeigt, wie Bilder als Listenmarken verwendet werden.
Platzieren der Listenmarken
Dieses Beispiel zeigt, wo die Listenmarken platziert werden.
Alle Listenattribute in einer Deklaration definieren
Dieses Beispiel zeigt, wie alle Attribute für Listen in einer Kurzschreibweise gesetzt werden.

CSS-Listeneigenschaften(list)

Eigenschaft Beschreibung
list-style Kurzschreibweise. Verwendet, um alle Attribute für Listen in einer Deklaration zu setzen.
list-style-image Bild als Listeinstzeichen einstellen.
list-style-position Position der Listeinstzeicheinstellungen festlegen.
list-style-type Typ der Listeinstzeicheinstellungen festlegen.
marker-offset