Seznam-slog - CSS-triki

Anonim

list-styleLastnost je okrajšava lastnost, ki določa vrednosti za tri različne lastnosti, povezane s seznama v eni izjavi:

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

Tu je primer sintakse:

ul ( list-style: square outside none; )

Kar bi bilo enako kot naslednja dolgoročna različica:

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

Če so katere koli vrednosti izpuščene, se bodo vrnile v začetno stanje.

Vrednosti za list-style-type

list-style-typeLastnost določa vrsto seznama z določitvijo vsebnosti vsakega markerja, ali krogle, na seznamu. Sprejemljive vrednosti ključnih besed za list-style-typevključujejo:

  • 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 popolnejši seznam. Vrednosti, ki niso ključne besede, so bile uvedene v CSS3 in začenjajo videti nekaj podpore, na primer:

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

Naslednja predstavitev vključuje skupino neurejenih seznamov za prikaz vrednosti vsake ključne besede:

list-style-typeLastnost velja za vse liste, in vsak element, ki je določen za display: list-item.

Barva označevalnika seznama bo takšna, kakršna je izračunana barva elementa (nastavljena prek colorlastnosti).

Vrednosti za list-style-position

Na list-style-positionopredeljuje lastnine kje postaviti seznam marker, in sprejme enega od dveh vrednosti: insideali zunaj. Ti so prikazani spodaj z paddingodstranjenimi s seznamov in dodanimi levo rdečo obrobo:

Vrednosti za list-style-image

list-style-imageLastnost določa, ali je seznam dvojno podajo določena s sliko, in sprejema vrednost "nič" ali URL, ki kaže na sliki:

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

Več predstavitev

Podpora za brskalnik

Chrome Safari Firefox Opera IE Android iOS
Deluje Deluje Deluje Deluje Deluje Deluje Deluje

IE6 / 7 ne podpira vseh vrednosti ključnih besed za list-style-typein ima tudi napako, kjer plavajoči elementi seznama ne prikažejo označevalnika seznama. To se reši z uporabo slike ozadja (namesto list-style-image) na elementih seznama.