CSS function counters
Опис
Функція counters() в CSS використовується для створення лічильника з вкладеними значеннями (ієрархічним лічильником), який можна використовувати для нумерації елементів в документі з урахуванням їхньої вкладеності. Ця функція дозволяє створювати більш складні нумераційні схеми, де значення лічильників залежать від структури елементів на сторінці.
Функція counters() використовується разом з властивістю counter-reset, яка визначає початкове значення лічильників, та властивістю content, яка визначає спосіб відображення значення лічильників. Особливістю функції counters() є можливість вкладення значень лічильників за допомогою розділювача.
Ось короткий приклад використання функції counters():
body {
counter-reset: section;
}
h1::before {
content: counters(section, ".") " ";
counter-increment: section;
}
h2::before {
content: counters(section, ".") " ";
counter-increment: section;
}
У цьому прикладі ми використовуємо функцію counters() для створення ієрархічного лічильника для заголовків h1 і h2. Кожен заголовок буде мати власну нумерацію, враховуючи вкладеність. Значення лічильника обнуляється за допомогою counter-reset, а потім збільшується за допомогою counter-increment. Функція counters() використовується в content для відображення значення лічильника.
- Порада
-
Використовуйте унікальні імена лічильників для відображення різних значень в різних контекстах.
автор: Bond - Порада
-
Експериментуйте з різними стилями форматування, щоб створювати власний вигляд лічильників.
автор: Bond - Порада
-
Для використання функції
автор: Bondcounters()потрібно встановити значення лічильника за допомогою властивостіcounter-resetабо змінити значення лічильника засобами CSS-селекторів та псевдокласів. - Порада
-
Значення лічильника можуть бути змінними або фіксованими числами, залежно від використання
автор: Bondcounter-resetта CSS-селекторів. - Нотатка
-
Використання функції
автор: Bondcounters()дозволяє вам створювати ієрархічну нумерацію елементів з урахуванням їхньої вкладеності. Ви можете використовувати цю функцію для створення складних нумераційних схем, таких як нумерація розділів і підрозділів, списків з підпунктами тощо.
Синтаксис
counters(<name>, <style>, <counter-reset>);Функція counters може отримувати 3 значень:
-
<name> -
Рядок або комбінація рядків, що представляють ім'я лічильника або лічильників, розділених комами.
автор: Bond -
<style> -
Рядок, що представляє стиль форматування лічильника. Деякі приклади:
автор: Bonddecimal,lower-roman,upper-alphaі т.д. -
<counter-reset> -
Число або ідентифікатор лічильника, що встановлює початкове значення лічильника.
автор: Bond
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1.5 | 3 | 10 | 12 | 8 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Використання функції counters() для створення списків.
Використання функції counters() для створення списків.
Коментарі
Коментарів ще немає — будьте першим!