Autor publikacji: Virtual Patriot - Administrator

counter-reset

Data publikacji: Sierpień 15 2012
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - counter-reset property (LV3)

Przeznaczenie właściwości `counter-reset`

Za pomocą właściwości counter-reset możemy określić licznik, jaki powinien zostać przypisany do interesującego nas elementu HTML.

Informacje dodatkowe: brak

Informacje techniczne o właściwości `counter-reset`

przeznaczenie: element HTML każdego typu
pozycja: dowolna
dziedziczenie: nie
wartość initial: none
wyjątki initial: brak
animowanie: tak (animacja schodkowa)

Interpretacja właściwości `counter-reset`

: tak
: tak
: tak
: tak
: tak, lecz od wersji 8
: tak

Zobacz więcej informacji o interpretacji właściwości counter-reset.

Opis wartości właściwości `counter-reset`

none

Wyjaśnienie

Wartość none jest domyślną wartością właściwości counter-reset.

Domyślnie do elementu HTML nie jest przypisany żaden konkretny licznik.

Przykład

  counter-reset:none;

przykładowy element "div"

Do żadnego z przykładowych elementów HTML nie został przypisany żaden konkretny licznik.

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      figure {
        margin:0;
        padding-left:1em;
        border-left:2px solid black;
        font-size:1.2em;
      }

      figure > div::before {
        content:counter(licznik-1) ' - ';
        color:blue;
      }
    </style>
  </head>

  <body>

    <figure>
      <div>przykładowy element "div"</div>
      <div>przykładowy element "div"</div>
      <div>przykładowy element "div"</div>
      <div>przykładowy element "div"</div>
      <div>przykładowy element "div"</div>
    </figure>

  </body>
</html>

wzorzec wartości

Wyjaśnienie

Za pomocą właściwości counter-reset oraz z góry zdefiniowanego wzorca wartości możemy określić licznik, jaki powinien zostać przypisany do interesującego nas elementu HTML.

Składniki wzorca wartości właściwości `counter-reset`

            name start

Przykładowe zapisy

licznik-1

licznik-1 4

licznik-1 -2

licznik-1 4 licznik-2 -2

licznik-1 licznik-2

licznik-1 licznik-2 3

name

Składnik name jest wymaganym składnikiem wzorca wartości właściwości counter-reset. Składnik name określa nazwę licznika, który chcemy przypisać do interesującego nas elementu HTML.

start

Składnik start nie jest wymaganym składnikiem wzorca wartości właściwości counter-reset. Składnik start określa wartość startową jaką powinien posiadać licznik, który chcemy przypisać do interesującego nas elementu HTML.

Przykład

  counter-reset:licznik-1 5;

przykładowy element "div"

Do przykładowego elementu "figure" został przypisany licznik posiadający nazwę "licznik-1" oraz posiadający wartość startową równą wartości "5", ponieważ do wspomnianego elementu "figure" została dodana właściwość "counter-reset" wraz z następującymi wartościami: "licznik-1 5".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      figure {
        counter-reset:licznik-1 5;
        margin:0;
        padding-left:1em;
        border-left:2px solid black;
        font-size:1.2em;
      }

      figure > div::before {
        content:counter(licznik-1) ' - ';
        color:blue;
      }
    </style>
  </head>

  <body>

    <figure>
      <div>przykładowy element "div"</div>
      <div>przykładowy element "div"</div>
      <div>przykładowy element "div"</div>
      <div>przykładowy element "div"</div>
      <div>przykładowy element "div"</div>
    </figure>

  </body>
</html>