Neueste Web-Entwicklung Tutorials
 

CSS Liste

❮ Zurück Nächstes Kapitel ❯
  1. Kaffee
  2. Tee
  3. Coca Cola
  • Kaffee
  • Tee
  • Coca Cola

HTML-Listen und CSS Listeneigenschaften

In HTML gibt es zwei Haupttypen von Listen:

  • ungeordnete Listen (<ul>) - die Listenelemente mit Kugeln markiert
  • geordnete Listen (<ol>) - die Elemente der Liste sind mit Zahlen oder Buchstaben gekennzeichnet

Die CSS-Liste Eigenschaften können Sie:

  • Legen Sie verschiedene Listenelement Marker für geordnete Listen
  • Legen Sie verschiedene Listenelement Marker für ungeordnete Listen
  • Legen Sie ein Bild als Listenelement Marker
  • In Hintergrundfarben auf Listen und Listenelemente

Verschiedene List Item Marker

Die list-style-type - Eigenschaft gibt die Art der Listenposition Marker.

Das folgende Beispiel zeigt einige der verfügbaren Listenpunkt-Marker:

Beispiel

ul.a {
    list-style-type: circle;
}

ul.b {
    list-style-type: square;
}

ol.c {
    list-style-type: upper-roman;
}

ol.d {
    list-style-type: lower-alpha;
}
Versuch es selber "

Hinweis: Einige der Werte sind für ungeordnete Listen, und einige für geordnete Listen.

Ein Bild als Listenpunkt Marker

Die list-style-image - Eigenschaft gibt ein Bild als Listenelement Marker:

Beispiel

ul {
    list-style-image: url('sqpurple.gif');
}
Versuch es selber "

Positionieren Sie den Listeneintrag Marker

Die list-style-position - Eigenschaft gibt an, ob die Listenpunkt Marker innerhalb oder außerhalb des Inhaltsfluss angezeigt werden soll:

Beispiel

ul {
    list-style-position: inside;
}
Versuch es selber "

List - Stenografie Eigenschaft

Die list-style - Eigenschaft ist eine zusammenfassende Eigenschaft. Es wird verwendet, um alle Listeneigenschaften in einer Erklärung zu setzen:

Beispiel

ul {
    list-style: square inside url("sqpurple.gif");
}
Versuch es selber "

Wenn die Kurzschrift-Eigenschaft verwenden, sind die Reihenfolge der Eigenschaftswerte:

  • list-style-type (wenn ein list-style-Bild angegeben wird, wird der Wert dieser Eigenschaft angezeigt werden , wenn das Bild aus irgendeinem Grund kann nicht angezeigt werden)
  • list-style-position (gibt an, ob die Listenpunkt Marker innerhalb oder außerhalb des Inhaltsfluss erscheinen soll)
  • list-style-image (gibt ein Bild als Listenelement - Marker)

Wenn einer der Eigenschaftswerte oben fehlen, wird der Standardwert für die fehlende Eigenschaft eingefügt werden, falls vorhanden.

Styling Liste mit Farben

Wir können auch Stil Listen mit Farben, um sie ein wenig interessanter aussehen.

Alles , was hinzugefügt , um die <ol> oder <ul> -Tag, wirkt sich auf die gesamte Liste, während Eigenschaften der zusätzlichen <li> Tag wird die einzelnen Listenelemente beeinflussen:

Beispiel

ol {
    background: #ff9999;
    padding: 20px;
}

ul {
    background: #3399ff;
    padding: 20px;
}

ol li {
    background: #ffe5e5;
    padding: 5px;
    margin-left: 35px;
}

ul li {
    background: #cce5ff;
    margin: 5px;
}

Ergebnis:

  1. Coffee
  2. Tea
  3. Coca Cola
  • Coffee
  • Tea
  • Coca Cola
Versuch es selber "
Beispiele

Mehr Beispiele

Mit voller Breite begrenzt Liste
Dieses Beispiel zeigt, wie Sie eine grenzte Liste ohne Kugeln zu schaffen.

All die verschiedenen Listenelement Marker für Listen
Dieses Beispiel zeigt die verschiedenen list-item-Marker in CSS.

Testen Sie sich mit Übungen!

Übung 1 » Übung 2» Übung 3 »

Alle CSS Listeneigenschaften

Eigentum Beschreibung
list-style Setzt alle Eigenschaften für eine Liste in einer Erklärung
list-style-image Gibt ein Bild als Listenelement Marker
list-style-position Bestimmt, ob die Listenelement Marker sollten innerhalb oder außerhalb des Inhaltsfluss erscheinen
list-style-type Gibt den Typ des list-item Marker

❮ Zurück Nächstes Kapitel ❯