mozilla
Wyniki wyszukiwania

    Liczniki CSS

     

    Podsumowanie

    Liczniki w CSS zostały opisane w sekcji Automatic counters and numbering dokumentacji CSS 2.1. Wartość licznika jest ustawiana poprzez użycie własności counter-reset oraz counter-increment, natomiast wyświetlana jest przy wykorzystaniu funkcji counter() lub counters() należących do własności content.

    Zastosowanie liczników

    Aby użyć licznika CSS, należy najpierw ustawić mu wartość (domyślnie jest to 0) przy pomocy własności reset. Aby wyświetlić wartość licznika w danym elemencie należy skorzystać z funkcji counter(). Poniższy przykład dodaje na początku każdego elementu h1 "Sekcja wartość licznika:".

      body {
        counter-reset: sekcja;           /* Ustawienie licznika sekcja na 0 */
      }
      h1::before {
        counter-increment: sekcja;               /* Zwiększa licznik sekcja */
        content: "Sekcja " counter(sekcja) ": ";       /* Wyświetla licznik */
      }
    

    Zagnieżdżanie liczników

    Liczniki CSS mogą być szczególnie użyteczne przy listach uporządkowanych (ol), ponieważ nowa instancja licznika CSS jest automatycznie tworzona dla potomków danego elementu. Użycie funkcji counters() pozwala na dodanie ciągu znaków, który będzie oddzielał kolejne poziomy zagnieżdżonych liczników:

      ol {
        counter-reset: sekcja;                /* Tworzy nową instancję licznika
                                                 sekcja w każdym elemencie ol */
        list-style-type: none;                /* Usuwa domyślnie wyświetlany licznik */
      }
      li::before {
        counter-increment: sekcja;            /* Zwiększa tylko tę instancję
                                                 licznika sekcja */
        content: counters(sekcja, ".") " ";   /* Wyświetla wartości wszystkich
                                                 instancji licznika sekcja,
                                                 oddzielając je ciągiem ".". */
      }
    

    Przykładowy HTML (w komentarzach podano wartość wygenerowanego licznika):

    <ol>
      <li>item</li>          <!-- 1     -->
      <li>item               <!-- 2     -->
        <ol>
          <li>item</li>      <!-- 2.1   -->
          <li>item</li>      <!-- 2.2   -->
          <li>item           <!-- 2.3   -->
            <ol>
              <li>item</li>  <!-- 2.3.1 -->
              <li>item</li>  <!-- 2.3.2 -->
            </ol>
            <ol>
              <li>item</li>  <!-- 2.3.1 -->
              <li>item</li>  <!-- 2.3.2 -->
              <li>item</li>  <!-- 2.3.3 -->
            </ol>
          </li>
          <li>item</li>      <!-- 2.4   -->
        </ol>
      </li>
      <li>item</li>          <!-- 3     -->
      <li>item</li>          <!-- 4     -->
    </ol>
    <ol>
      <li>item</li>          <!-- 1     -->
      <li>item</li>          <!-- 2     -->
    </ol>
    

    Zobacz także

    potrzebna treść do artykułu

    Autorzy i etykiety dokumentu

    Etykiety: 
    Contributors to this page: PablO, Ptak82, Kuzirashi, teoli, Mgjbot
    Ostatnia aktualizacja: Kuzirashi,