Przejdź do treści

Wykazy - CSS

W tym rozdziale dowiesz się...

Określenie parametrów list (wypunktowanie, numerowanie) przy użyciu arkuszy 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 współczesne 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.

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.

Niestandardowy typ stylu wykazu @counter-style

W jaki sposób stworzyć własny, niestandardowy rodzaj (typ, styl) wykazu? Jak zrobić listę z punktami w postaci emotikon (emoji)?

(CSS 3 - interpretuje Firefox 33, Opera 77, Chrome 91)

Niestandardowy typ stylu wykazu @counter-style

Język CSS udostępnia szerokie możliwości ustalania typu wykazu. Są to zarówno wykazy z wyróżnikami (markerami) graficznymi jak i różnorodne style numeracji. Co jednak zrobić, jeśli żaden z wbudowanych rodzajów nie spełnia naszych oczekiwań? Rozwiązaniem może być użycie specjalnej reguły stylów @counter-style, która pozwala zdefiniować swój własny, niestandardowy typ stylu wykazu, w którym można precyzyjnie kontrolować wygląd jego wyróżników.

Aby utworzyć swój niestandardowy typ stylu wykazu, najpierw w arkuszu stylów (wewnętrznym lub zewnętrznym) należy wstawić jego definicję:

@counter-style typ {
	system: algorytm;
	dodatkowe-deklaracje
}
Typ określa nazwę, którą potem będziemy się posługiwać przypisując tak zdefiniowany typ stylu do wybranych wykazów na stronie - np.:
ol {
	list-style-type: typ;
}
Warto pamiętać, że jeśli chcemy przypisać tak utworzony typ stylu do wielu wykazów na stronie, wystarczy zdefiniować go tylko raz (pierwsze polecenie powyżej), a następnie można przypisywać go dowolną liczbę razy (drugie polecenie).

Nazwa typu stylu nie może kolidować ze słowami kluczowymi używanymi przy definiowaniu artybutów mieszanych wykazu: none, decimal, disc, square, circle, disclosure-open, disclosure-closed, inside, outside, initial, inherit, unset, revert, default. Ponadto musi spełniać format niestandardowego identyfikatora. Trzeba również pamiętać, że rozróżniana jest w tym przypadku wielkość liter - tzn. np. NAZWA nie będzie tym samym co nazwa.

Algorytm określa sposób generowania sekwencji kolejnych wyróżników wykazu. Możliwe jest podanie następujących wartości:

Dodatkowe-deklaracje zależą od użytego algorytmu i zostaną opisane poniżej. Jedną z takich deklaracji, którą musimy obowiązkowo podać w przypadku większości systemów, jest "symbols: symbole". Określa ona rozdzieloną dowolnymi białymi znakami (np. spacjami) listę tekstów, które zostaną użyte jako wyróżniki wykazu (patrz poniżej). Każdy z elementów tej listy powinien być ujęty w znaki cudzysłowu ("...") albo apostrofy ('...'), chyba że spełnia format niestandardowego identyfikatora. Możemy używać zarówno litery, cyfry jak i inne znaki, a nawet piktogramy emoji. Przy czym w tym ostatnim przypadku należy skopiować sam znak emotikony, a nie używać numerycznego kodu encji HTML.

