Štýl zoznamu - Triky CSS

Anonim

list-styleVlastnosť je vlastnosť skratka, ktorá stanovuje hodnoty pre tri rôzne vlastnosti súvisiace so zoznamom v jednom vyhlásenie:

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

Tu je príklad syntaxe:

ul ( list-style: square outside none; )

Čo by bolo rovnaké ako v nasledujúcej dlhodobej verzii:

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

Ak sa v skratke vynechajú nejaké hodnoty, vrátia sa do pôvodného stavu.

Hodnoty pre list-style-type

list-style-typeVlastnosť definuje typ zoznamu nastavením obsahu každý marker, alebo guľky, na zozname. Prijateľné hodnoty kľúčových slov pre list-style-type:

  • 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 má úplnejší zoznam. Hodnoty iných ako kľúčových slov boli zavedené v CSS3 a začína sa u nich objavovať určitá podpora, napríklad:

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

Nasledujúca ukážka obsahuje skupinu neusporiadaných zoznamov na demonštráciu každej hodnoty kľúčového slova:

list-style-typeVlastnosť platí pre všetky zoznamy a každým detailom, ktorý je nastavený na display: list-item.

Farba značky zoznamu bude akákoľvek vypočítaná farba prvku (nastavená prostredníctvom colorvlastnosti).

Hodnoty pre list-style-position

K list-style-positionvlastníctva definuje kam umiestniť zoznamu značku, a prijíma jednu z dvoch hodnôt: insidealebo vonku. Nižšie sú uvedené možnosti paddingodstránené zo zoznamov a pridané ľavé červené orámovanie:

Hodnoty pre list-style-image

list-style-imageVlastnosť určuje, či je zoznam značkovač nastavený s obrazom a prijíma hodnotu "none" alebo adresu URL, ktorá odkazuje na obrázku:

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

Ďalšie ukážky

Podpora prehľadávača

Chrome Safari Firefox Opera IE Android iOS
Tvorba Tvorba Tvorba Tvorba Tvorba Tvorba Tvorba

IE6 / 7 nepodporuje všetky hodnoty kľúčových slov list-style-typea tiež má chybu, keď položky s pohyblivým zoznamom nezobrazujú svoju značku zoznamu. Toto je vyriešené použitím obrázka na pozadí (namiesto list-style-image) v položkách zoznamu.