Typ stylu wykazu {list-style-type}

Jak zmienić rodzaj (styl, typ) wykazu - wypunktowanie (koło, okrąg, kwadrat) i numerowanie (liczby arabskie, rzymskie, litery łacińskie, greckie, hebrajskie)?

Typ stylu wykazu {list-style-type}

selektor { list-style-type: typ }

Selektorem mogą być znaczniki dotyczące wykazów: ul - wypunktowanie, ol - wykaz numerowany oraz li - pojedynczy punkt wykazu [zobacz: Wstawianie stylów].

Natomiast "typ" odpowiada za wygląd wyróżnika (markera) wykazu. Należy zamiast niego wpisać dowolny z poniżej wymienionych typów albo specjalną wartość none, która wyłącza wyświetlanie wyróżników przy punktach wykazu.

Jeśli za mało Ci wbudowanych typów stylu wykazu albo oczekujesz bardziej złożonego sposobu numeracji punktów i podpunktów, zobacz rozdziały: Niestandardowy typ stylu wykazu, Wyróżnik obrazkowy wykazu, Automatyczne numeracja wykazu.

Przy tworzeniu wykazów HTML możesz również skorzystać ze specjalnego generatora zamieszczonego tutaj. Dzięki niemu w kilka minut skonfigurujesz dowolny, nawet najbardziej skomplikowany układ numeracji albo punktów i podpunktów.

Znakowy typ stylu wykazu

disc - koło
Przykład
list-style-type: disc
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
circle - okrąg
Przykład
list-style-type: circle
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
square - kwadrat
Przykład
list-style-type: square
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci

Alfabetyczny typ stylu wykazu

lower-alpha - małe litery
Przykład
list-style-type: lower-alpha
1. Punkt pierwszy
2. Punkt drugi
3. Punkt trzeci
upper-alpha - duże litery
Przykład
list-style-type: upper-alpha
1. Punkt pierwszy
2. Punkt drugi
3. Punkt trzeci
lower-latin - małe litery łacińskie
Przykład
list-style-type: lower-alpha
1. Punkt pierwszy
2. Punkt drugi
3. Punkt trzeci
upper-latin - duże litery łacińskie
Przykład
list-style-type: upper-alpha
1. Punkt pierwszy
2. Punkt drugi
3. Punkt trzeci
lower-greek (małe greckie: α, β, γ...)
Przykład
list-style-type: lower-greek
1. Punkt pierwszy
2. Punkt drugi
3. Punkt trzeci

Numeryczny typ stylu wykazu

decimal - liczby arabskie
Przykład
list-style-type: decimal
1. Punkt pierwszy
2. Punkt drugi
3. Punkt trzeci
upper-roman - duże liczby rzymskie
Przykład
list-style-type: upper-roman
1. Punkt pierwszy
2. Punkt drugi
3. Punkt trzeci
lower-roman - małe liczby rzymskie
Przykład
list-style-type: lower-roman
1. Punkt pierwszy
2. Punkt drugi
3. Punkt trzeci

Oprócz tego współczesne przeglądarki obsługują dodatkowo następujące typy:

decimal-leading-zero ("prowadzące zero" - np.: 01, 02, 03...)
Przykład
list-style-type: decimal-leading-zero
1. Punkt pierwszy
2. Punkt drugi
3. Punkt trzeci
georgian (gruzińskie: an, ban, gan... he, tan, in, in-an...)
Przykład
list-style-type: georgian
1. Punkt pierwszy
2. Punkt drugi
3. Punkt trzeci
armenian (ormiańskie)
Przykład
list-style-type: armenian
1. Punkt pierwszy
2. Punkt drugi
3. Punkt trzeci

Następujące wartości list-style-type wchodzą w skład CSS 2.0, ale nie CSS 2.1: hebrew, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha. Są jednak wspierane przez wszystkie popularne przeglądarki.

