DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die list-style-Eigenschaft ist eine Kurzschreibweise, die Werte für drei verschiedene listenbezogene Eigenschaften in einer einzigen Deklaration festlegt.
ul {
list-style: <list-style-type> || <list-style-position> || <list-style-image>;
}Hier ist ein Beispiel für die Syntax.
ul {
list-style: square outside none;
}Was dem folgenden Langschreibweise-Format entsprechen würde.
ul {
list-style-type: square;
list-style-position: outside;
list-style-image: none;
}In der Kurzschreibweise werden ausgelassene Werte auf ihren ursprünglichen Zustand zurückgesetzt.
Werte für list-style-type
Die Eigenschaft list-style-type definiert die Art der Liste, indem sie den Inhalt jedes Markers oder Aufzählungszeichens der Liste festlegt. Akzeptable Schlüsselwortwerte für list-style-type sind:
disccircle (Kreis)squaredecimaldecimal-leading-zerolower-romanupper-romanlower-greeklower-latinupper-latinarmeniangeorgianlower-alphaupper-alphanone
MDN hat eine vollständigere Liste. Nicht-Schlüsselwortwerte wurden in CSS3 eingeführt und beginnen, einige Unterstützung zu sehen, wie zum Beispiel:
ul {
list-style-type: "→";
}Die folgende Demo enthält eine Gruppe von unsortierten Listen, um jeden Schlüsselwortwert zu demonstrieren.
Die Eigenschaft list-style-type gilt für alle Listen und für jedes Element, das auf display: list-item gesetzt ist.
Die Farbe des Listenmarkers ist die berechnete Farbe des Elements (festgelegt über die color-Eigenschaft).
Werte für list-style-position
Die Eigenschaft list-style-position definiert die Position des Listenmarkers und akzeptiert einen von zwei Werten: inside oder outside. Diese werden unten mit entferntem padding von den Listen und einem hinzugefügten linken roten Rand demonstriert.
Werte für list-style-image
Die Eigenschaft list-style-image bestimmt, ob der Listenmarker mit einem Bild gesetzt wird, und akzeptiert die Werte "none" oder eine URL, die auf das Bild verweist.
ul {
list-style-image: url(images/bullet.png);
}Weitere Demos
Browser-Unterstützung
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Ja | Ja | Ja | Ja | Funktioniert | Funktioniert |
| Android Chrome | Android Firefox | Android Browser | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| Ja | Ja | Ja | Ja | Funktioniert |
Internet Explorer 6 und 7 unterstützen nicht alle Schlüsselwortwerte für list-style-type und haben auch einen Fehler, bei dem gefloatete Listenelemente ihre Listenmarker nicht anzeigen. Dies wird durch die Verwendung eines Hintergrundbildes (anstelle von list-style-image) auf den Listenelementen behoben.
Gute Erklärung! Ich war mir nicht sicher, welche Werte ich zusätzlich zu type auf list-style setzen kann.
Hallo, wie kann ich die Größe des Aufzählungszeichens ändern? Danke
Aufzählungszeichen sind proportional zur Schriftgröße. Wenn Sie Ihre Schriftgröße erhöhen, werden auch die Aufzählungszeichen größer.
Wenn Sie die Größe des Aufzählungszeichens gezielt ändern möchten, ohne die Schrift zu beeinträchtigen, müssen Sie möglicherweise einfach Ihr eigenes benutzerdefiniertes Aufzählungszeichenbild hochladen.
Sie könnten ein Bild verwenden, ein "Aufzählungszeichenbild" erstellen und es so verwenden, wie es in den Beispielen gezeigt wird. Sie können bei Bedarf für jedes Element einen anderen list-style-type verwenden, erstellen Sie Klassen, um dies zu tun...
/** Stil für Liste beginnen **/
.ligreen {
list-style-image: url(images/ligreen.png);
}
.lired {
list-style-image: url(images/lired.png);
}
.liblue {
list-style-image: url(http://www.tnhteam.com/plaatjes/liblue.gif);
}
/** Stil für Liste beenden **/
<!–// HTML-Beispiel beginnen //–>
<ul>
<li class=”ligreen”>Grünes Aufzählungszeichenelement</li>
<li class=”lired”>Rotes Aufzählungszeichenelement</li>
<li class=”liblue”>Blaues Aufzählungszeichenelement</li>
</ul>
<!–// HTML-Beispiel beenden //–>
Sie müssen die Bilder nach Ihren Bedürfnissen erstellen und können vollständige HTTP-Pfade verwenden. Ich habe beide in diesem Beispiel verwendet...
Ich hoffe, das ist hilfreich für Sie.
Viel Spaß beim Codieren ;-)
okokok
Hey, sind diese nicht auch gültig?
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
Ja, das sind sie tatsächlich!
Ich liebe die Verwendung der Iroha-Listentypen.
sehr hilfreich
Wie erstelle ich eine Liste mit mehreren Aufzählungszeichen?
Wie eine Liste innerhalb der Liste?
Bitte lesen Sie meinen anderen Kommentar und erstellen Sie so viele Stilklassen, wie Sie benötigen. Sie finden ein Beispiel in meinem anderen Kommentar.
Direkter Link zu meinem anderen Kommentar: https://css-tricks.de/almanac/properties/l/list-style/#comment-1588566
Wie kann ich die schließende Klammer anstelle des Punkts in einer lower-alpha-Liste per CSS einfügen?
Danke! Ich habe die Dropdowns zum Laufen gebracht, aber sie verlinken nicht zu den Seiten. Ich habe die exakte URL von den Seiten, aber es funktioniert nicht. Was mache ich falsch?
@Bonnie Was funktioniert nicht? Hast du eine URL, ich helfe dir gerne, es zum Laufen zu bringen. Viele Grüße, Willem
Anfänger >> Kann ein Bild nicht in einem Ordner mit Bildern gespeichert und von dort verwendet werden, um das normale Aufzählungszeichen zu ersetzen? Man *muss* ein Bild von einer URL ziehen... irgendwohin...? Danke, Neil
Da dies eine CSS-Lösung ist, können Sie kein Bild einfach in den Code ziehen. Sie können das Bild zwar in einen Ordner legen, müssen dem Code aber trotzdem mitteilen, wo er dieses Bild finden kann, was normalerweise mit einer URL geschieht.
Alle Bilder werden über URLs bezogen, unabhängig davon, ob es sich um lokale URLs oder explizite vollständige URLs handelt. Selbst "images/yourimage.jpg" ist eine URL, es ist nur eine sogenannte "relative URL", da sie sich auf den Speicherort der Datei bezieht, die sie aufruft.
grgfgfg
Ich möchte einen Hotspot für das Bild haben, das ich als Aufzählungszeichen verwende.
Wie mache ich das?
Nur um zu sagen, dass es in HTML 5 keine Beschreibungliste gibt, sondern eine Definitionsliste.
Hallo, wie kann ich die Farbe der Zahlen vor den Listenelementen ändern? Ich kann keine CSS-Eigenschaft dafür finden. Im Moment habe ich einen Span in ein li gesetzt und die Farbe für die gesamte Liste und dann für die Elemente geändert...
Die Verwendung von
list-style-typefür Definitionsdatenelemente innerhalb einer Definitionsliste (oder für alles andere alsuloderol) funktioniert in Firefox immer noch nicht - und der Fehler ist seit über 7 Jahren offen: https://bugzilla.mozilla.org/show_bug.cgi?id=436662Vielen Dank dafür. Ich habe versucht, dieses Problem seit Wochen zu lösen. Ihre Lösung funktioniert einwandfrei!
Wie erstelle ich einen Selektor für das leere list-style-image? Angenommen, ich habe die folgenden Regeln
#menu-Custom { list-style-image: url("file:///X:/Dev/Mozilla/Chibi-32.png") } #menuOnTop-menu-Custom > image { width: 16px; height: 16px; margin-left: 5px; }und erlaube dem Benutzer, ein Bild auszuwählen. Ich habe JavaScript, das
menuItem.style.listStyleImage = cssUri
setzt, das ich aus einer Datei erhalte, auf die sie verweist. Aber ich möchte auch
menuItem.style.listStyleImage = 'none';
setzen und für diesen Fall den korrekten Selektor für image = none definieren.
#menuOnTop-menu-Custom > image[url=none] { width:0; margin-left:0 }was ist der korrekte Selektor für image = none?
Schöner Artikel... Wie hast du den grauen Hintergrund bei der Liste? Das ist cool...
Gibt es eine Möglichkeit, ein bestimmtes Zeichen zu verwenden? Genauer gesagt ein HTML-Entity wie "☆"?
Danke.
Antwort auf mich selbst: Ich konnte es mit Informationen aus https://drafts.csswg.org/css-lists/#list-style-property zum Laufen bringen, indem ich
ul { list-style-type: “★”; }
verwendet habe. Ich konnte jedoch ☆ nicht verwenden. Ich musste es von der Seite in den Editor kopieren, das könnte ein Problem sein.
Es funktioniert im Sea Monkey Browser, aber nicht im Pale Moon.
Sie können Ihre eigene benutzerdefinierte
list-style-typeerstellen, wie in http://www.w3.org/TR/css-counter-styles-3/ beschrieben.Sie haben einige schicke Zeichen auf dieser Seite aufgeführt: http://www.w3schools.com/charsets/ref_utf_symbols.asp
Für viele weitere UTF8-Zeichen gibt es diese fantastische Website: http://www.fileformat.info/info/unicode/char/2605/index.htm
Ich habe einen Fehler gemacht...
!importantin meinem vorherigen Kommentar ist nicht nützlich...Es sollte endlich ::marker implementiert werden, um Aufzählungszeichen zu stylen. Ich möchte keine benutzerdefinierten Bilder und so weiter verwenden. Bilder sind schlecht, es sei denn, Sie verwenden SVG.
Ich möchte eine "galerieähnliche" Seite mit nummerierten Bildern. Das Hinzufügen in einer Liste mit Links, die Elemente schweben, ist in Ordnung. Es sieht ungefähr so aus:
| Bild |
|- Titel -|
Ich möchte die Bilder automatisch links vom Titel nummeriert haben. Die Verwendung von list-style:decimal funktioniert gut. Aber die Bilder sind (natürlich) links vor dem Bild.
Gibt es eine Möglichkeit, die Position des Aufzählungszeichens/der Nummer so einzustellen, dass:
|—Bild—|
|- Nr. Titel -|
Gibt es jemanden, der mich anleiten kann, schöne CSS-Aufzählungszeichen zu erstellen oder zu finden, die nacheinander erscheinen, wie es normalerweise auf Einzelseiten-Websites oder PPTs der Fall ist?
Irgendwelche Ideen, wie ich die Ziffern in einer geordneten Liste fett machen kann?
Vielen Dank dafür. Es hat mir geholfen, diesen Code zu erstellen, der auf meiner Website funktioniert. Diese Leerzeichen nach dem Häkchen/Tick erzeugen die Leerzeichen vor jeglichem Text.
Ich mag all die verschiedenen Arten, Listenstile zu erstellen. Ich wollte nur meinen Lieblingsweg teilen, um runde Aufzählungszeichen mit CSS zu erstellen.
https://iiiji.com/circled-number-lists/