Loendistiilis - CSS-trikid

Anonim

list-styleVara on lühem vara, et komplekti väärtused kolme erineva nimekirja seotud omadused ühes deklaratsiooni:

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

Siin on näide süntaksist:

ul ( list-style: square outside none; )

Mis oleks sama kui järgmine pikakäeline versioon:

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

Lühidalt, kui väärtused välja jätta, naasevad nad oma algsesse olekusse.

Väärtused list-style-type

list-style-typeVara määratleb tüüpi nimekirja seades sisu iga marker või bullet, nimekirja. Vastuvõetavad märksõna väärtused list-style-typehõlmavad järgmist:

  • 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-il on täielik nimekiri. Märksõnavälised väärtused võeti kasutusele CSS3-s ja hakkavad nägema tuge, näiteks:

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

Järgmine demo sisaldab rida järjestamata loendeid, et näidata iga märksõna väärtust:

list-style-typeVara kehtib kõigi nimekirjade ning mis tahes element, mis on seatud display: list-item.

Loendimärgi värv on ükskõik milline on elemendi arvutatud värv (määratud coloratribuudi kaudu ).

Väärtused list-style-position

list-style-positionVara määratleb kuhu paigutada loendilooja, ja see võtab üks kahest väärtusest: insidevõi väljaspool. Neid näidatakse allpool paddingloeteludest eemaldatuna ja lisatud vasak vasak punane äär:

Väärtused list-style-image

list-style-imageVara määrab, kas loendilooja on seatud kujutise ja aktsepteerib väärtus "none" või URL, mis osutab pilt:

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

Veel demosid

Brauseri tugi

Chrome Safari Firefox Ooper IE Android iOS
Töötab Töötab Töötab Töötab Töötab Töötab Töötab

IE6 / 7 ei toeta kõiki märksõna väärtusi list-style-typeja sellel on ka viga, kus ujukkataloogi üksused ei näita nende loendimarkerit. Selle lahendamiseks kasutatakse list-style-imageloendi üksustes taustapilti (selle asemel ).