Jak korzystać z Counters w CSS3

By /

CSS

Counters w CSS3 to potężne narzędzie, które umożliwia automatyczne numerowanie elementów HTML, takich jak rozdziały, sekcje czy listy. Jest to szczególnie przydatne w dokumentach o dużej objętości, gdzie ręczne aktualizowanie numerów może być czasochłonne i podatne na błędy.

Przykład wykorzystania Counters w CSS3

Poniżej znajdziesz prosty przykład, który pokazuje, jak możesz użyć Counters w CSS3 do automatycznego numerowania sekcji w dokumencie.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład wykorzystania Counters w CSS3</title>
    <style>
        body {
            counter-reset: sectionCounter; /* Inicjalizacja licznika */
        }

        section {
            counter-increment: sectionCounter; /* Zwiększenie wartości licznika dla każdej sekcji */
            margin-bottom: 20px;
        }

        section::before {
            content: "Sekcja " counter(sectionCounter) ". "; /* Wstawienie numeru sekcji przed jej treścią */
            font-weight: bold;
        }
    </style>
</head>
<body>

<section>Sekcja dotycząca wprowadzenia</section>
<section>Sekcja dotycząca głównej treści</section>
<section>Sekcja dotycząca podsumowania</section>

</body>
</html>

Jak to działa

  • counter-reset: sectionCounter; inicjalizuje licznik o nazwie sectionCounter na początku dokumentu (w tym przypadku na elemencie <body>). To przygotowuje środowisko do zastosowania liczników w dokumencie.
  • counter-increment: sectionCounter; jest dodawany do każdego elementu <section>, który ma być numerowany. Każde wystąpienie tego elementu zwiększa wartość licznika sectionCounter o jeden.
  • section::before { content: "Sekcja " counter(sectionCounter) ". "; } dodaje do treści każdego elementu <section> tekst “Sekcja ” z aktualną wartością licznika, co umożliwia automatyczne numerowanie sekcji.

Podsumowanie

Counters w CSS3 oferują prosty i efektywny sposób na automatyczne numerowanie elementów na stronie, co jest szczególnie przydatne w dłuższych dokumentach. Dzięki łatwej integracji z HTML, Counters pozwalają na utrzymanie porządku i spójności bez konieczności ręcznego aktualizowania numerów, co oszczędza czas i zmniejsza ryzyko błędów. Wykorzystanie tej funkcjonalności CSS3 może znacząco poprawić zarządzanie treścią i prezentację informacji na stronach internetowych.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video Fullstack w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top