In HTML gibt es zwei Haupttypen von Listen:
ungeordnete Listen (<ul>) - die Listenelemente sind mit Aufzählungszeichen gekennzeichnet
geordnete Listen (<ol>) - die Listenelemente sind mit Zahlen oder Buchstaben gekennzeichnet
Mit den CSS-Listeneigenschaften können Sie Folgendes tun:
Legen Sie unterschiedliche Listenelementmarkierungen für geordnete Listen fest
Legen Sie unterschiedliche Listenelementmarkierungen für ungeordnete Listen fest
Legen Sie ein Bild als Listenelementmarkierung fest
Fügen Sie Hintergrundfarben zu Listen und Listenelementen hinzu
Die Eigenschaft list-style-type
gibt den Typ des Listenelements an Marker.
Das folgende Beispiel zeigt einige der verfügbaren Listenelementmarkierungen:
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;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<h2>The list-style-type Property</h2>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
Hinweis: Einige der Werte gelten für ungeordnete Listen, andere für geordnete Listen.
Die Eigenschaft list-style-image
gibt ein Bild als Liste an Artikelmarkierung:
ul
{
list-style-image: url('sqpurple.gif');
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>
<h2>The list-style-image Property</h2>
<p>The list-style-image property specifies an image as the list item marker:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Die Eigenschaft list-style-position
gibt die Position der Listenelementmarkierungen an (Spiegelstriche).
„list-style-position: Outside;“ bedeutet, dass die Aufzählungspunkte außerhalb liegen das Listenelement. Der Anfang jeder Zeile eines Listenelements wird vertikal ausgerichtet. Dies ist die Standardeinstellung:
„list-style-position: inside;“ bedeutet, dass sich die Aufzählungspunkte im Inneren befinden das Listenelement. Da es Teil des Listenelements ist, wird es Teil des Textes und sein Schieben Sie den Text an den Anfang:
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
</style>
</head>
<body>
<h1>The list-style-position Property</h1>
<h2>list-style-position: outside (default):</h2>
<ul class="a">
<li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
<li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
<li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves</li>
</ul>
<h2>list-style-position: inside:</h2>
<ul class="b">
<li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
<li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
<li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves</li>
</ul>
</body>
</html>
Die Eigenschaft list-style-type:none
kann ebenfalls vorhanden sein Wird zum Entfernen der Markierungen/Geschosse verwendet. Beachten Sie, dass die Liste auch einen Standardrand hat und Polsterung. Um dies zu entfernen, fügen Sie margin:0
und padding:0
zu <ul> oder <ol> hinzu:
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
ul.demo {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>Default list:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Remove bullets, margin and padding from list:</p>
<ul class="demo">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Die Eigenschaft list-style
ist eine Abkürzungseigenschaft. Es dient zur Einstellung aller Eigenschaften in einer Deklaration auflisten:
ul
{
list-style: square inside url("sqpurple.gif");
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: square inside url("sqpurple.gif");
}
</style>
</head>
<body>
<h2>The list-style Property</h2>
<p>The list-style property is a shorthand property, which is used to set all the list properties in one declaration.</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Bei Verwendung der Abkürzungseigenschaft ist die Reihenfolge der Eigenschaftswerte wie folgt:
list-style-type
(Wenn ein List-Style-Image angegeben ist, Der Wert dieser Eigenschaft wird angezeigt, wenn das Bild aus irgendeinem Grund vorhanden ist Kann nicht angezeigt werden)
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 verwendet Fehlende Eigenschaften werden, falls vorhanden, eingefügt.
Wir können Listen auch mit Farben gestalten, um sie etwas mehr aussehen zu lassen interessant.
Alles, was dem Tag <ol> oder <ul> hinzugefügt wird, wirkt sich auf die gesamte Liste aus Eigenschaften, die dem <li>-Tag hinzugefügt werden, wirken sich auf die einzelnen Listenelemente aus:
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background:
#ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
}
ul li {
background:
#cce5ff;
color: darkblue;
margin: 5px;
}
Ergebnis :
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
color: darkblue;
margin: 5px;
}
</style>
</head>
<body>
<h1>Styling Lists With Colors</h1>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Dieses Beispiel zeigt, wie eine Liste mit einem roten linken Rand erstellt wird.
Benutzerdefinierte Liste mit rotem linken Rand
<!DOCTYPE html>
<html>
<head>
<style>
ul {
border-left: 5px solid red;
background-color: #f1f1f1;
list-style-type: none;
padding: 10px 20px;
}
</style>
</head>
<body>
<h2>List with a red left border</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Dieses Beispiel zeigt, wie Sie eine umrandete Liste ohne Aufzählungszeichen erstellen.
Umrandete Liste in voller Breite
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
padding: 0;
border: 1px solid #ddd;
}
ul li {
padding: 8px 16px;
border-bottom: 1px solid #ddd;
}
ul li:last-child {
border-bottom: none
}
</style>
</head>
<body>
<h2>A bordered list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Dieses Beispiel demonstriert alle verschiedenen Listenelementmarkierungen in CSS.
Alle verschiedenen Listenelementmarkierungen für Listen
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}
ol.d {list-style-type: armenian;}
ol.e {list-style-type: cjk-ideographic;}
ol.f {list-style-type: decimal;}
ol.g {list-style-type: decimal-leading-zero;}
ol.h {list-style-type: georgian;}
ol.i {list-style-type: hebrew;}
ol.j {list-style-type: hiragana;}
ol.k {list-style-type: hiragana-iroha;}
ol.l {list-style-type: katakana;}
ol.m {list-style-type: katakana-iroha;}
ol.n {list-style-type: lower-alpha;}
ol.o {list-style-type: lower-greek;}
ol.p {list-style-type: lower-latin;}
ol.q {list-style-type: lower-roman;}
ol.r {list-style-type: upper-alpha;}
ol.s {list-style-type: upper-latin;}
ol.t {list-style-type: upper-roman;}
ol.u {list-style-type: none;}
ol.v {list-style-type: inherit;}
</style>
</head>
<body>
<h2>All List Style Types</h2>
<ul class="a">
<li>Circle type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Disc type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="c">
<li>Square type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ol class="d">
<li>Armenian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="e">
<li>Cjk-ideographic type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="f">
<li>Decimal type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="g">
<li>Decimal-leading-zero type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="h">
<li>Georgian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="i">
<li>Hebrew type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="j">
<li>Hiragana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="k">
<li>Hiragana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="l">
<li>Katakana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="m">
<li>Katakana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="n">
<li>Lower-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="o">
<li>Lower-greek type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="p">
<li>Lower-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="q">
<li>Lower-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="r">
<li>Upper-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="s">
<li>Upper-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="t">
<li>Upper-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="u">
<li>None type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="v">
<li>inherit type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
Legt alle Eigenschaften für eine Liste in einer Deklaration fest
Gibt ein Bild als Listenelementmarkierung an
Gibt die Position der Listenelementmarkierungen (Aufzählungspunkte) an.
Gibt den Typ der Listenelementmarkierung an