Tematy: zawartość | przyrost licznika | reset licznika | cudzysłowy
Dane w pigułce | |
Zastosowanie | automatyczne generowanie licznika elementów |
Dziedziczenie | nie |
Wartości | nazwa licznika |
Wartość domyślna | n.d. |
Przykład | counter-increment: naglowek1; content: "Rozdział " counter(naglowek1) ": " } |
Uwagi | |
Odpowiednik w HTML | brak |
Aby zdefiniować przyrost licznika, należy wpisać w definicji stylu counter-increment: nazwa_licznika
Polecenie counter-increment pozwala, we współpracy z content, automatycznie numerować wskazane elementy, np. numery rozdziałów, kolejne punkty wykazu (listy), akapity itd.
Uwaga: przed wprowadzeniem licznika konieczne jest wyzerowanie go (zresetowanie) na poziomie ciała dokumentu, za pomocą polecenia stylu w części nagłówkowej dokumentu:
body {counter-reset: nazwa_licznika; }
Jest to wymagane, aby licznik działał poprawnie w Firefoksie, aczkolwiek Opera nie wymaga takiego przygotowania licznika. Internet Explorer 6 i 7 w ogóle nie obsługują liczników.
Jeśli w danym dokumencie jest więcej liczników, można je wyzerować "hurtem", podając nazwy rozdzielone spacjami, np:
body {counter-reset: licznik_tytulow licznik_wykazow licznik_akapitow licznik_ilustracji; }.
O zerowaniu liczników przeczytasz więcej w rozdziale Reset licznika
Przyjrzyjmy sie, jak można automatycznie zliczać śródtytuły. W części nagłówkowej należy podać definicję licznika (zakładamy, że został już uprzednio wyzerowany), np.:
Dodatkowo możemy określić styl licznika, wpisując obok nazwy licznika upper-roman, lower-alpha, decimal-leading-zero itd:
Gdy podamy dodatkowo jakąś liczbę, np. counter-increment: licznik 2;, licznik będzie liczony co 2, poczynając od numeru 2 (lub od aktualnej wartości licznika). Gdy podamy liczbę ujemną, np. counter-increment: licznik -1;, licznik będzie zmniejszany o 1 od bieżącej wartości.
Uwaga: gdybyśmy chcieli numerować tylko niektóre elementy spośród wielu innych (np. niektóre śródtytuły) , konieczne byłoby wykorzystanie klas - zamiast h1:before moglibyśmy np. napisać h1.zliczane_naglowki:before.
Przykład użycia do numerowania śródtytułów (Internet Explorer nie obsługuje):
I żywy efekt:
...
...
...
Przykład użycia do numerowania ilustracji (Internet Explorer nie obsługuje).
W części nagłówkowej:
W ciele dokumentu:
I efekt:
Magazyn Amiga
Magazyn Gambler
Przykład użycia do numerowania punktów wykazu (Internet Explorer nie obsługuje).
W części nagłówkowej:
W ciele dokumentu:
I efekt:
Zwróć uwagę, że w definicji wykazu został podany styl wykazu list-style-type:none. Gdyby nie to, licznikowi towarzyszyłby jeszcze niepotrzebny tutaj naturalny punktor wykazu.
Interpretacja: Opera, Firefox