Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
Zawartość generowana

Przyrost licznika

Email Drukuj PDF

Tematy: generowanie treści | 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.:

h1:before {
counter-increment: naglowek1;
content: "Rozdział " counter(naglowek1) ": " }

Dodatkowo możemy określić styl licznika, wpisując obok nazwy licznika upper-roman, lower-alpha, decimal-leading-zero itd:

h1:before {
counter-increment: naglowek1;
content: "Rozdział " counter(naglowek1, upper-roman) ": " }

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.

  • W podanej wyżej definicji wykorzystujemy pseudoelement :before przy elemencie h1 - w ten sposób licznik bedzie generowany PRZED tym elementem.
  • Polecenie counter-increment określa nazwę licznika, którego wartość będzie automatycznie zwiększana, w naszym wypadku "naglowek1".
  • Content zawiera natomiast ciągi znaków ukazujące się przed nagłówkami stopnia 1, czyli stałą "Rozdział", kod licznika counter(naglowek1) oraz stałą ": ". Połączenie tych elementów zawartości spowoduje wygenerowanie całej zawartoś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:

<h1>Wstęp</h1>
<p>...</p>
<h1>Historia HTML</h1>
<p>...</p>
<h1>Współczesne standardy</h1>

I żywy efekt:

Wstęp

...

Historia HTML

...

Współczesne standardy

...

Przykład użycia do numerowania ilustracji (Internet Explorer nie obsługuje).

W części nagłówkowej:

p.obrazki:before {
counter-increment: obrazki;
content: "Ilustracja " counter(obrazki) ": " }

W ciele dokumentu:

<p class="obrazki">Magazyn Amiga
<img src="../grafika/ami.gif">
<p class="obrazki">Magazyn Gambler
<img src="../grafika/gambler.gif">

I efekt:

Magazyn Amiga

Magazyn Gambler

Przykład użycia do numerowania punktów wykazu.

W części nagłówkowej:

li:before {
counter-increment: lista;
content: "Punkt " counter(lista) ": " }

W ciele dokumentu:

<ul style="list-style-type:none"><strong>Do kupienia:</strong>
<li>Marchewka</li>
<li>Pietruszka</li>
<li>Kalafior</li>

I efekt:

    Do kupienia:
  • Marchewka
  • Pietruszka
  • Kalafior

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: Internet Explorer 8, Opera, Firefox, Chrome

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V