Μετρητής CSS

Pizza

Hamburger

Hotdogs

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

Οι καταμετρητές σας επιτρέπουν να προσαρμόσετε την εμφάνισή τους ανάλογα με τη θέση τους στο έγγραφο.

Αυτόματη αριθμοθέτηση με καταμετρητές

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

Για να χρησιμοποιήσετε τους CSS καταμετρητές, θα χρησιμοποιήσουμε τις παρακάτω ιδιότητες:

  • counter-reset - δημιουργήστε ή επαναφέρετε τον καταμετρητή
  • counter-increment - αυξήστε την τιμή του καταμετρητή
  • content - εισάγετε το δημιουργημένο περιεχόμενο
  • counter() ή counters() λειτουργία - προσθέστε την τιμή του καταμετρητή στο στοιχείο

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

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

παράδειγμα

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

Προσπάθησε να το δοκιμάσεις

Ενσωματωμένοι καταμετρητές

Το παρακάτω παράδειγμα δημιουργεί έναν καταμετρητή για την σελίδα (section) και έναν καταμετρητή για κάθε <h1> στοιχείο (subsection).

"section" καταμετρήσεις μετράνε για κάθε <h1> στοιχείο, γράφοντας παράλληλα "Section" και την τιμή της καταμέτρησης section, "subsection" καταμετρήσεις μετράνε για κάθε <h2> στοιχείο, γράφοντας παράλληλα την τιμή της καταμέτρησης section και την τιμή της καταμέτρησης subsection:

παράδειγμα

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

Προσπάθησε να το δοκιμάσεις

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

παράδειγμα

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

Προσπάθησε να το δοκιμάσεις

Παράμετρος Υπολογιστή CSS

Παράμετρος Περιγραφή
content Χρήση με τα ψευδοεлементά ::before και ::after για την εισαγωγή δημιουργημένου περιεχομένου.
counter-increment Αύξηση ενός ή περισσότερων τιμών μετρητών.
counter-reset Δημιουργία ή Επαναφορά ενός ή περισσότερων μετρητών.