CSS -Listen
Ungeordnete Listen:
- Kaffee
- Tee
- Koks
- Kaffee
- Tee
- Koks
Geordnete Listen:
- Kaffee
- Tee
- Koks
- Kaffee
- Tee
- Koks
Eigenschaften von HTML-Listen und CSS-Listen
In HTML gibt es zwei Haupttypen von Listen:
- Ungeordnete Listen (<ul>) - die Listenelemente sind mit Aufzählungszeichen markiert
- geordnete Listen (<ol>) - die Listenelemente sind mit Zahlen oder Buchstaben gekennzeichnet
Mit den CSS-Listeneigenschaften können Sie:
- Legen Sie unterschiedliche Listenelementmarkierungen für geordnete Listen fest
- Legen Sie unterschiedliche Listenelementmarkierungen für ungeordnete Listen fest
- Legen Sie ein Bild als Markierung für Listenelemente fest
- Hinzufügen von Hintergrundfarben zu Listen und Listenelementen
Verschiedene Markierungen für Listenelemente
Die list-style-typeEigenschaft gibt den Typ der Listenelementmarkierung an.
Das folgende Beispiel zeigt einige der verfügbaren Markierungen für Listenelemente:
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;
}
Hinweis: Einige der Werte gelten für ungeordnete Listen, andere für geordnete Listen.
Ein Bild als Markierung für Listenelemente
Die list-style-imageEigenschaft gibt ein Bild als Listenelementmarkierung an:
Beispiel
ul
{
list-style-image: url('sqpurple.gif');
}
Positionieren Sie die Listenelementmarkierungen
Die list-style-positionEigenschaft gibt die Position der Listenelementmarkierungen (Aufzählungszeichen) an.
"list-style-position: outside;" bedeutet, dass sich die Aufzählungspunkte außerhalb des Listenelements befinden. Der Anfang jeder Zeile eines Listenelements wird vertikal ausgerichtet. Dies ist standardmäßig:
- Kaffee - Ein aus gerösteten Kaffeebohnen zubereitetes Brühgetränk...
- Tee
- Koks
"list-style-position: inside;" bedeutet, dass sich die Aufzählungspunkte innerhalb des Listenelements befinden. Da es Teil des Listenelements ist, wird es Teil des Textes und schiebt den Text an den Anfang:
- Kaffee - Ein aus gerösteten Kaffeebohnen zubereitetes Brühgetränk...
- Tee
- Koks
Beispiel
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
Standardeinstellungen entfernen
Die list-style-type:noneEigenschaft kann auch verwendet werden, um die Markierungen/Aufzählungszeichen zu entfernen. Beachten Sie, dass die Liste auch standardmäßige Ränder und Auffüllungen hat. Um dies zu entfernen, fügen Sie margin:0und padding:0zu <ul> oder <ol> hinzu:
Beispiel
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
Liste - Kurzschrifteigenschaft
Die list-styleEigenschaft ist eine Kurzschrift-Eigenschaft. Es wird verwendet, um alle Listeneigenschaften in einer Deklaration festzulegen:
Beispiel
ul
{
list-style: square inside url("sqpurple.gif");
}
Bei Verwendung der abgekürzten Eigenschaft ist die Reihenfolge der Eigenschaftswerte:
list-style-type(Wenn ein list-style-image angegeben ist, wird der Wert dieser Eigenschaft angezeigt, wenn das Bild aus irgendeinem Grund nicht angezeigt werden kann)list-style-position(gibt an, ob die Listenelementmarkierungen innerhalb oder außerhalb des Inhaltsflusses angezeigt werden sollen)list-style-image(gibt ein Bild als Listenelementmarkierung an)
Wenn einer der oben genannten Eigenschaftswerte fehlt, wird der Standardwert für die fehlende Eigenschaft eingefügt, falls vorhanden.
Styling-Liste mit Farben
Wir können Listen auch mit Farben gestalten, um sie etwas interessanter aussehen zu lassen.
Alles, was dem Tag <ol> oder <ul> hinzugefügt wird, wirkt sich auf die gesamte Liste aus, während Eigenschaften, die dem Tag <li> hinzugefügt werden, sich auf die einzelnen Listenelemente auswirken:
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:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
Mehr Beispiele
Dieses Beispiel zeigt, wie Sie eine Liste mit rotem linken Rand erstellen.
Dieses Beispiel zeigt, wie eine umrandete Liste ohne Aufzählungszeichen erstellt wird.
Dieses Beispiel demonstriert alle verschiedenen Listenelement-Markierungen in CSS.
Alle CSS-Listeneigenschaften
| Property | Description |
|---|---|
| list-style | Sets all the properties for a list in one declaration |
| list-style-image | Specifies an image as the list-item marker |
| list-style-position | Specifies the position of the list-item markers (bullet points) |
| list-style-type | Specifies the type of list-item marker |