CSS- Liste

Die CSS-Listeneigenschaften funktionieren wie folgt:

• Verschiedene Listenpunkt-Markierungen für geordnete Listen festlegen
• Verschiedene Listenpunkt-Markierungen für ungeordnete Listen festlegen
• Die Listenpunkt-Markierung auf ein Bild festlegen

Liste

In HTML gibt es zwei Arten von Listen:

• Ungeordnete Listeul- Listenpunkt-Markierungen verwenden spezielle Grafiken (wie kleine schwarze Punkte, kleine Kästchen usw.)
• Geordnete Listeol- Listenpunkt-Markierungen können Zahlen oder Buchstaben sein

Mit CSS können Sie Listen weiter gestalten und Bilder als Listenpunkt-Markierungen verwenden.

Eine ungeordnete Liste wird wie folgt dargestellt:

• Kaffee
• Tee
• Coca Cola

• Kaffee
• Tee
• Coca Cola

Eine geordnete Liste wird wie folgt dargestellt:

1. Kaffee
2. Tee
3. Coca Cola

1. Kaffee
2. Tee
3. Coca Cola

Verschiedene Markierungen für Listenelemente

Die Eigenschaft list-style-type legt den Typ der Markierung für Listenelemente fest:

Einige Werte sind für ungeordnete Listen und einige für geordnete Listen.

Bilder als Markierungen für Listenelemente

Um ein Bild für die Markierung des Listenelements anzugeben, verwenden Sie die Eigenschaft list-style-image:

Das obige Beispiel wird nicht in allen Browsern gleich angezeigt. IE und Opera zeigen den Bildmarker etwas höher an als Firefox, Chrome und Safari.

Wenn Sie denselben Bildmarker in allen Browsern platzieren möchten, sollten Sie eine Browserkompatibilitätslösung verwenden, und zwar wie folgt:

Browserkompatibilitätslösungen

Ebenso wird in allen Browsern das folgende Beispiel den Bildmarker anzeigen:

Beispielerklärung:

• ul:
  • Setzen Sie den Listentyp auf keinen Listenpunkt-Marker.
  • padding und margin auf 0px setzen (Browserkompatibilität)
• Alle li in ul:
  • Legen Sie die URL des Bildes fest und stellen Sie ein, dass es nur einmal angezeigt wird (keine Wiederholung)
  • Sie müssen das Bild positionieren (links 0px und oben 5px)
  • Verwenden Sie die Eigenschaft padding-left, um den Text in der Liste zu platzieren

Liste - Kurzschreibweise

Alle Listeneigenschaften können in einer einzigen Eigenschaft angegeben werden. Dies wird als Kurzschreibweise bezeichnet.

Verwenden Sie für Listen die Kurzschreibweise, indem Sie die Eigenschaft list-style wie folgt festlegen:

Sie können die folgenden Eigenschaften in der Reihenfolge festlegen:

• list-style-type
• list-style-position (Für verwandte Hinweise siehe bitte die CSS-Eigenschaftstabelle unten)
• list-style-image

Wenn einer der oben genannten Werte fehlt, spielt es keine Rolle, solange die übrigen in der angegebenen Reihenfolge bleiben.

Weitere Beispiele

Alle verschiedenen Listenpunkt-Markierungen
Dieses Beispiel demonstriert alle verschiedenen CSS-Listenpunkt-Markierungen.

Standardeinstellungen entfernen

The list-style-type:none property can be used to remove the small markers. By default, lists <ul> or <ol> also have padding and margins set, which can be usedmargin:0andpadding:0to remove:

Alle CSS-Listeneigenschaften