Autor publikacji: Virtual Patriot - Administrator

counter-increment

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

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

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

Za pomocą właściwości counter-increment możemy określić w jaki sposób interesujący nas element HTML powinien mieć wpływ na wartość posiadaną przez wskazany przez nas licznik.

Informacje dodatkowe: brak

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

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-increment`

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

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

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

none

Wyjaśnienie

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

Domyślnie żaden element HTML nie ma wpływu na wartość posiadaną przez jakikolwiek licznik.

Przykład

  counter-increment:none;

przykładowy element "div"

Żaden z przykładowych elementów HTML nie ma wpływu na wartość posiadaną przez licznik o nazwie "licznik-1".

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;
        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-increment oraz z góry zdefiniowanego wzorca wartości możemy określić w jaki sposób interesujący nas element HTML powinien mieć wpływ na wartość posiadaną przez wskazany przez nas licznik.

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

            name change

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-increment. Składnik name określa nazwę licznika, którego wartość chcemy zmienić.

change

Składnik change nie jest wymaganym składnikiem wzorca wartości właściwości counter-increment. Składnik change określa o jaką wartość powinna zmienić się wartość posiadana przez interesujący nas licznik.

Dostępne wartości: dowolna liczba całkowita
Wartości dodatnie: wartości dodatnie zwiększają wartość posiadaną przez licznik
Wartości ujemne: wartości ujemne zmniejszają wartość posiadaną przez licznik
Wartość domyślna: 1

Przykład

  counter-increment:licznik-1 2;

przykładowy element "div"

Każdy z przykładowych elementów "div" zwiększa wartość posiadaną przez licznik o nazwie "licznik-1" o wartość równą wartości "2", ponieważ do każdego ze wspomnianych elementów "div" została dodana właściwość "counter-increment" wraz z następującymi wartościami: "licznik-1 2".

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;
        margin:0;
        padding-left:1em;
        border-left:2px solid black;
        font-size:1.2em;
      }

      figure > div {
        counter-increment:licznik-1 2;
      }

      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>