Lista stílusú - CSS-trükkök

A list-styletulajdonság rövidített tulajdonság, amely három különböző listával kapcsolatos tulajdonság értékét állítja be egy deklarációban:

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

Íme egy példa a szintaxisra:

ul ( list-style: square outside none; )

Ami megegyezik a következő hosszúkézi verzióval:

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

Röviden, ha bármilyen értéket kihagynak, akkor visszaállnak a kezdeti állapotba.

Értékei list-style-type

A list-style-typetulajdonság meghatározza a lista típusát azáltal, hogy beállítja a listán lévő minden egyes jelölő vagy golyó tartalmát. A következő kulcsszavak elfogadható értékei 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

Az MDN teljesebb listával rendelkezik. A kulcsszó nélküli értékeket a CSS3-ban vezették be, és kezdik látni őket némi támogatással, például:

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

A következő bemutató rendezetlen listák csoportját tartalmazza az egyes kulcsszavak értékének bemutatásához:

A list-style-typetulajdonság minden listára és minden elemre vonatkozik, amelyre van állítva display: list-item.

A listajelző színe az elem kiszámított színétől függetlenül lesz (a colortulajdonságon keresztül állítva ).

Értékei list-style-position

A list-style-positiontulajdonság meghatározza, hogy hol helyezze el a listajelzőt, és elfogadja a két érték egyikét: insidevagy kívül. Ezeket az alábbiakban szemléltetjük padding, a listákról eltávolítva, és egy bal oldali piros szegéllyel kiegészítve:

Értékei list-style-image

A list-style-imagetulajdonság meghatározza, hogy a lista jelölője képpel van-e beállítva, és elfogadja a „nincs” értéket vagy a képre mutató URL-t:

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

További Demók

Böngésző támogatás

Króm	Szafari	Firefox	Opera	AZAZ	Android	iOS
Művek	Művek	Művek	Művek	Művek	Művek	Művek

Az IE6 / 7 nem támogatja az összes kulcsszóértéket, list-style-typeés hibája is van, ahol az lebegő listaelemek nem jelenítik meg a listamarkert. Ezt úgy oldják meg, hogy háttérképet (helyett list-style-image) használnak a listaelemeken.