Autor publikacji
Virtual Patriot - Administrator

counter-reset

Data publikacji
Ostatnio edytowano

Opis 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

Dodatkowe techniczne informacje 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

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 8

Edge

tak

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

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

none

Opis

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"
przykładowy element "div"
przykładowy element "div"
przykładowy element "div"
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

Opis

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

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"
przykładowy element "div"
przykładowy element "div"
przykładowy element "div"
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>