Stil popisa - CSS-trikovi

Anonim

list-styleNekretnina je Kratica svojstva koja postavlja vrijednosti za tri različita svojstva u jednoj deklaraciji popis vezane:

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

Evo primjera sintakse:

ul ( list-style: square outside none; )

Što bi bilo isto kao sljedeća dugoročna verzija:

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

Ukratko, ako su neke vrijednosti izostavljene, vratit će se u početno stanje.

Vrijednosti za list-style-type

list-style-typeSvojstvo definira vrstu popisa postavljanjem sadržaj svakog markera ili metak, na popisu. Prihvatljive vrijednosti ključnih riječi za list-style-typeuključuju:

  • 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 ima cjelovitiji popis. Vrijednosti koje nisu ključne riječi uvedene su u CSS3 i počinju dobivati ​​određenu podršku, poput:

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

Sljedeća demonstracija uključuje skupinu neuređenih popisa za demonstraciju svake vrijednosti ključne riječi:

list-style-typeImovine odnosi se na sve liste, i bilo koji element koji je postavljen na display: list-item.

Boja oznake popisa bit će onakva kakva je izračunata boja elementa (postavljena putem colorsvojstva).

Vrijednosti za list-style-position

U list-style-positionvlasništva definira gdje postavite oznaku popis i prihvaća jednu od dvije vrijednosti: insideili izvan njega. Oni su prikazani u nastavku paddinguklanjanjem s popisa i dodavanjem lijevog crvenog obruba:

Vrijednosti za list-style-image

list-style-imageSvojstvo određuje da li je označeni popis je postavljen sa slikom i prihvaća vrijednosti „ništa” ili URL koji upućuje na slici:

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

Više demonstracija

Podrška preglednika

Krom Safari Firefox Opera IE Android iOS
Djela Djela Djela Djela Djela Djela Djela

IE6 / 7 ne podržava sve vrijednosti ključnih riječi za, list-style-typea također ima grešku u kojoj plutajuće stavke popisa ne prikazuju oznaku popisa. To se rješava upotrebom pozadinske slike (umjesto list-style-image) na stavkama popisa.