Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
Wykazy

Reset licznika

Email Drukuj PDF

Tematy: generowanie treści | przyrost licznika | reset licznika | cudzysłowy

Dane w pigułce
Zastosowanie reset licznika elementów
Dziedziczenie nie
Wartości nazwa licznika
Wartość domyślna n.d.
Przykład counter-increment: naglowek1; counter-reset: naglowek2; content: "Rozdział " counter(naglowek1) ": "
Uwagi
Odpowiednik w HTML n.d.

Aby zdefiniować reset licznika, należy wpisać w definicji stylu counter-reset: nazwa_licznika

Polecenie counter-reset pozwala wyzerować (zresetować) numerację wskazanych elementy, np. numerów podrozdziałów. Polecenie przydaje się np. wtedy, gdy tworzymy hierarchię nagłówków (tytułów) różnych stopni i chcemy numerować podrozdziały od początku, niezależnie od numeracji rozdziałów wyższego szczebla w hierarchii, np. Rozdział 1, podrozdział 1, podrozdział 2, Rozdział 2, podrozdział 1, podrozdział 2 itd. Porównaj counter-increment. Gdyby nie zastosowano polecenia counter-reset, numeracja byłaby ciągła, niezależnie od stopnia śródtytułu, co byłoby niezbyt logiczne.

W części nagłówkowej należy zatem podać przykładową definicję licznika, np.:

body {counter-reset: naglowek1;}

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

h1 {counter-reset: naglowek2;}

h2:before {
counter-increment: naglowek2;
content: "Sekcja " counter(naglowek2) ": " }

h2 {counter-reset: naglowek3;}
  • Polecenie body {counter-reset: naglowek1;} zeruje licznik nagłówka stopnia 1 na poziomie ciała dokumentu.
  • Polecenie counter-increment określa nazwę licznika, którego wartość będzie automatycznie zwiększana, w naszym wypadku "naglowek1" i "naglowek2".
  • Polecenie counter-reset mówi, jaki licznik powinien być zresetowany, gdy zmieni się śródtytuł wyższego stopnia - w tym wypadku zerowany jest "naglowek2", gdy zmieni się numer śródtytułu stopnia 1 - gdy przejdziemy do następnego rozdziału, wydzielonego śródtytułem 1 stopnia, liczenie numerów podrozdziałów rozpocznie się od początku. Zwróć też uwagę, że przy h2 przygotowany jest też reset licznika "naglowek3", gdybyśmy mieli wprowadzić śródtytuły trzeciego stopnia.
  • Content zawiera natomiast ciągi znaków ukazujące się przed śródtytułami stopnia 1 i 2, czyli stałą "Rozdział" (dla h1) względnie "Sekcja" (dla h2), kod licznika counter(naglowek1) lub counter(naglowek2) oraz stałą ": ". Połączenie tych elementów zawartości spowoduje wygenerowanie całej zawartości.

Nawiasem mówiąc, liczniki można kombinować, np. tworząc definicję content: "Sekcja " counter(naglowek1) "." counter(naglowek2) ": " . Spowoduje to, że na poziomie drugim będzie wyświetlany licznik zawierający numer rozdziału i kolejny numer sekcji, np. Sekcja 2.1, Sekcja 2.2, Sekcja 2.3 itd.

Przykład użycia:

<h1>Wstęp</h1>
<p>...</p>
<h1>Historia HTML</h1>
<h2>Tim Berners-Lee</h2>
<p>...</p>
<h2>Pierwsza specyfikacja</h2>
<p>...</p>
<h1>Współczesne standardy</h1>
<h2>Język HTML 4.01</h2>
<p>...</p>
<h2>Język CSS</h2>
<p>...</p>
<h2>Język XHTML</h2>
<p>...</p>

I żywy przykład działania:

Wstęp

...

Historia HTML

Tim Berners-Lee

...

Pierwsza specyfikacja

...

Współczesne standardy

Język HTML 4.01

...

Język CSS

...

Język XHTML

...

Resetowanie liczników może się przydać przy podejmowaniu na nowo numeracji jakichś elementów, np. punktów wykazu, gdy wyliczanie jest nieciągłe. Zauważ, że w wykazach uporządkowanych, czyli numerowanych, w HTML 4.01 Strict nie ma już atrybutu start=x, który pozwalał podejmować numerację od liczby podanej w tym atrybucie, np. start=8. Można uzyskać tę funkcjonalność właśnie za pomocą liczników.

Gdybyśmy wyliczali jakieś elementy wykazu, ale musieli go przerwać innymi elementami, np. akapitami z tekstem, wprowadzenie po akapicie kolejnej definicji wykazu spowoduje, że punkty wykazu będą liczone od nowa. Gdy jednak w miejsce naturalnego wyliczania użyjemy licznika, możemy się posłużyć resetem licznika do wskazanej wartości, która będzie po prostu kolejnym numerem całej listy, bez względu na fakt jej przerwania.

Najpierw zobaczmy, jaki jest skutek przerwanie wyliczania bez użycia licznika.

Kod:

<ol>
<li>pierwszy punkt<li>
<li>drugi punkt<li>
<li>trzeci punkt<li>
</ol>

<p>Jakiś akapit, który przerywa ciągłość</p>

<ol>
<li>czwarty punkt<li>
<li>piąty punkt<li>
<li>szósty punkt<li>
</ol>

Efekt:

  1. pierwszy punkt
  2. drugi punkt
  3. trzeci punkt

Jakiś akapit, który przerywa ciągłość

  1. czwarty punkt
  2. piąty punkt
  3. szósty punkt

Jak widzisz, numeracja została wznowiona, a nie podjęta od ostatniego numeru.

Gdy wprowadzimy w części nagłówkowej strony definicję licznika, wraz z wyzerowaniem, np.

body {counter-reset: lista;}
li:before {
counter-increment: lista;
content: counter(lista) ". "
}

a następnie wprowadzimy reset licznika do zadanej wielkości w drugim wykazie (podając numer poprzedniego punktu wykazu):

<ol style="list-style-type:none; ">
<li style="counter-reset: lista 3; ">czwarty punkt<li>
<li>piąty punkt<li>
<li>szósty punkt<li>

uzyskany efekt będzie poprawny.

  1. pierwszy punkt
  2. drugi punkt
  3. trzeci punkt

Jakiś akapit, który przerywa ciągłość

  1. czwarty punkt
  2. piąty punkt
  3. szósty punkt

Zauważ jeszcze, że dodatkowo usuwamy naturalne liczniki wykazów, za pomocą list-style-type: none; , aby nie było podwójnej numeracji.

W chwili obecnej praktycznym problemem takiego wykorzystywania liczników jest brak ich obsługi przez przeglądarkę Internet Explorer, wskutek czego większość użytkowników nie byłaby w stanie dostrzec numeracji.


Interpretacja: Internet Explorer 8, Opera, Firefox, Chrome

 

HTML5. Rusz głową.

HTML5. Rusz głową!

HTML5. Ćwiczenia praktyczne.

HTML5. Ćwiczenia praktyczne.

HTML5. Nieoficjalny podręcznik.

HTML5. Nieoficjalny podręcznik

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15578059