CSS lista

CSS listaegenskaper tillåter dig att placera, ändra listtecken eller använda bilder som listtecken.

CSS lista

I viss mån kan alla innehåll som inte är beskrivande text betraktas som en lista. Folkavförande, solsystem, släktträd, besöksmenyer, även alla dina vänner kan representeras som en lista eller en lista inom en lista.

Eftersom listor är så varierade, är detta en ganska viktig egenskap, och det är verkligen ett stort missförstånd att CSS inte har fler liststilar.

Listtyp

För att påverka listans stil är det enklaste (och mest omfattande) sättet att ändra teckentypen.

Till exempel, i en oordnad lista är listtecknet (marker) en punkt bredvid varje listobjekt. I en ordnad lista kan tecknet vara ett bokstav, ett nummer eller ett annat tecken i ett annat talsystem.

För att ändra teckentypen för listobjektet kan du använda egenskapen list-style-type:

ul {list-style-type : square}

Ovanstående deklaration ställer in listtecknet för en oordnad lista som en rektangel.

listobjektbild

Ibland räcker det inte med vanliga tecken. Du kanske vill använda en bild för varje tecken, vilket kan göras med list-style-image att göra:

ul li {list-style-image : url(xxx.gif)}

Det räcker att enkelt använda ett url() värde för att använda en bild som tecken.

listteckenplacering

CSS2.1 kan bestämma om tecknet ska visas utanför eller inuti listobjektets innehåll. Detta görs genom att använda list-style-position klar.

Kort liststil

För enkelhetens skull kan de tre ovanstående liststilattributen samlas till en bekväm egenskap:list-styleliknande detta:

li {list-style : url(example.gif) square inside}

Värdet för list-style kan listas i valfri ordning och dessa värden kan ignoreras. Sålunda som långt som ett värde erbjuds, fylls de andra med standardvärden.

CSS listaexempel:

I en oordnad lista kan olika typer av listmärken markeras
Detta exempel visar olika typer av listmärken i CSS.
I en ordnad lista kan olika typer av listobjekt markeras
Detta exempel visar olika typer av listmärken i CSS.
Alla lista stiltyper
Detta exempel visar alla olika typer av listmärken i CSS.
Använd en bild som listmärke
Detta exempel visar hur man använder en bild som listmärke.
Placera listmärken
Detta exempel visar var listmärkena placeras.
Definiera alla listaegenskaper i en deklaration
Detta exempel visar hur alla egenskaper för listor kan sättas in i en kortformad egenskap.

CSS lista egenskaper(list)

Egenskap Beskrivning
list-style Kortformad egenskap. Används för att placera alla egenskaper för listor i en deklaration.
list-style-image Använd en bild som marker för listobjekt.
list-style-position Ställ in platsen för marker för listobjekt.
list-style-type Ställ in typen för marker för listobjekt.
marker-offset