Liste-stil - CSS-triks

Anonim

Den list-styleegenskapen er en forkortelse egenskap som setter verdier for tre forskjellige listerelaterte eiendommer i en erklæring:

ul ( list-style: || || ; )

Her er et eksempel på syntaksen:

ul ( list-style: square outside none; )

Som vil være det samme som følgende langhåndsversjon:

ul ( list-style-type: square; list-style-position: outside; list-style-image: none; )

Kort sagt, hvis noen verdier utelates, vil de gå tilbake til sin opprinnelige tilstand.

Verdier for list-style-type

Den list-style-typeegenskap definerer den type liste ved å sette innholdet i hver markør, eller kule, på listen. Akseptable søkeordverdier for list-style-typeinkluderer:

  • disc
  • circle
  • square
  • decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • lower-greek
  • lower-latin
  • upper-latin
  • armenian
  • georgian
  • lower-alpha
  • upper-alpha
  • none

MDN har en mer komplett liste. Verdier uten søkeord ble introdusert i CSS3, og begynner å se litt støtte, som:

ul ( list-style-type: "→"; )

Følgende demo inkluderer en gruppe uordnede lister for å demonstrere hver søkeordverdi:

Den list-style-typeegenskapen gjelder for alle lister, og til alle objekt som er satt til display: list-item.

Fargen på listemarkøren vil være uansett hvilken beregnet farge på elementet er (angitt via coloreiendommen).

Verdier for list-style-position

De list-style-positioneiendom definerer hvor for å plassere listen markør, og det tar en av to verdier: insideeller utenfor. Disse er demonstrert nedenfor med paddingfjernet fra listene og en venstre rød kant lagt til:

Verdier for list-style-image

Den list-style-imageegenskapen avgjør om listen markør er satt med et bilde, og aksepterer en verdi på “ingen” eller en URL som peker til bilde:

ul ( list-style-image: url(images/bullet.png.webp); )

Flere demonstrasjoner

Nettleserstøtte

Chrome Safari Firefox Opera DVS Android iOS
Virker Virker Virker Virker Virker Virker Virker

IE6 / 7 støtter ikke alle søkeordverdiene for list-style-typeog har også en feil der flytede listeelementer ikke viser listemarkøren sin. Dette løses ved å bruke et bakgrunnsbilde (i stedet for list-style-image) på listeelementene.