CSS Listen (Listen)

Listenattribute werden verwendet, um die Anzeige der Listenitem-Marke zu steuern.

HTML-Listenarten

Es gibt drei verschiedene Arten von Listen in HTML:

• Ungeordnete Liste —Projektliste, bei der jeder Listenpunkt mit einem Punkt markiert ist.

• geordnete Liste —Projektliste, bei der jeder Listenpunkt mit einer Nummer markiert ist.

• Definierte Liste -Projektliste, die die Beschreibung jedes Elements enthält.

Für weitere Informationen über Listen, lesen SieHTML-ListeAnleitung.

CSS-Listensyles

CSS bietet mehrere Attribute, um die am häufigsten verwendeten Aufzählungs- und geordneten Listen zu stylen. Diese CSS-Listenattribute erlauben Ihnen in der Regel:

• Kontrollieren Sie die Form oder das Erscheinungsbild der Marke.

• Bestimmen Sie das Bild der Marke, anstatt des Punktmarkiers oder der Ziffer.

• Setzen Sie den Abstand zwischen der Marke und dem Text der Liste.

• bestimmt, ob die Marke oder der Punktmarkierer innen oder außen im Rahmen der Aufzählungsliste oder der geordneten Liste erscheinen sollen.

Listenstiltyp

Standardmäßiggeordnete Listein denen die Punkte mit arabischen Ziffern (1、2、3und) nummeriert, währendungeordnete Liste，Punkte mit kreisförmigen Listenpunkten markieren. Aber Sie können die list-style-Die type-Eigenschaft ändert diesen Standardlistenmarkierungstyp in jeden anderen Typ, z.B. kreisförmig, quadratisch, römische Ziffern, lateinische Buchstaben usw.

ul {
　　　　list-style-type:　square;
}
ol {
　　　　list-style-type:　upper-roman;
}

den Standort der Listenmarke ändern

Standardmäßig befindet sich die Listenmarke außerhalb des Listenitem-Rahmens. Aber Sie können die list-style-Die position-Eigenschaft wird verwendet, um zu bestimmen, ob die Marke oder der Punktmarkierer im Inneren oder Äußeren des Listenitem-Rahmens erscheinen soll.

Dieser Eigenschaftswert nimmt den Wert inside oder outside an, und outside ist der Standardwert. Wenn der Wert inside verwendet wird, umgeben diese Zeilen die Marke nicht, sondern sind eingerückt.

ul.in　li　{
　　　　list-style-position:　inside;
}
ul.out　li　{
　　　　list-style-position:　outside;
}

das Bild als Listenmarke verwenden

Sie können auch list-style-Die image-Eigenschaft setzt das Bild als Listenmarke.

Die Styleregeln in diesem Beispiel zuweisen alle Punkte der Aufzählungsliste einer transparenten PNG-Bilddatei „arrow.png“ als Listenmarke.

ul li {
　　　　list-style-image: url("arrow.png");
}

Der obige Beispiel erzeugt nicht den gleichen Ausgang in allen Browsern. Internet Explorer und Opera zeigen das Bildsymbol etwas höher als Firefox, Chrome und Safari an.

Crossbrowserlösung für das Bildsymbol

Wenn das list-style-Wenn das image-Attribut verwendet wird, um das Bild als Symbol zu verwenden, kann das Symbol im Browser nicht genau ausgerichtet werden. Eine Lösung ist, indem man background-image CSS-Attribute ausrichten die Symbole der Liste korrekt. Zunächst wird die Liste auf keine Symbole gesetzt. Dann wird für das list-Element eine nicht wiederholte Hintergrundbild definiert.

Nachfolgender Beispiel wird in allen Browsern gleichmäßig das Bildsymbol angezeigt:

ul {
　　　　list-style-type: none;
}
ul li {
　　　　background-image: url("arrow.png");
　　　　background-position: 0px　5px;　　　　/*　X-pos Y-pos (von top-left)　*/
　　　　background-repeat: no-repeat;
　　　　padding-left:　20px;
}

Kurzschreibweise für die Liste der Stile

Das list-Das style-Attribut ist eine Kurzwahlattribut für alle drei Attribute list-style-type, list-style-image und list-style-position in einer Liste an einem Ort.

Diese Styleregel setzt die Listenmarken der geordneten Listen auf große lateinische Buchstaben, die am Anfang der Liste erscheinen:

ol {
　　　　list-style: upper-latin inside;
}