CSS Liste

CSS liste egenskapene lar deg plassere, endre listeemne merker, eller bruke bilder som listeemne merker.

CSS Liste

På en måte kan enhver innhold som ikke er beskrivende tekst anses som en liste. Folketelling, solsystemet, slektshistorie, besøksmeny, og selv alle dine venner kan representeres som en liste eller en liste over lister.

Fordi listen er så variert, er det viktig å si at CSS liste stil ikke er veldig rik, er virkelig en stor skuffelse.

Listetype

For å påvirke listen stil, er det enkleste (og mest omfattende) måten å endre merket typen.

For eksempel, i en usortert liste, er merket (marker) en prikk ved siden av hvert listeemne. I en sortert liste kan merket være et bokstav, et tall eller et annet symbol i et tallsystem.

For å endre merket for listeemnet kan du bruke egenskapen list-style-type:

ul {list-style-type : square}

På denne uttalelsen settes merket for listenemner i en usortert liste til en bokstavelig plass.

Listeelementbilde

Noen ganger er vanlige merker ikke nok. Du kan ønske å bruke et bilde for hver merke, noe som kan gjøres ved hjelp av list-style-image egenskapen gjør:

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

Det er bare å bruke en url() verdi for å bruke et bilde som merke.

Listemerkets plassering

CSS2.1 kan bestemme om merket skal vises utenfor eller inne i listeemneinnholdet. Dette gjøres ved hjelp av list-style-position Fullført.

Kort liste stil

For enkelhets skyld kan de tre ovennevnte liste stil attributtene kombineres til en bekvem egenskap:list-stylesom dette:

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

Verdiene for list-style kan oppføres i hvilken rekkefølge som helst, og alle verdiene kan ignoreres. Sønn som en verdi er gitt, fylles de andre med standardverdiene.

CSS listeeksempel:

I en usortert liste kan forskjellige typer av listemarker merkes
Dette eksempel viser forskellige typer af listeemne markører i CSS.
I en sortert liste kan forskellige typer av listeemner merkes
Dette eksempel viser forskellige typer af listeemne markører i CSS.
Alle listeemne markørstyper
Dette eksempel viser alle forskellige typer af listeemne markører i CSS.
Brug af billede som listeemne markør
Dette eksempel viser, hvordan man bruger et billede som listeemne markør.
Placer listeemne markøren
Dette eksempel viser, hvor man skal placere listeemne markøren.
Definer alle listeegenskaber i en erklæring
Dette eksempel viser, hvordan man sætter alle egenskaber, der bruges til lister, i en kortformet egenskab.

CSS Listeegenskab(list)

Egenskab Beskrivelse
list-style Kortformet Egenskab. Bruges til at sætte alle egenskaber, der bruges til lister, i en erklæring.
list-style-image Brug af billede som listeemne markør.
list-style-position Indstil placeringen af listeemne markør i listen.
list-style-type Indstil typen af listeemne markør.
marker-offset