Styl seznamu - Triky CSS

Anonim

Tato list-stylevlastnost je zkratková vlastnost, která nastavuje hodnoty pro tři různé vlastnosti související se seznamem v jedné deklaraci:

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

Zde je příklad syntaxe:

ul ( list-style: square outside none; )

Která by byla stejná jako následující longhandová verze:

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

Ve zkratce, pokud jsou některé hodnoty vynechány, vrátí se do původního stavu.

Hodnoty pro list-style-type

list-style-typeVlastnost definuje typ seznamu nastavením obsahu každý marker, nebo kulky, na seznamu. Přijatelné hodnoty klíčových slov pro 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á úplnější seznam. Hodnoty jiných než klíčových slov byly zavedeny v CSS3 a začínají vidět nějakou podporu, například:

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

Následující ukázka obsahuje skupinu neuspořádaných seznamů k předvedení každé hodnoty klíčového slova:

list-style-typeVlastnost platí pro všechny seznamy a každým detailem, který je nastaven na display: list-item.

Barva značky seznamu bude jakákoli vypočítaná barva prvku (nastavená prostřednictvím colorvlastnosti).

Hodnoty pro list-style-position

K list-style-positionvlastnictví definuje kam umístit seznamu značku, a přijímá jednu ze dvou hodnot: insidenebo venku. Níže jsou ukázány s paddingodstraněním ze seznamů a přidáním levého červeného ohraničení:

Hodnoty pro list-style-image

list-style-imageVlastnost určuje, zda je seznam značkovač nastaven s obrazem a přijímá hodnotu „none“ nebo adresu URL, která odkazuje na obrázku:

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

Další ukázky

Podpora prohlížeče

Chrome Safari Firefox Opera TJ Android iOS
Funguje Funguje Funguje Funguje Funguje Funguje Funguje

IE6 / 7 nepodporují všechny hodnoty klíčových slov list-style-typea mají také chybu, kde položky s plovoucím seznamem nezobrazují svou značku seznamu. To je vyřešeno pomocí obrázku na pozadí (místo list-style-image) v položkách seznamu.