Przejdź do treści

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.
Dla zainteresowanych
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.

Potrzebujesz pomocy?
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

  1. disc - koło

    Przykład

    list-style-type: disc
    • Punkt pierwszy
    • Punkt drugi
    • Punkt trzeci
  2. circle - okrąg

    Przykład

    list-style-type: circle
    • Punkt pierwszy
    • Punkt drugi
    • Punkt trzeci
  3. square - kwadrat

    Przykład

    list-style-type: square
    • Punkt pierwszy
    • Punkt drugi
    • Punkt trzeci

Alfabetyczny typ stylu wykazu

  1. lower-alpha - małe litery

    Przykład

    list-style-type: lower-alpha
    1. Punkt pierwszy
    2. Punkt drugi
    3. Punkt trzeci
  2. upper-alpha - duże litery

    Przykład

    list-style-type: upper-alpha
    1. Punkt pierwszy
    2. Punkt drugi
    3. Punkt trzeci
  3. lower-latin - małe litery łacińskie

    Przykład

    list-style-type: lower-alpha
    1. Punkt pierwszy
    2. Punkt drugi
    3. Punkt trzeci
  4. upper-latin - duże litery łacińskie

    Przykład

    list-style-type: upper-alpha
    1. Punkt pierwszy
    2. Punkt drugi
    3. Punkt trzeci
  5. 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

  1. decimal - liczby arabskie

    Przykład

    list-style-type: decimal
    1. Punkt pierwszy
    2. Punkt drugi
    3. Punkt trzeci
  2. upper-roman - duże liczby rzymskie

    Przykład

    list-style-type: upper-roman
    1. Punkt pierwszy
    2. Punkt drugi
    3. Punkt trzeci
  3. 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:

  1. 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
  2. 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
  3. 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.

  1. hebrew (hebrajskie)

    Przykład

    list-style-type: hebrew
    1. Punkt pierwszy
    2. Punkt drugi
    3. Punkt trzeci
  2. cjk-ideographic

    Przykład

    list-style-type: cjk-ideographic
    1. Punkt pierwszy
    2. Punkt drugi
    3. Punkt trzeci
  3. hiragana (a, i, u, e, o, ka, ki...)

    Przykład

    list-style-type: hiragana
    1. Punkt pierwszy
    2. Punkt drugi
    3. Punkt trzeci
  4. katakana (A, I, U, E, O, KA, KI...)

    Przykład

    list-style-type: katakana
    1. Punkt pierwszy
    2. Punkt drugi
    3. Punkt trzeci
  5. 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
  6. 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: wartość1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
list-style-type: armenian1
2008-12-11		1
2004-11-09		12
2015-07-29		6
2001-12-18		1
2003-06-23
list-style-type: circle1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
list-style-type: cjk-ideographic1
2008-12-11		1
2004-11-09		79
2020-01-15		15
2013-07-02		5
2010-06-07
list-style-type: decimal1
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-zero1
2008-12-11		1
2004-11-09		12
2015-07-29		8
2005-04-19		1
2003-06-23
list-style-type: disc1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
list-style-type: georgian1
2008-12-11		1
2004-11-09		12
2015-07-29		6
2001-12-18		1
2003-06-23
list-style-type: hebrew1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
list-style-type: hiragana1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
list-style-type: hiragana-iroha1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
list-style-type: katakana1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
list-style-type: katakana-iroha1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
list-style-type: lower-alpha1
2008-12-11		1
2004-11-09		12
2015-07-29		6
2001-12-18		1
2003-06-23
list-style-type: lower-greek1
2008-12-11		1
2004-11-09		12
2015-07-29		6
2001-12-18		1
2003-06-23
list-style-type: lower-latin1
2008-12-11		1
2004-11-09		12
2015-07-29		6
2001-12-18		1
2003-06-23
list-style-type: lower-roman1
2008-12-11		1
2004-11-09		12
2015-07-29		6
2001-12-18		1
2003-06-23
list-style-type: none1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
list-style-type: square1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
list-style-type: upper-alpha1
2008-12-11		1
2004-11-09		12
2015-07-29		6
2001-12-18		1
2003-06-23
list-style-type: upper-latin1
2008-12-11		1
2004-11-09		12
2015-07-29		6
2001-12-18		1
2003-06-23
list-style-type: upper-roman1
2008-12-11		1
2004-11-09		12
2015-07-29		6
2001-12-18		1
2003-06-23

Komentarze

Zobacz więcej komentarzy

Facebook