Niestandardowy identyfikator (ang. custom identifier) to tekst składający się tylko z małych i wielkich liter łacińskich (ale bez polskich znaków diakrytycznych), znaków podkreślnika ("_"), myślników ("-"), cyfr arabskich (ale nie na początku ani nie zaraz po myślniku znajdującym się się na początku!) oraz innych znaków Unicode, których nie da się normalnie wpisać z klawiatury (tzn. o kodzie numerycznym większym niż "\80" - znak euro "€"). Jeśli chcemy użyć innych znaków, należy je poprzedzić odwróconym ukośnikiem ("\").

System cykliczny @counter-style {system: cyclic}

@counter-style typ {
	system: cyclic;
	symbols: symbole;
}

Punkty wykazu będą opatrzone kolejnymi z podanych symbolów. Jeśli punktów w wykazie będzie więcej, zostaną ponownie użyte symbole z początku listy i tak w kółko.

Przykład @counter-style {system: cyclic}

@counter-style nazwa {
	system: cyclic;
	symbols: a b c;
}
ol {
	list-style-type: nazwa;
}
  1. Punkt pierwszy
  2. Punkt drugi
  3. Punkt trzeci
  4. Punkt czwarty
  5. Punkt piąty
  6. Punkt szósty

System ustalony @counter-style {system: fixed}

@counter-style typ {
	system: fixed;
	symbols: symbole;
}
lub
@counter-style typ {
	system: fixed;
	symbols: symbole;
	fallback: typ-domyślny;
}
Jako typ-domyślny można podać dowolny wbudowany typ stylu wykazu, a nawet nazwę zdefiniowanego przez nas innego niestandardowego typu.

Punkty wykazu będą opatrzone kolejnymi z podanych symbolów. Jeśli punktów w wykazie będzie więcej, zostanie użyty typ-domyślny albo kolejne liczby arabskie poczynając od wartości liczonej od pierwszego punktu wykazu.

Przykład @counter-style {system: fixed}

@counter-style nazwa {
	system: fixed;
	symbols: a b c;
}
ol {
	list-style-type: nazwa;
}
  1. Punkt pierwszy
  2. Punkt drugi
  3. Punkt trzeci
  4. Punkt czwarty
  5. Punkt piąty
  6. Punkt szósty

System symboliczny @counter-style {system: symbolic}

@counter-style typ {
	system: symbolic;
	symbols: symbole;
}

Przy generowaniu wyróżników wykazu podane symbole będą powielane odpowiednią liczbę razy.

Przykład @counter-style {system: symbolic}

@counter-style nazwa {
	system: symbolic;
	symbols: a b c;
}
ol {
	list-style-type: nazwa;
}
  1. Punkt pierwszy
  2. Punkt drugi
  3. Punkt trzeci
  4. Punkt czwarty
  5. Punkt piąty
  6. Punkt szósty

System alfabetyczny @counter-style {system: alphabetic}

@counter-style typ {
	system: alphabetic;
	symbols: symbole;
}

Symbole zostaną użyte do utworzenia numerowania alfabetycznego. Nie trzeba się jednak tutaj ograniczać jedynie do liter - symbole mogą być dowolnymi znakami.

Przykład @counter-style {system: alphabetic}

@counter-style nazwa {
	system: alphabetic;
	symbols: a b c;
}
ol {
	list-style-type: nazwa;
}
  1. Punkt pierwszy
  2. Punkt drugi
  3. Punkt trzeci
  4. Punkt czwarty
  5. Punkt piąty
  6. Punkt szósty

System numeryczny @counter-style {system: numeric}

@counter-style typ {
	system: numeric;
	symbols: symbole;
}

Symbole zostaną potraktowane jako kolejne cyfry (poczynając od zera) systemu liczbowego. Nie trzeba się jednak tutaj ograniczać jedynie do cyfr arabskich - symbole mogą być dowolnymi znakami.

Przykład @counter-style {system: numeric}

Numeracja liczbami w systemie binarnym (dwójkowym):

@counter-style nazwa {
	system: numeric;
	symbols: "0" "1";
}
ol {
	list-style-type: nazwa;
}
  1. Punkt pierwszy
  2. Punkt drugi
  3. Punkt trzeci
  4. Punkt czwarty
  5. Punkt piąty
  6. Punkt szósty

Zwróć uwagę, że w powyższym przykładzie symbole muszą być ujęte w cudzysłowy (albo apostrofy), ponieważ niestandardowy identyfikator nie może się rozpoczynać od cyfry.

System addytywny @counter-style {system: additive}

@counter-style typ {
	system: additive;
	additive-symbols: symbole-addytywne;
}
Symbole-addytywne to lista rozdzielona przecinkami, w której każdy element składa się z pary dwóch wartości oddzielonych od siebie dowolnymi białymi znakami (np. spacją):
  1. liczba naturalna (dodatnia liczba całkowita) - określa wagę symbolu, czyli jego przelicznik na system dziesiętny
  2. symbol - powinien być ujęty w znaki cudzysłowu ("...") albo apostrofy ('...'), chyba że spełnia format niestandardowego identyfikatora

Elementy na liście symbolów-addytywnych muszą być ustawione w kolejności malejącej wagi (przelicznika).

W systemie addytywnym liczby są tworzone poprzez dodawanie do siebie cyfr, z których się składają. Pewnym rodzajem takiego systemu są liczby rzymskie. Przypomnę, że istnieją następujące cyfry rzymskie: I (1), V (5), X (10), L (50), C (100), D (500), M (1000). Odczytując wartość liczby rzymskiej wykonujemy odpowiednie operacje arytemtyczne:

  • Jeżeli mniejsza cyfra stoi przed większą, odejmujemy ją od tej drugiej - np.: IV = 5 - 1 = 4
  • W przeciwnym razie dodajemy cyfry do siebie - np.: VII = 5 + 1 + 1 = 7

Deklaracja "system: additive" działa analogicznie jak liczby rzymskie, ale obsługuje tylko dodawanie, a nie odejmowanie.

Przykład @counter-style {system: additive}

Tak by wyglądały liczby rzymskie, gdyby wchodziły w skład systemu czysto addytywnego (zwróć uwagę, że liczba 4 nie jest poprawnym liczebnikiem rzymskim):

@counter-style nazwa {
	system: additive;
	additive-symbols: 1000 M, 500 D, 100 C, 50 L, 10 X, 5 V, 1 I;
}
ol {
	list-style-type: nazwa;
}
  1. Punkt pierwszy
  2. Punkt drugi
  3. Punkt trzeci
  4. Punkt czwarty
  5. Punkt piąty
  6. Punkt szósty

Ujemne numery wykazu @counter-style {negative}

@counter-style typ {
	negative: przedrostek;
	dodatkowe-deklaracje
}
lub
@counter-style typ {
	negative: przedrostek przyrostek;
	dodatkowe-deklaracje
}
Przedrostek i oddzielnie przyrostek powinien być ujęty w znaki cudzysłowu ("...") albo apostrofy ('...'), chyba że spełnia format niestandardowego identyfikatora. Spowodują one dopisanie podanych tekstów odpowiednio: przed i po właściwym symbolu wyróżnika wykazu - ale tylko w przypadku wartości ujemnej.

Punkty wykazu mogą przyjmować również wartości ujemne. Taki efekt można wywołać przy pomocy atrybutu start="..." albo value="..." [zobacz podpunkty: "Wykaz numerowany z podaniem początkowego numeru" oraz "Zmiana numerowania w trakcie" w rozdziale pt. HTML / Wykaz]. W takich przypadkach mamy możliwość zdefiniowania specjalnego wyglądu tego typu wartości.

Przykład @counter-style {negative}

Wyświetlenie znaku gwiazdki przed każdą wartością ujemną:

@counter-style nazwa {
	system: numeric;
	symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
	negative: "*";
}
ol {
	list-style-type: nazwa;
}
  1. Punkt pierwszy
  2. Punkt drugi
  3. Punkt trzeci
  4. Punkt czwarty
  5. Punkt piąty
  6. Punkt szósty

Ujęcie ujemnych wartości w nawias:

@counter-style nazwa {
	system: numeric;
	symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
	negative: "(-" ")";
}
ol {
	list-style-type: nazwa;
}
  1. Punkt pierwszy
  2. Punkt drugi
  3. Punkt trzeci
  4. Punkt czwarty
  5. Punkt piąty
  6. Punkt szósty

Przedrostek i przyrostek wykazu @counter-style {prefix, suffix}

@counter-style typ {
	prefix: przedrostek;
	dodatkowe-deklaracje
}
lub
@counter-style typ {
	suffix: przyrostek;
	dodatkowe-deklaracje
}
lub
@counter-style typ {
	prefix: przedrostek;
	suffix: przyrostek;
	dodatkowe-deklaracje
}
Przedrostek i przyrostek powinien być ujęty w znaki cudzysłowu ("...") albo apostrofy ('...'), chyba że spełnia format niestandardowego identyfikatora. Spowodują one dopisanie podanych tekstów odpowiednio: przed i po właściwym symbolu wyróżnika wykazu.

Standardowo przed symbolem wyróżnika wykazu nie znajduje się żaden dodatkowy tekst, natomiast po nim - znak kropki ze spacją. Czasami jednak możemy mieć potrzebę wyróżnienia punktów wykazu wizualnie w inny sposób. Na przykład często na końcu publikacji naukowych umieszcza się wykaz wszystkich źródeł, do których autor odnosił się w tekście. Źródła zazwyczaj oznacza się kolejnymi liczbami umieszczonymi w nawiasach kwadratowych. Dzięki funkcji ustalenia przedrostka i przyrostka możemy uzyskać taki sam efekt w języku CSS.

Przykład @counter-style {prefix, suffix}

@counter-style nazwa {
	system: numeric;
	symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
	prefix: "[";
	suffix: "] ";
}
ol {
	list-style-type: nazwa;
}
  1. Punkt pierwszy
  2. Punkt drugi
  3. Punkt trzeci
  4. Punkt czwarty
  5. Punkt piąty
  6. Punkt szósty

Wykaz z wyróżnikami w postaji ikon emoji:

@counter-style nazwa {
	system: cyclic;
	symbols: 👉;
	suffix: " ";
}
ul {
	list-style-type: nazwa;
}
  • Punkt pierwszy
  • Punkt drugi
  • Punkt trzeci
  • Punkt czwarty
  • Punkt piąty
  • Punkt szósty

Przedział numerów wykazu @counter-style {range}

@counter-style typ {
	range: przedział;
	dodatkowe-deklaracje
}
lub
@counter-style typ {
	range: przedział;
	fallback: typ-domyślny;
	dodatkowe-deklaracje
}
Przedział składa się z pary dwóch wartości oddzielonych od siebie dowolnymi białymi znakami (np. spacją), które określają zakres od-do (włącznie). Każda z wartości może być liczbą całkowitą albo słowem kluczowym infinity - co oznacza brak ograniczeń przedziału. Możliwe jest również podanie po przecinku kilku przedziałów jednocześnie.

Natomiast jako typ-domyślny można podać dowolny wbudowany typ stylu wykazu, a nawet nazwę zdefiniowanego przez nas innego niestandardowego typu.

Może się zdarzyć, że wykaz z bardzo dużą liczbą punktów nie będzie wyglądał zbyt estetycznie. W zależności od użytego systemu (algorytmu generowania sekwencji wyróżników) poszczególne punkty wykazu mogą zawierać nienaturalnie dużo symbolów albo będą nieczytelne bądź taka numeracja okaże się niezrozumiała. Możemy pośrednio zaradzić takiej sytuacji poprzez określenie przedziału wartości, które obejmuje definicja typu stylu wykazu. Jeśli na stronie pojawi się jednak lista z większą liczbą punktów, zostaną one podpisane przy pomocy typu-domyślnego albo kolejnymi liczbami arabskimi poczynając od wartości liczonej od pierwszego punktu wykazu.

Przykład @counter-style {range}

@counter-style nazwa {
	system: symbolic;
	symbols: "*";
	range: 1 3;
}
ol {
	list-style-type: nazwa;
}
  1. Punkt pierwszy
  2. Punkt drugi
  3. Punkt trzeci
  4. Punkt czwarty
  5. Punkt piąty
  6. Punkt szósty

Dopełnienie numerów wykazu @counter-style {pad}

@counter-style typ {
	pad: liczba symbol;
	dodatkowe-deklaracje
}
Liczba stanowi wartość naturalną (dodatnią liczbę całkowitą) i określa minimalną długość tekstu wyróżnika wykazu. Gdy tekst wyróżnika będzie zawierał mniej znaków, na jego początku zostanie dopisany odpowiednio powielony symbol dopełnienia.

Symbol jest znakiem, jakim zostaną dopełnione zbyt krótkie teksty wyróżników wykazu. Powinien być ujęty w cudzysłów ("...") albo apostrofy ('...'), chyba że spełnia format niestandardowego identyfikatora.

Przeglądarki zwykle wyświetlają wyróżniki wykazów w taki sposób, aby były wyrównane ze sobą do prawej strony. Chociaż wygląda to estetycznie, czasami możemy mieć potrzebę ułożenia wyróżników wykazu w inny sposób. Na przykład dosć często spotyka się dopełnianie liczb na początku zerami. Między innymi taki właśnie efekt pozwala nam uzyskać powyższa deklaracja.

Przykład @counter-style {pad}

@counter-style nazwa {
	system: numeric;
	symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
	pad: 2 "0";
}
ol {
	list-style-type: nazwa;
}
  1. Punkt pierwszy
  2. Punkt drugi
  3. Punkt trzeci
  4. Punkt czwarty
  5. Punkt piąty
  6. Punkt szósty

System rozszerzony @counter-style {system: extends}

@counter-style typ {
	system: extends typ-bazowy;
	dodatkowe-deklaracje
}
Jako typ-bazowy można podać dowolny wbudowany typ stylu wykazu, a nawet nazwę zdefiniowanego przez nas innego niestandardowego typu.

W przypadku systemu rozszerzonego dodatkowe-deklaracje nie mogą zawierać deskryptorów: symbols ani additive-symbols.

Definiowanie niestandardowego typu stylu wykazu od zupełnych podstaw może być dość żmudne. Można sobie ten proces jednak znacznie ułatwić. Wystarczy skorzystać z wcześniej zdefiniowanego lub wbudowanego typu i pozmieniać w nim tylko te deklaracje, które nam nie odpowiadają.

Przykład @counter-style {system: extends}

@counter-style nazwa {
	system: extends decimal;
	prefix: "[";
	suffix: "] ";
}
ol {
	list-style-type: nazwa;
}
  1. Punkt pierwszy
  2. Punkt drugi
  3. Punkt trzeci
  4. Punkt czwarty
  5. Punkt piąty
  6. Punkt szósty

Anonimowy typ stylu wykazu {list-style-type: symbols}

(CSS 3 - interpretuje Firefox 35)

selektor { list-style-type: symbols(symbole) }
lub
selektor { list-style-type: symbols(algorytm symbole) }
Selektorem mogą być znaczniki dotyczące wykazów: ul - wypunktowanie, ol - wykaz numerowany oraz li - pojedynczy punkt wykazu [zobacz: Wstawianie stylów].

W przypadku definiowania anonimowego typu stylu wykazu każdy element listy symbolów musi być zawsze ujęty w cudzysłowy ("...") albo apostrofy ('...') - nawet kiedy spełnia format niestandardowego identyfiaktora.

Dozwolone w tym przypadku algorytmy: cyclic, numeric, alphabetic, symbolic (domyślnie), fixed.

Reguła stylów @counter-style daje bardzo rozbudowane możliwości kontrolowania wyglądu wyróżników wykazu. Czasami jednak potrzebujemy tylko zupełnie podstawowych funkcji, a dodatkowo chcemy przypisać niestandardowy typ stylu tylko do jednego elementu. Właśnie w takiej sytuacji wygodniejsze może się okazać użycie funkcji symbols(...), którą przypisujemy bezpośrednio do własności list-style-type lub list-style.

Przykład {list-style-type: symbols}

ol {
	list-style-type: symbols(cyclic "a" "b" "c");
}
  1. Punkt pierwszy
  2. Punkt drugi
  3. Punkt trzeci
  4. Punkt czwarty
  5. Punkt piąty
  6. Punkt szósty

Zauważ, że w przypadku anonimowego typu stylu wykazu przyrostek stanowi tylko spacja, a nie kropka ze spacją - jak to ma miejsce przy używaniu pełnej reguły stylów @counter-style.

Zawijanie tekstu w wykazie {list-style-position}

Co zrobić, aby punkt wykazu (wyróżnik, marker) znajdował się wewnątrz tekstu?

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

Natomiast "pozycja" określa, jak będą zawijane wiersze wykazu, które nie zmieszczą się w jednej linii. Możliwe są tutaj dwa przypadki:
  1. outside - wyróżniki na zewnątrz wykazu (domyślnie).

    Przykład

    list-style-position: outside
    • Punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy.
    • Punkt drugi... punkt drugi... punkt drugi... punkt drugi... punkt drugi... punkt drugi... punkt drugi... punkt drugi... punkt drugi... punkt drugi... punkt drugi... punkt drugi... punkt drugi... punkt drugi... punkt drugi... punkt drugi.
    • Punkt trzeci... punkt trzeci... punkt trzeci... punkt trzeci... punkt trzeci... punkt trzeci... punkt trzeci... punkt trzeci... punkt trzeci... punkt trzeci... punkt trzeci... punkt trzeci.
  2. inside - wyróżniki wewnątrz wykazu.

    Przykład

    list-style-position: inside
    • Punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy.
    • Punkt drugi... punkt drugi... punkt drugi... punkt drugi... punkt drugi... punkt drugi... punkt drugi... punkt drugi... punkt drugi... punkt drugi... punkt drugi... punkt drugi... punkt drugi... punkt drugi... punkt drugi... punkt drugi.
    • Punkt trzeci... punkt trzeci... punkt trzeci... punkt trzeci... punkt trzeci... punkt trzeci... punkt trzeci... punkt trzeci... punkt trzeci... punkt trzeci... punkt trzeci... punkt trzeci.
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.

Wyróżnik obrazkowy wykazu {list-style-image}

Jak wstawić grafikę (obrazek) jak punkt wykazu (wyróżnik, marker)?

selektor { list-style-image: url(ścieżka dostępu) }
Selektorem mogą być znaczniki dotyczące wykazów: ul - wypunktowanie, ol - wykaz numerowany oraz li - pojedynczy punkt wykazu [zobacz: Wstawianie stylów].

Natomiast jako "ścieżka dostępu" należy wpisać względną ścieżkę do obrazka, który ma się pojawić jako wyróżnik wykazu (marker). Wpisanie none usunie obrazek.

Ścieżkę dostępu należy konstruować względem arkusza CSS, a nie względem dokumentu HTML!

Polecenie pozwala zastosować dowolny obrazek jako wyróżnik wykazu (czyli marker). Dzięki temu nie musimy korzystać już tylko z podstawowych typów wykazu, ale możemy stworzyć swoje własne. Sprawi to, że nasza strona będzie wyglądała bardziej oryginalnie i estetycznie.

Wspólnie z tą własnością można również podać dodatkowo typ stylu. W takim przypadku, jeśli obrazek będzie niedostępny lub użytkownik wyłączy wyświetlanie obrazów, wykaz przyjmie podany typ.

Przykład {list-style-image}

list-style-image: url(minus.gif)
  • Punkt pierwszy
  • Punkt drugi
  • Punkt trzeci

Atrybuty mieszane wykazu {list-style}

Jak ustalić kilka własności wyglądu wykazu w jednym poleceniu?

selektor { list-style: wartości atrybutów }
Selektorem mogą być znaczniki dotyczące wykazów: ul - wypunktowanie, ol - wykaz numerowany oraz li - pojedynczy punkt wykazu [zobacz: Wstawianie stylów].

Natomiast jako "wartości atrybutów" należy wpisać kolejne wartości (oddzielone spacjami), jakie mają przyjąć poszczególne atrybuty wykazu. Są to:

Tak jak przy wielu innych elementach, także i tutaj możliwe jest użycie atrybutów mieszanych. Jak zawsze zaoszczędzają one nam pisania. Zamiast wpisywać: list-style-type: disc; list-style-position: inside, wystarczy podać: list-style: disc inside. Nie ma wymogu, aby podawać w tej deklaracji pełną listę cech składowych, jednak jeśli jakąś opuścimy, zostanie jej przypisana wartość domyślna. Dlatego poniższa reguła stylów nie ustawi wyróżnika wewnątrz wykazu (inside), ponieważ nie zostało to określone w deklaracji list-style, która tutaj unieważnia list-style-position:

li { list-style-position: inside; list-style: disc }

Zgodnie z zasadą kaskadowości, oczekiwany skutek (zawijanie tekstu wokół wyróżnika) odniesiemy, podając deklaracje w odwrotnej kolejności:

li { list-style: disc; list-style-position: inside }

albo przenosząc wartość list-style-position (inside) do zbiorczej deklaracji list-style:

li { list-style: disc inside }

Przykład {list-style}

list-style: disc inside url(minus.gif)
  • Punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy...punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy...punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy.
  • Punkt drugi... punkt drugi... punkt drugi... punkt drugi... punkt drugi... punkt drugi... punkt drugi... punkt drugi... punkt drugi... punkt drugi... punkt drugi... punkt drugi.

Odstęp wyróżnika wykazu {marker-offset}

Jak można zmienić odstęp punktu wykazu (wyróżnika, markera) od tekstu? Co zrobić, aby wykaz z punktem w postaci grafiki wyglądał tak samo w każdej przeglądarce?

Odstęp wyróżnika wykazu {marker-offset}

(nieinterpretowane)

selektor { marker-offset: odstęp }
Selektorem może być element z ustalonym wyświetlaniem typu marker [zobacz: Wstawianie stylów].

Natomiast "odstęp" oznacza odległość wyróżnika wykazu (markera) od tekstu, znajdującego się w poszczególny punktach. Wartość odstępu należy podać używając jednostek długości.

Polecenie to pozwala nam w sposób jawny zdefiniować odstępy markerów od treści wykazu.

UWAGA! Polecenie wchodzi w skład CSS 2.0, ale nie CSS 2.1. Nie jest interpretowane!

Przykład {marker-offset}

li:before {
	display: marker;
	marker-offset: 3em;
}

Wyróżnik obrazkowy w tle

Istnieje jednak dość prosty, lecz być może nie tak oczywisty, sposób zastąpienia nieobsługiwanej własności marker-offset przez zespół reguł CSS interpretowanych praktycznie wszędzie:

ul, li {
	list-style-type: none;
	display: block;
	margin: 0;
	padding: 0;
}

ul li {
	background: url(marker.gif) no-repeat left top;
	padding-left: 20px;
}

Pierwsza z reguł stylów powyżej usuwa domyślne formatowanie wykazu oraz jego punktów. Trzeba tutaj nadmienić, że z uwagi na różnice w interpretacji nie wszystkie z wymienionych poleceń formatujących w tej deklaracji jest wymagana we wszystkich przeglądarkach, jednak tylko taki zestaw daje prawie pewność, że otrzymamy to, o co nam chodziło. Dlatego nie radzę niczego pomijać!

Druga reguła formatuje elementy li zawierające się wewnątrz znacznika ul w taki sposób, aby wyglądały jak zwyczajny wykaz. Jednak dodatkowo dostajemy możliwość wpływu na pozycję markera. Sztuczka polega na zastąpienia tradycyjnego wyróżnika wykazu specjalnie przygotowanych obrazkiem, który wstawiamy w tle elementów li. CSS daje możliwość określenia tła właściwie dla każdego elementu, a dodatkowo można ustalić, aby nie było ono powtarzane oraz określić dokładną jego pozycję. Na koniec pozostaje tylko wykonanie wolnej przestrzeni z lewej strony punktów wykazu, tak aby zmieściły się tam obrazki markerów - tutaj właśnie można określić dowolny interesujący nas odstęp pomiędzy wyróżnikami wykazu a treścią poszczególnych punktów.

Jeżeli chcemy dodatkowo ustalić margines z lewej strony wykazu, możemy to zrobić dodając deklarację margin-left do elementu ul (lub ewentualnie li). Analogicznie można dodać margines przed/po całym takim wykazem, oddzielający go od sąsiadującej treści, czy nawet odstępy pomiędzy poszczególnymi punktami wykazu.

Warto zauważyć, że ten sposób pozwala również dokładnie określić pionową pozycję markera, co przy wykorzystaniu tradycyjnych metod nie jest możliwe, a właśnie wtedy sprawia to największe problemy, gdyż różne przeglądarki ustawiają obrazkowe wyróżniki wykazów w odmienny sposób - kilka pikseli wyżej lub niżej niż w innych.

Przykład

  • Punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy.
  • Punkt drugi
  • Punkt trzeci

  • Punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy.
  • Punkt drugi
  • Punkt trzeci

  • Punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy.
  • Punkt drugi
  • Punkt trzeci

Automatyczna numeracja wykazu {counter-reset, counter-increment}

W jaki sposób stworzyć automatyczną numerację punktów i podpunktów w stylu: 1, 1.1, 1.1.1 itd.?

Automatyczna numeracja wykazu {counter-reset, counter-increment}

(interpretuje Internet Explorer 8.0, Firefox, Opera, Chrome, Konqueror)

Jeżeli zaznajomiłeś się już czytelniku bardziej szczegółowo z zagadnieniem wykazów w języku HTML, to zapewne wiesz już, że nie oferują one żadnych bardziej skomplikowanych sposobów numeracji poszczególnych punktów i podpunktów. To znaczy możliwe jest określenie np. następującego sposobu numeracji:

  • Punkty główne - liczby rzymskie: I, II, III,...
  • Podpunkty - liczby arabskie: 1, 2, 3,...
  • Podpunkty drugiego rzędu - litery: a, b, c,...

Co jednak zrobić, jeżeli nie odpowiada nam taki sposób numeracji punktów albo nie możemy z góry określić ile będziemy mieli poziomów zagnieżdżenia? CSS daje na to prostą receptę - automatyczną numerację, czyli możliwość dowolnego określania sposobu numerowania elementów, np.:

  • Punkty główne: 1., 2., 3.,...
  • Podpunkty: 1.1., 1.2., 1.3.,... 2.1., 2.2., 2.3.,... 3.1., 3.2., 3.3.,...
  • Podpunkty drugiego rzędu: 1.1.1., 1.1.2., 1.1.3.,... 1.2.1., 1.2.2., 1.2.3.,... 2.1.1., 2.1.2., 2.1.3.,... 2.2.1., 2.2.2., 2.2.3.,...
  • i tak dalej...

Automatyczna numeracja w CSS korzysta z tzw. liczników, które są podobne do zmiennych w językach programowania. Każdy licznik posiada swój unikalny identyfikator (nazwę), za pomocą którego można się do niego odnosić w arkuszu CSS. Dodatkowo każdy licznik przechowuje wartość, która jest liczbą określającą wartość licznika dla aktualnego punktu wykazu (1, 2, 3,...).

Zasada tworzenia automatycznej numeracji jest prosta:

  1. Najpierw określany nazwę licznika dla danego wykazu, od razu zerując go:
    ol { counter-reset: nazwa_licznika }
  2. Usuwamy domyślne numerowanie wykazu, aby nie kolidowało z automatycznym:
    ol li { list-style-type: none }
  3. Następnie dla kolejnych punktów i podpunktów wykazu wyświetlamy aktualną wartość licznika na początku treści, a następnie zwiększamy tą wartość o jeden - dla następnego punktu lub podpunktu:
    ol li:before { content: counters(nazwa_licznika, ".") ". "; counter-increment: nazwa_licznika }

Oto efekt:

  1. Punkt pierwszy (1.)
    1. Podpunkt pierwszy (1.1.)
      1. Podpunkt drugiego rzędu (1.1.1.)
      2. Podpunkt drugiego rzędu (1.1.2.)
    2. Podpunkt drugi (1.2.)
      1. Podpunkt drugiego rzędu (1.2.1.)
      2. Podpunkt drugiego rzędu (1.2.2.)
  2. Punkt drugi (2.)
    1. Podpunkt pierwszy (2.1.)
      1. Podpunkt drugiego rzędu (2.1.1.)
      2. Podpunkt drugiego rzędu (2.1.2.)
    2. Podpunkt drugi (2.2.)
      1. Podpunkt drugiego rzędu (2.2.1.)
      2. Podpunkt drugiego rzędu (2.2.2.)

Ponieważ przedstawiony powyżej wykaz jest wielokrotnie zagnieżdżony, więc znajduje się w nim kilka znaczników ol umieszczonych jeden wewnątrz drugiego. Dlatego właśnie polecenie ol { counter-reset: nazwa_licznika } tak naprawdę przy każdym znaczniku ol tworzy nowy egzemplarz tego licznika. Egzemplarze można oznaczać dla potrzeb analizy kolejnymi numerami (przyjmijmy numerację od zera): nazwa_licznika[0], nazwa_licznika[1], nazwa_licznika[2] itd. Każdy z egzemplarzy przechowuje osobną numerację (działają niezależnie od siebie), ale jednocześnie dla każdego z egzemplarzy tego samego licznika (czyli egzemplarzy z tą samą nazwą) można uzyskać aktualny stan wszystkich liczników nadrzędnych innych egzemplarzy. Realizuje się to za pomocą funkcji counters(), która przyjmuje dwa argumenty rozdzielone przecinkiem:

  1. identyfikator licznika (wspólna nazwa egzemplarzy),
  2. łańcuch znakowy separatora, który ma rozdzielać kolejne wartości egzemplarzy licznika.

Wartość odczytaną przez tę funkcję możemy następnie podstawić w deklaracji stylu do własności content, co spowoduje wyświetlenie jej w treści elementu:

ol li:before { content: counters(nazwa_licznika, ".") }

W świetle tego przebieg generowania automatycznej numeracji dla przedstawionego wcześniej wykazu odbywa się następująco:

<ol>	<!-- nazwa_licznika[0] = 0 -->
<li>1 (nazwa_licznika[0] + 1 = 1)
	<ol>	<!-- nazwa_licznika[1] = 0 -->
	<li>1.1 (nazwa_licznika[1] + 1 = 1)
		<ol>	<!-- nazwa_licznika[2] = 0 -->
		<li>1.1.1 (nazwa_licznika[2] + 1 = 1)</li>
		<li>1.1.2 (nazwa_licznika[2] + 1 = 2)</li>
		</ol>
	</li>
	<li>1.2 (nazwa_licznika[1] + 1 = 2)
		<ol>	<!-- nazwa_licznika[3] = 0 -->
		<li>1.2.1 (nazwa_licznika[3] + 1 = 1)</li>
		<li>1.2.2 (nazwa_licznika[3] + 1 = 2)</li>
		</ol>
	</li>
	</ol>
</li>
<li>2 (nazwa_licznika[0] + 1 = 2)
	<ol>	<!-- nazwa_licznika[4] = 0 -->
	<li>2.1 (nazwa_licznika[4] + 1 = 1)
		<ol>	<!-- nazwa_licznika[5] = 0 -->
		<li>2.1.1 (nazwa_licznika[5] + 1 = 1)</li>
		<li>2.1.2 (nazwa_licznika[5] + 1 = 2)</li>
		</ol>
	</li>
	<li>2.2 (nazwa_licznika[4] + 1 = 2)
		<ol>	<!-- nazwa_licznika[6] = 0 -->
		<li>2.2.1 (nazwa_licznika[6] + 1 = 1)</li>
		<li>2.2.2 (nazwa_licznika[6] + 1 = 2)</li>
		</ol>
	</li>
	</ol>
</li>
</ol>

Oprócz funkcji counters() istnieje również funkcja counter(), która działa bardzo podobnie, jednak przyjmuje jako argument jedynie nazwę identyfikatora licznika, a odczytuje tylko wartość aktualnego egzemplarza licznika, czyli pojedynczą liczbę. Użycie w powyższym przykładzie funkcji counter() zamiast counters(), spowodowałoby wyświetlenie wykazu numerowanego tradycyjnie:

  1. Punkt pierwszy (1.)
    1. Podpunkt pierwszy (1.)
      1. Podpunkt drugiego rzędu (1.)
      2. Podpunkt drugiego rzędu (2.)
    2. Podpunkt drugi (2.)
      1. Podpunkt drugiego rzędu (1.)
      2. Podpunkt drugiego rzędu (2.)
  2. Punkt drugi (2.)
    1. Podpunkt pierwszy (1.)
      1. Podpunkt drugiego rzędu (1.)
      2. Podpunkt drugiego rzędu (2.)
    2. Podpunkt drugi (2.)
      1. Podpunkt drugiego rzędu (1.)
      2. Podpunkt drugiego rzędu (2.)

Jeżeli w jednej deklaracji chcemy ustawić lub zwiększyć więcej niż jeden licznik, nie należy wstawiać kilka razy tej samej własności counter-reset czy counter-increment, lecz umieścić kilka identyfikatorów liczników w tej samej wartości, rozdzielonych spacjami:

ol { counter-reset: licznik1 licznik2 }
ol li { counter-increment: licznik1 licznik2 }

Ponadto warto odnotować, że counter-reset wcale nie musi ustawiać licznika na zero, a counter-increment wcale nie musi zwiększać licznika tylko o jeden. Licznik może być nawet zmniejszany, poprzez podanie wartości ujemnej (numeracja w tył):

ol { counter-reset: licznik 3 }
ol li { list-style-type: none }
ol li:before { content: counters(licznik, ".") ". "; counter-increment: licznik -1 }
  1. Punkt drugi (2.)
    1. Podpunkt drugi (2.2.)
      1. Podpunkt drugiego rzędu (2.2.2.)
      2. Podpunkt drugiego rzędu (2.2.1.)
    2. Podpunkt pierwszy (2.1.)
      1. Podpunkt drugiego rzędu (2.1.2.)
      2. Podpunkt drugiego rzędu (2.1.1.)
  2. Punkt pierwszy (1.)
    1. Podpunkt drugi (1.2.)
      1. Podpunkt drugiego rzędu (1.2.2.)
      2. Podpunkt drugiego rzędu (1.2.1.)
    2. Podpunkt pierwszy (1.1.)
      1. Podpunkt drugiego rzędu (1.1.2.)
      2. Podpunkt drugiego rzędu (1.1.1.)

Zatem ogólna postać wartości counter-reset i counter-increment jest następująca: lista identyfikatorów liczników rozdzielonych spacjami, przy których po każdym z nich może opcjonalnie wystąpić liczba oddzielona od swojego (poprzedzającego) identyfikatora licznika również spacją:

ol { counter-reset: licznik1 licznik2 3 }
ol li { counter-increment: licznik1 licznik2 -1 }

Automatyczną numerację można wykorzystać nie tylko do wykazów, ale również np. do tytułów:

body { counter-reset: h1 }
h1 { counter-reset: h2 }
h1:before { content: counter(h1) ". "; counter-increment: h1 }
h2 { counter-reset: h3 }
h2:before { content: counter(h1) "." counter(h2) ". "; counter-increment: h2 }
h3 { counter-reset: h4 }
h3:before { content: counter(h1) "." counter(h2) "." counter(h3) ". "; counter-increment: h3 }
h4 { counter-reset: h5 }
h4:before { content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "; counter-increment: h4 }
h5 { counter-reset: h6 }
h5:before { content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "; counter-increment: h5 }
h6:before { content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "; counter-increment: h6 }

Powyższe reguły stylów będą funkcjonowały prawidłowo tylko w przypadku poprawnego semantycznie kodu, tzn. każdy element h2 powinien być poprzedzony przez h1, h3 - przez h2, h4 - przez h3, h5 - przez h4, h6 - przez h5.

Style licznika

Domyślnie liczniki automatycznej numeracji mają postać liczb arabskich. Możliwe jest jednak przypisanie dowolnego innego stylu stosowanego dla wykazów:

ol { counter-reset: upper_alpha }
ol li { list-style-type: none }
ol li:before { content: counters(upper_alpha, ".", upper-alpha) ") "; counter-increment: upper_alpha }
  1. Punkt pierwszy (A)
    1. Podpunkt pierwszy (A.A)
      1. Podpunkt drugiego rzędu (A.A.A)
      2. Podpunkt drugiego rzędu (A.A.B)
    2. Podpunkt drugi (A.B)
      1. Podpunkt drugiego rzędu (A.B.A)
      2. Podpunkt drugiego rzędu (A.B.B)
  2. Punkt drugi (B)
    1. Podpunkt pierwszy (B.A)
      1. Podpunkt drugiego rzędu (B.A.A)
      2. Podpunkt drugiego rzędu (B.A.B)
    2. Podpunkt drugi (B.B)
      1. Podpunkt drugiego rzędu (B.B.A)
      2. Podpunkt drugiego rzędu (B.B.B)

Numeracja typu: I.i.1.A.a.α., I.i.1.a.β.,... I.i.1.A.b.α., I.i.1.A.b.β.,... I.i.1.B.b.α., I.i.1.B.b.β.,... I.i.2.B.b.α., I.i.2.B.b.β.,... I.ii.2.B.b.α., I.ii.2.B.b.β.,... II.ii.2.B.b.α., II.ii.2.B.b.β.,...

body { counter-reset: h1 }
h1 { counter-reset: h2 }
h1:before { content: counter(h1, upper-roman) ". "; counter-increment: h1 }
h2 { counter-reset: h3 }
h2:before { content: counter(h1, upper-roman) "." counter(h2, lower-roman) ". "; counter-increment: h2 }
h3 { counter-reset: h4 }
h3:before { content: counter(h1, upper-roman) "." counter(h2, lower-roman) "." counter(h3, decimal) ". "; counter-increment: h3 }
h4 { counter-reset: h5 }
h4:before { content: counter(h1, upper-roman) "." counter(h2, lower-roman) "." counter(h3, decimal) "." counter(h4, upper-alpha) ". "; counter-increment: h4 }
h5 { counter-reset: h6 }
h5:before { content: counter(h1, upper-roman) "." counter(h2, lower-roman) "." counter(h3, decimal) "." counter(h4, upper-alpha) "." counter(h5, lower-alpha) ". "; counter-increment: h5 }
h6:before { content: counter(h1, upper-roman) "." counter(h2, lower-roman) "." counter(h3, decimal) "." counter(h4, upper-alpha) "." counter(h5, lower-alpha) "." counter(h6, lower-greek) ". "; counter-increment: h6 }

Firefox, Chrome i Konqueror obsługują również style typu: disc (koło), circle (okrąg) i square (kwadrat).

Powtórka

Sprawdź, czy pamiętasz, za co odpowiadają poniższe fragmenty kodu źródłowego CSS. W razie wątpliwości kliknij odnośnik "Zobacz więcej..." pod wybraną grupą przykładów.

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 }

Zobacz więcej...

W jaki sposób stworzyć własny, niestandardowy rodzaj (typ, styl) wykazu? Jak zrobić listę z punktami w postaci emotikon (emoji)?

@counter-style typ {
	system: algorytm;
	dodatkowe-deklaracje
}
@counter-style typ {
	system: cyclic;
	symbols: symbole;
}
@counter-style typ {
	system: fixed;
	symbols: symbole;
}
@counter-style typ {
	system: fixed;
	symbols: symbole;
	fallback: typ-domyślny;
}
@counter-style typ {
	system: symbolic;
	symbols: symbole;
}
@counter-style typ {
	system: alphabetic;
	symbols: symbole;
}
@counter-style typ {
	system: numeric;
	symbols: symbole;
}
@counter-style typ {
	system: additive;
	additive-symbols: symbole-addytywne;
}
@counter-style typ {
	negative: przedrostek;
	dodatkowe-deklaracje
}
@counter-style typ {
	negative: przedrostek przyrostek;
	dodatkowe-deklaracje
}
@counter-style typ {
	prefix: przedrostek;
	dodatkowe-deklaracje
}
@counter-style typ {
	suffix: przyrostek;
	dodatkowe-deklaracje
}
@counter-style typ {
	prefix: przedrostek;
	suffix: przyrostek;
	dodatkowe-deklaracje
}
@counter-style typ {
	range: przedział;
	dodatkowe-deklaracje
}
@counter-style typ {
	range: przedział;
	fallback: typ-domyślny;
	dodatkowe-deklaracje
}
@counter-style typ {
	pad: liczba symbol;
	dodatkowe-deklaracje
}
@counter-style typ {
	system: extends typ-bazowy;
	dodatkowe-deklaracje
}
selektor { list-style-type: symbols(symbole) }
selektor { list-style-type: symbols(algorytm symbole) }

Zobacz więcej...

Co zrobić, aby punkt wykazu (wyróżnik, marker) znajdował się wewnątrz tekstu?

selektor { list-style-position: pozycja }

Zobacz więcej...

Jak wstawić grafikę (obrazek) jak punkt wykazu (wyróżnik, marker)?

selektor { list-style-image: url(ścieżka dostępu) }

Zobacz więcej...

Jak ustalić kilka własności wyglądu wykazu w jednym poleceniu?

selektor { list-style: wartości atrybutów }

Zobacz więcej...

Jak można zmienić odstęp punktu wykazu (wyróżnika, markera) od tekstu? Co zrobić, aby wykaz z punktem w postaci grafiki wyglądał tak samo w każdej przeglądarce?

selektor { marker-offset: odstęp }

Zobacz więcej...

Facebook