CSS 2 - Counter-reset

 

[ A ]  [ B ]  [ C ]  [ D ]  [ E ]  [ F ]  [ H ]  [ L ]  [ M ]  [ O ]  [ P ]  [ Q ]  [ R ]  [ S ]  [ T ]  [ V ]  [ W ]  [ Z ]

counter-reset

    

Wartości:

  • none (wartość domyślna) - brak zmiany wartości licznika;
  • identyfikator liczba - identyfikator licznika i wartość jego zmiany;
  • inherit - przejęcie wartości "rodzica".

 

Zastosowanie.

Przykład:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
   <meta http-equiv="content-type"   content="text/html; charset=iso-8859-2">
   <title>Pierwszy dokument</title>
   <style TYPE="text/css">
      H1:before {content: "Rozdział " counter(rozdzial) ". ";
      counter-increment: rozdzial;counter-reset: sekcja;}
      H2:before {content: counter(rozdzial) "." counter(sekcja) " ";
      counter-increment: sekcja;}
   </style>
</head>
<body>
   <h1>Tytuł pierwszego rozdziału</h1>
   <h2>Podrozdział pierwszy</h2>
   <h2>Podrozdział drugi</h2>
   <h1>Tytuł drugiego rozdziału</h1>
   <h2>Podrozdział pierwszy</h2>
   <h2>Podrozdział drugi</h2>
</body>
</html>

Efekt:

[testuj]

 

[ A ]  [ B ]  [ C ]  [ D ]  [ E ]  [ F ]  [ H ]  [ L ]  [ M ]  [ O ]  [ P ]  [ Q ]  [ R ]  [ S ]  [ T ]  [ V ]  [ W ]  [ Z ]