Przejdź do treści

Wykazy - CSS

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)?

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 wykazu (markera) i należy zamiast niego wpisać:
  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
  4. decimal - liczby arabskie

    Przykład

    list-style-type: decimal
    • Punkt pierwszy
    • Punkt drugi
    • Punkt trzeci
  5. lower-alpha - małe litery

    Przykład

    list-style-type: lower-alpha
    • Punkt pierwszy
    • Punkt drugi
    • Punkt trzeci
  6. upper-alpha - duże litery

    Przykład

    list-style-type: upper-alpha
    • Punkt pierwszy
    • Punkt drugi
    • Punkt trzeci
  7. upper-roman - duże liczby rzymskie

    Przykład

    list-style-type: upper-roman
    • Punkt pierwszy
    • Punkt drugi
    • Punkt trzeci
  8. lower-roman - małe liczby rzymskie

    Przykład

    list-style-type: lower-roman
    • Punkt pierwszy
    • Punkt drugi
    • Punkt trzeci
  9. none - brak wyróżnika (markera)

    Przykład

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

Oprócz tego Firefox oraz częściowo Opera 6, Chrome i MSIE 8.0 (wartości dla CSS 2.1) obsługują dodatkowo następujące typy:

  • decimal-leading-zero ("prowadzące zero" np.: 01, 02, 03,...)
  • lower-latin (małe łacińskie: a, b, c,... z) - to samo co lower-alpha
  • upper-latin (duże łacińskie: A, B, C,... Z) - to samo co upper-alpha
  • lower-greek (małe greckie: έ, ή, ί,...)
  • georgian (an, ban, gan,..., he, tan, in, in-an,...)
  • armenian
  • hebrew (hebrajskie) (CSS 2.0)
  • cjk-ideographic (CSS 2.0)
  • hiragana (a, i, u, e, o, ka, ki,...) (CSS 2.0)
  • katakana (A, I, U, E, O, KA, KI,...) (CSS 2.0)
  • hiragana-iroha (i, ro, ha, ni, ho, he, to,...) (CSS 2.0)
  • katakana-iroha (I, RO, HA, NI, HO, HE, TO,...) (CSS 2.0)

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.

UWAGA! Niestety Internet Explorer 7.0 nie interpretuje dodatkowych typów, natomiast MSIE 8.0 obsługuje pierwszą część (CSS 2.1) dodatkowych typów, ale tylko w trybie Standards Compliance.

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.

Komentarze

Zobacz więcej komentarzy

Facebook