hebrew (hebrajskie)
Przykład
list-style-type: hebrew
1. Punkt pierwszy
2. Punkt drugi
3. Punkt trzeci
cjk-ideographic
Przykład
list-style-type: cjk-ideographic
1. Punkt pierwszy
2. Punkt drugi
3. Punkt trzeci
hiragana (a, i, u, e, o, ka, ki...)
Przykład
list-style-type: hiragana
1. Punkt pierwszy
2. Punkt drugi
3. Punkt trzeci
katakana (A, I, U, E, O, KA, KI...)
Przykład
list-style-type: katakana
1. Punkt pierwszy
2. Punkt drugi
3. Punkt trzeci
hiragana-iroha (i, ro, ha, ni, ho, he, to...)
Przykład
list-style-type: hiragana-iroha
1. Punkt pierwszy
2. Punkt drugi
3. Punkt trzeci
katakana-iroha (I, RO, HA, NI, HO, HE, TO...)
Przykład
list-style-type: katakana-iroha
1. Punkt pierwszy
2. Punkt drugi
3. Punkt trzeci

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
`list-style-type`	1 2008-12-11	1 2004-11-09	12 2015-07-29	3.5 1998-11-18	1 2003-06-23
`list-style-type armenian`	1 2008-12-11	1 2004-11-09	12 2015-07-29	6 2001-12-18	1 2003-06-23
`list-style-type circle`	1 2008-12-11	1 2004-11-09	12 2015-07-29	3.5 1998-11-18	1 2003-06-23
`list-style-type cjk-ideographic`	1 2008-12-11	1 2004-11-09	79 2020-01-15	15 2013-07-02	5 2010-06-07
`list-style-type decimal`	1 2008-12-11	1 2004-11-09	12 2015-07-29	3.5 1998-11-18	1 2003-06-23
`list-style-type decimal-leading-zero`	1 2008-12-11	1 2004-11-09	12 2015-07-29	8 2005-04-19	1 2003-06-23
`list-style-type disc`	1 2008-12-11	1 2004-11-09	12 2015-07-29	3.5 1998-11-18	1 2003-06-23
`list-style-type georgian`	1 2008-12-11	1 2004-11-09	12 2015-07-29	6 2001-12-18	1 2003-06-23
`list-style-type hebrew`	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	1 2003-06-23
`list-style-type hiragana`	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	1 2003-06-23
`list-style-type hiragana-iroha`	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	1 2003-06-23
`list-style-type katakana`	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	1 2003-06-23
`list-style-type katakana-iroha`	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	1 2003-06-23
`list-style-type lower-alpha`	1 2008-12-11	1 2004-11-09	12 2015-07-29	6 2001-12-18	1 2003-06-23
`list-style-type lower-greek`	1 2008-12-11	1 2004-11-09	12 2015-07-29	6 2001-12-18	1 2003-06-23
`list-style-type lower-latin`	1 2008-12-11	1 2004-11-09	12 2015-07-29	6 2001-12-18	1 2003-06-23
`list-style-type lower-roman`	1 2008-12-11	1 2004-11-09	12 2015-07-29	6 2001-12-18	1 2003-06-23
`list-style-type none`	1 2008-12-11	≤72 2020-01-07	12 2015-07-29	15 2013-07-02	1 2003-06-23
`list-style-type square`	1 2008-12-11	1 2004-11-09	12 2015-07-29	3.5 1998-11-18	1 2003-06-23
`list-style-type upper-alpha`	1 2008-12-11	1 2004-11-09	12 2015-07-29	6 2001-12-18	1 2003-06-23
`list-style-type upper-latin`	1 2008-12-11	1 2004-11-09	12 2015-07-29	6 2001-12-18	1 2003-06-23
`list-style-type upper-roman`	1 2008-12-11	1 2004-11-09	12 2015-07-29	6 2001-12-18	1 2003-06-23

Komentarze

Zobacz więcej komentarzy