Listor

I denna lektionen får du lära dig hur man stilar till listor (<ul> och <ol>-taggarna).

Den lilla symbolen som finns framför alla listpunkter i en lista kan man byta ut mot andra symboler med CSS. För att göra detta använder man egenskapen list-style-type<ul> eller <ol>-taggen.

Onumrerad lista

I exemplen nedan kommer vi att använda följande HTML-kod:

HTML - HyperText Markup Language
<ul> <li>Listpunkt 1</li> <li>Listpunkt 2</li> <li>Listpunkt 3</li> <li>Listpunkt 4</li> </ul>
  • Listpunkt 1
  • Listpunkt 2
  • Listpunkt 3
  • Listpunkt 4

Som du ser så visas det en svart cirkel framför listpunkterna som standard. Om man vill ta bort denna ger man egenskapen list-style-type värdet none.

CSS - Cascading Style Sheets
ul{ list-style-type: none; }
  • Listpunkt 1
  • Listpunkt 2
  • Listpunkt 3
  • Listpunkt 4

Här är två andra värden som list-style-type kan anta.

CSS - Cascading Style Sheets
ul{ list-style-type: circle; }
  • Listpunkt 1
  • Listpunkt 2
  • Listpunkt 3
  • Listpunkt 4
CSS - Cascading Style Sheets
ul{ list-style-type: square; }
  • Listpunkt 1
  • Listpunkt 2
  • Listpunkt 3
  • Listpunkt 4

Med egenskapen list-style-image kan du ange en egen bild som ska stå vid varje listpunkt. Liksom med background-image så ska sökvägen skrivas på formen url('sökvägen').

En röd stjärna.

Bilden ovan kommer vi att använda i exemplet nedan för att visa hur man anger en egen bild vid varje listpunkt. Bildens filnamn är multipleStar.png.

CSS - Cascading Style Sheets
ul{ list-style-image: url('multipleStar.png'); }
  • Listpunkt 1
  • Listpunkt 2
  • Listpunkt 3
  • Listpunkt 4

Numrerad lista

I exemplen nedan kommer vi att använda följande HTML-kod:

HTML - HyperText Markup Language
<ol> <li>Listpunkt 1</li> <li>Listpunkt 2</li> <li>Listpunkt 3</li> <li>Listpunkt 4</li> </ol>
  1. Listpunkt 1
  2. Listpunkt 2
  3. Listpunkt 3
  4. Listpunkt 4

Som du ser är symbolerna framför listpunkterna som standard 1, 2, 3 och så vidare. Liksom med <ul>-taggen kan man få bort dessa genom att ge egenskapen list-style-type värdet none.

CSS - Cascading Style Sheets
ol{ list-style-type: none; }
  1. Listpunkt 1
  2. Listpunkt 2
  3. Listpunkt 3
  4. Listpunkt 4

Här är några andra vanliga värden du kan ge list-style-type.

CSS - Cascading Style Sheets
ol{ list-style-type: lower-alpha; /* Alfabetet som gemener (små bokstäver) */ }
  1. Listpunkt 1
  2. Listpunkt 2
  3. Listpunkt 3
  4. Listpunkt 4
CSS - Cascading Style Sheets
ol{ list-style-type: upper-alpha; /* Alfabetet som versaler (stora bokstäver) */ }
  1. Listpunkt 1
  2. Listpunkt 2
  3. Listpunkt 3
  4. Listpunkt 4
CSS - Cascading Style Sheets
ol{ list-style-type: lower-roman; /* Romerska siffror som gemener (små bokstäver) */ }
  1. Listpunkt 1
  2. Listpunkt 2
  3. Listpunkt 3
  4. Listpunkt 4
CSS - Cascading Style Sheets
ol{ list-style-type: upper-roman; /* Romerska siffror som versaler (stora bokstäver) */ }
  1. Listpunkt 1
  2. Listpunkt 2
  3. Listpunkt 3
  4. Listpunkt 4

Gå till nästa lektion, Display.