Μετρητές CSS

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Pizza

Hamburger

Hotdogs

Οι μετρητές CSS είναι "μεταβλητές" που διατηρούνται από το CSS των οποίων οι τιμές μπορούν να αυξηθούν με κανόνες CSS (για να παρακολουθείτε πόσες φορές χρησιμοποιούνται). Οι μετρητές σάς επιτρέπουν να προσαρμόσετε την εμφάνιση του περιεχομένου με βάση την τοποθέτησή του στο έγγραφο.

Αυτόματη αρίθμηση με μετρητές

Οι μετρητές CSS είναι σαν "μεταβλητές". Οι τιμές των μεταβλητών μπορούν να αυξηθούν με κανόνες CSS (οι οποίοι θα παρακολουθούν πόσες φορές χρησιμοποιούνται).

Για να εργαστούμε με μετρητές CSS θα χρησιμοποιήσουμε τις ακόλουθες ιδιότητες:

counter-reset

- Δημιουργεί ή επαναφέρει έναν μετρητή

counter-increment

- Αυξάνει μια μετρητή τιμή

content

- Εισάγει περιεχόμενο που δημιουργείται

counter() or counters() function

- Προσθέτει την τιμή ενός μετρητή σε ένα στοιχείο

Για να χρησιμοποιήσετε έναν μετρητή CSS, πρέπει πρώτα να δημιουργηθεί με counter-reset.

Το παρακάτω παράδειγμα δημιουργεί έναν μετρητή για τη σελίδα (στον επιλογέα σώματος), στη συνέχεια αυξάνει την τιμή του μετρητή για κάθε στοιχείο <h2> και προσθέτει την "Ενότητα τιμή του μετρητή:" στην αρχή κάθε στοιχείου <h2>:

Παράδειγμα

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
</style>
</head>
<body>

<h1>Using CSS Counters</h1>

<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>Python Tutorial</h2>
<h2>SQL Tutorial</h2>

</body>
</html>

Πάγκοι ένθεσης

Το ακόλουθο παράδειγμα δημιουργεί έναν μετρητή για τη σελίδα (ενότητα) και έναν μετρητή για κάθε στοιχείο <h1> (υποενότητα). Ο μετρητής "section" θα μετρηθεί για κάθε στοιχείο <h1> με "Section τιμή του μετρητή ενότητας." και ο μετρητής "subsection" θα μετρηθεί για κάθε στοιχείο <h2> με "<τιμή του μετρητή ενότητας.τιμή του μετρητή υποενότητας":

Παράδειγμα

body {
  counter-reset: section;
}
h1 {
  
counter-reset: subsection;
}
h1::before {
  counter-increment: 
section;
  content: "Section " counter(section) ". ";
}
h2::before {
  
counter-increment: subsection;
  content: 
counter(section) "." counter(subsection) " ";
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  counter-reset: section;
}

h1 {
  counter-reset: subsection;
}

h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>


<h1>HTML/CSS Tutorials</h1>
<h2>HTML</h2>
<h2>CSS</h2>
<h2>Bootstrap</h2>
<h2>W3.CSS</h2>

<h1>Scripting Tutorials</h1>
<h2>JavaScript</h2>
<h2>jQuery</h2>
<h2>React</h2>

<h1>Programming Tutorials</h1>
<h2>Python</h2>
<h2>Java</h2>
<h2>C++</h2>

</body>
</html>

Ένας μετρητής μπορεί επίσης να είναι χρήσιμος για τη δημιουργία περιγραμμένων λιστών επειδή ένα νέο Το παράδειγμα ενός μετρητή δημιουργείται αυτόματα σε θυγατρικά στοιχεία. Εδώ χρησιμοποιούμε το Συνάρτηση counters() για την εισαγωγή μιας συμβολοσειράς μεταξύ διαφορετικών επιπέδων ένθετων μετρητές:

Παράδειγμα

ol {
  counter-reset: section;
  
list-style-type: none;
}

li::before {
  counter-increment: section;
  
content: counters(section,".") " ";
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}
</style>
</head>
<body>

<ol>
  <li>item</li>
  <li>item   
  <ol>
    <li>item</li>
    <li>item</li>
    <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
    </li>
    <li>item</li>
  </ol>
  </li>
  <li>item</li>
  <li>item</li>
</ol>

<ol>
  <li>item</li>
  <li>item</li>
</ol>

</body>
</html>

Ιδιότητες μετρητή CSS

content

Χρησιμοποιείται με τα ψευδοστοιχεία ::before και ::after, για την εισαγωγή περιεχομένου που δημιουργείται

counter-increment

Αυξάνει μία ή περισσότερες τιμές μετρητή

counter-reset

Δημιουργεί ή επαναφέρει έναν ή περισσότερους μετρητές

counter()

Επιστρέφει την τρέχουσα τιμή του μετρητή με όνομα