CSS listor

CSS gör det enkelt att förändra utseendet på listor. Det går att ange olika listmarkörers utseende och placering eller ange en bild som listmarkör.

<ul>
   <li>Lorem ipsum</li>
   <li>Dolor sit amet</li>
   <li>Consectetur adipiscing</li>
</ul>
<ol>
   <li>Lorem ipsum</li>
   <li>Dolor sit amet</li>
   <li>Consectetur adipiscing</li>
</ol>

Läs mer om HTML listor

Olika listmarkörer

CSS-egenskapen ”list-style-type” används för att bestämma vilken listmarkör listan ska ha.

CSS

ul {list-style-type:square}
ol {list-style-type:decimal-leading-zero}

CSS

ul {list-style-type:none}
ol {list-style-type:georgian}

Oordnade listor

Värde	Beskrivning
none	Ingen markör
circle	En tom cirkel
disc	En ifylld cirkel. Detta är standardinställningen
square	En ifylld fyrkant

Ordnade listor

Värde	Beskrivning
none	Ingen markör
circle	En tom cirkel
disc	En ifylld cirkel.
square	En ifylld fyrkant
decimal	En siffra
decimal-leading-zero	Två siffror (som börjar på 01, 02, 03, etc.)
georgian	Traditionell Georgian numrering (an, ban, gan, etc.)
lower-alpha	Små bokstäver (a, b, c, d, e, etc.)
lower-greek	Små grekiska bokstäver (alpha, beta, gamma, etc.)
lower-latin	Små latinska tecken (a, b, c, d, e, etc.)
lower-roman	Små romerska tal (i, ii, iii, iv, v, etc.)
upper-alpha	Stora bokstäver (A, B, C, D, E, etc.)
upper-latin	Stora latinska bokstäver (A, B, C, D, E, etc.)
upper-roman	Stora romerska tal (I, II, III, IV, V, etc.)

Indrag av listan

CSS-egenskapen ”list-style-position” bestämmer vilket indrag en listobjekt ska få.

Standardvärdet är ”Outside”

CSS

ul {list-style-position:inside}
ol {list-style-position:outside}

Bilder som listmarkörer

CSS_egenskapen ”list-style-image” gör det möjligt att låte en bild vara listmarkör.

CSS

ul {list-style-image:url('star.jpg')}
ol {list-style-image:url('star.jpg')}

Observera att bilder inte visas lika i alla webbläsare! Bilden placeras något högre i Internet Explorer och Opera.

Ett alternativt sätt att använda bilder som listmarkörer är därför att ange bilden som bakgrundsbild.

CSS

ul,ol {
   margin:0px;
   padding:0px;
}
li {
   background: white url('star.jpg') no-repeat center left;
   list-style-type:none;
   padding:0 0 0 35px;
}

I exemplet ovan visas samma bilden som bakgrundsbild på varje <li>-element. För att exemplet ska fungera är det viktigt att egenskaperna margin och padding är satta till 0 för <ul> eller <ol> elementet samt att list-elementet <li> har deklarationen ”list-style-type:none” för att inte webbläsaren ändå ska visa en listmarkör. Bakgrundsbilden placeras med till vänster om listans text med värdena ”center” och ”left” och texten skjuts till höger så att bilden inte skyms medegenskapen padding.

Läs mer om egenskaperna background, margin och padding

Samlingsegenskap för listor

Med egenskapen ”list-style” är det möjligt att ange alla listegenskaper på samma gång.

Egenskaperna måse anges i ordningen: list-style-type, list-style-position, list-style-image.

CSS

li {list-style:circle outside}

Det är viktigt att egenskaperna anges precis samma ordning som i exemplet ovanför för att det ska fungera.

Notera att det går bra att utelämna en eller flera egenskaper. Då kommer den utelämnade egenskapen att bli satt till standardvärdet eller till ett värde som redan angivits