Den list-style
egenskapen är en förkortning egenskap som sätter värden för tre olika listrelaterade fastigheter i ett uttalande:
ul ( list-style: || || ; )
Här är ett exempel på syntaxen:
ul ( list-style: square outside none; )
Vilket skulle vara detsamma som följande långhandversion:
ul ( list-style-type: square; list-style-position: outside; list-style-image: none; )
Kort sagt, om några värden utelämnas kommer de att återgå till sitt ursprungliga tillstånd.
Värden för list-style-type
Den list-style-type
egenskapen definierar vilken typ av listan genom att ställa in innehållet i varje markör, eller kula, på listan. Acceptabla sökordsvärden för list-style-type
inkluderar:
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-greek
lower-latin
upper-latin
armenian
georgian
lower-alpha
upper-alpha
none
MDN har en mer fullständig lista. Icke-sökordsvärden introducerades i CSS3 och börjar se lite stöd, som:
ul ( list-style-type: "→"; )
Följande demo innehåller en grupp oordnade listor för att visa varje nyckelordsvärde:
Den list-style-type
egenskapen gäller för alla listor och alla element som är inställd på display: list-item
.
Listmarkörens färg är oavsett vilken beräknad färg som elementet har (ställs in via color
egenskapen).
Värden för list-style-position
De list-style-position
fastighets definierar var att placera listan markören, och det tar en av två värden: inside
eller utanför. Dessa visas nedan med padding
borttagningen från listorna och en vänster röd kant tillagd:
Värden för list-style-image
Den list-style-image
egenskapen avgör om listan markören ställs in med en bild och accepterar ett värde av ”none” eller en webbadress som pekar på bilden:
ul ( list-style-image: url(images/bullet.png.webp); )
Fler demonstrationer
Webbläsarstöd
Krom | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
Arbetar | Arbetar | Arbetar | Arbetar | Arbetar | Arbetar | Arbetar |
IE6 / 7 stöder inte alla nyckelordsvärden för list-style-type
och har också ett fel där flytande listobjekt inte visar sin listmarkör. Detta löses genom att använda en bakgrundsbild (istället för list-style-image
) på listobjekten.