Contoare CSS sunt folosite pentru a adăuga numărări elementelor. Numărul este adăugat prin furnizarea variabile care poate fi inițializat (folosind counter-reset), iar aceste variabile pot fi apoi incrementate de regulile CSS.

Mulți dezvoltatori trec cu vederea această caracteristică CSS puternică și de aceea vom trece mai departe despre cum să lucrăm cu contoare în acest tutorial.

Când se utilizează contoare CSS

Contoare CSS pot fi utilizate ori de câte ori aveți nevoie de un sistem de numărare pe pagina dvs. web. Unele dintre cele mai bune cazuri de utilizare sunt:

  • Numerotarea listelor complexe
  • Creați legături de paginare dinamică
  • Etape de numerotare într-un sistem de îmbarcare.

În acest tutorial, vom vorbi despre cum să utilizați contoare CSS pentru realizează liste complexe și creați paginare dinamică.

Cum se utilizează contoare CSS

Sistemul de numărare CSS este format din counter-reset, counter-increment, counter() și counters() și content proprietăți. Aceste proprietăți se ocupă de tot ce trebuie să faceți în sistemul de numărare CSS.

Să ne uităm mai atent la aceste proprietăți, astfel încât să înțelegem cum pot fi utilizate.

Proprietățile contorului explicate

  • counter-reset: Folosit pentru resetați sau inițializați tejgheaua ta. Pentru a utiliza contoare CSS trebuie mai întâi să creați unul cu această proprietate.
  • counter-increment: Folosit pentru creştere variabila unui deja initializat tejghea.
  • counter(): Această funcție face magia. Este folosit în interiorul proprietății de conținut, pe un :before sau :after pseudo-selector, to aduna contele.
  • counters(): Folosit pentru numărarea moștenită și generează instanța unui contor părinte variabil la copil.
  • content: Folosit pentru aduna numaratoarea valoare (șiruri) prin manipularea conținutului pentru :before și :after selectoare css.

Acum, că înțelegem aceste proprietăți și valori ale contorului CSS, să trecem la exemplele noastre.

Elemente de numerotare pe o pagină web

Numerotarea se poate face în HTML, dar numerotarea CSS oferă modalități dinamice și ușor de controlat de a face treaba folosind contoare CSS. Următorul exemplu va numera elementele de pe pagina web cu CSS.

În primul rând, vom configura o numerotare simplă care face doar numerotarea la un nivel. Apoi vom trece la un exemplu mai avansat în care vom configura un cuprins.

Numerotare simplă

În acest exemplu, vom crea un contor de articole simplu cu CSS. În codul HTML, creați structura articolelor astfel:

<div>
  <p>Mercury</p>
  <p>Venus</p>
  <p>Earth</p>
</div>

În CSS vom face trei lucruri cheie:

  1. Inițializați contorul pe divul părinte folosind counter-reset
  2. Măriți valoarea contorului cu 1 la copil div p folosind counter-increment
  3. Adăugați variabilele contorului înainte de div p conținut utilizând :before pseudo-selector.

Sa mergem!

div {
  list-style-type: none;
  counter-reset: css-counter 0; /* initializes counter to 0; use -1 for zero-based numbering */
}

div p {
  counter-increment: css-counter 1; /* Increase the counter by 1. */
}

div p:before {
  content: counter(css-counter) ". "; /* Apply counter before children's content. */
}

Rezultatul

Cum se numeroteaza automat elementele cu contoare CSS

Numerotarea de mai sus a fost făcută cu CSS pur. Interesant, nu?

Acum vom implementa o numerotare mai complexă care face ca contoare CSS să merite învățate. Vom numerota elementele imbricate cu counters() funcție, care poate fi utilizată pentru numărarea moștenită. Acest lucru generează instanța unui contor părinte la copil.

Cuprins Numerotare

<ul>
  <li>
    Web Development
    <ul>
      <li>HTML</li>
      <li>
        CSS
        <ul>
          <li>CSS Introduction</li>
          <li>CSS Selectors</li>
          <li>CSS Animation</li>
        </ul>
      </li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Graphics Design</li>
  <li>Computer Education</li>
</ul>

CSS arată astfel:

ul {
  list-style-type: none;
  counter-reset: css-counters 0; /* intializes counter, set -1 for zero-based counters */
}

ul li:before {
  counter-increment: css-counters;
  content: counters(css-counters, ".") " "; /* generates inherited counters from parents */
}

Rezultatul

1612134607 474 Cum se numeroteaza automat elementele cu contoare CSS

Acum puteți vedea puterea numărării cuiburilor counters(). Acest lucru vă scutește de dificultățile cuiburilor necorespunzătoare. Pentru a vă ajuta să evitați greșelile, acesta moștenește proprietățile contorului părinților și adaugă contorul copilului la acesta.

Deci, acum că suntem buni cu elemente de numerotare, ce urmează?

Realizarea paginării dinamice

Efectuarea paginării cu contoare CSS este destul de simplă. Paginarea se face de obicei cu HTML, repetând același set de elemente și schimbând numerele din interior pentru a crea navigarea către fiecare pagină a unui rezultat.

Un dezvoltator poate alege să utilizeze ceva dinamic, cum ar fi crearea de bucle care generează elementele sau să o facă de pe server. Dar astăzi vom folosi CSS pentru a face acest lucru dinamic!

Cum? Cu seniorul nostru counters() funcţie.

În același mod în care ne-am mărit valorile pentru numerotarea de mai sus, putem face și o listă de paginare dinamică cu contoare CSS (ați ghicit-o).

Să începem:

<ul>
  <li class="previous">&lt;</li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li class="next">&gt;</li>
</ul>

Notă: Nu este nevoie să adăugați numere în interiorul li, și poți face câte vrei. CSS-ul nostru counters() vor face numerotarea pentru noi.

CSS arată astfel:

ul {
  list-style-type: none;
  counter-reset: paginate-counter 0;
}

ul li {
  border: solid 3px #ccc;
  color: #36f;
  border: 5px;
  float: left;
  margin: 5px;
  padding: 8px 10px;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
}

/* Setting styles for the inner text */
ul li:not(.previous):not(.next):before {
  counter-increment: paginate-counter;
  content: counter(paginate-counter);
}

Rezultatul

1612134608 133 Cum se numeroteaza automat elementele cu contoare CSS

Ce altceva poți face cu ghișeele? Lasă-mă să aud ideile tale.

Mulțumiri!