Utforma punktlista i CSS

CSS kan användas för att göra dina punktlistor och numrerade listor roligare att titta på och tydligt uppställda. Punktlistor går under taggen ul och numrerade listor går under taggen ol. En punktlista skiljer sig från en numrerad lista genom att en numrerad lista ändrar sig för varje listelement. I en numrerad lista kommer först siffran “1.” eller romerska siffran “I.” och sedan kommer “2.” respektive “II.” alternativt bokstäver som “A.” och “a.” respektive “B.” och “b.”.

Numrerade listor

Numrerade listor specificeras i CSS-mallen på följande sätt:

Vill du ha vanliga siffror (1, 2, 3) använder du

ol { list-style-type: decimal; }

Vill du ha stora romerska bokstäver (I, II, III) använder du

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

och vill du ha små (i, ii, iii) använder du

ol { list-style-type: lower-roman; }

Vill du ha stora bokstäver (A, B, C) använder du

ol { list-style-type: upper-alpha; }

och vill du ha små bokstäver (a, b, c) använder du

ol { list-style-type: lower-alpha; }

Punktlistor

Punkterna i punktlistorna kan du formatera på många olika sätt och göra i stort sett hur du vill. Om du vill ha en standardpunkt är css-koden för detta:

ul { list-style-type: disc; }

I HTML-koden kommer sedan varje listelement med taggen “li” föregås av en punkt.

Om du vill ha en cirkel blir koden:

ul { list-style-type: circle; }

Vill du själv bestämma symbol för punktlistan kan du använda din egen bild (här kallad “bildpunkt.gif”) och använda denna kod i CSS-mallen:

ul { list-style-image: url(bildpunkt.gif);}

Vill du sedan ha en punkt på ett ställe och din egen bild på ett annat ställe kan du använda dig av klasser för att specificera detta. Gör en klass med punkter

[.punktpunkter { list-style-type: disc; }]

och en annan med din bild

[.bildpunkter{ list-style-image: url(bildpunkt.gif);}]

och använd sedan respektive klass där du vill ha det i HTML-koden, före listelementen, med

ul class=”punktpunkter”

respektive

ul class=”bildpunkter”

Leave a Reply

Your email address will not be published. Required fields are marked *