Bộ đếm trong CSS là gì ?

by Lê Thạch

Chào các bạn, hôm nay chúng ta lại gặp nhau trong một loạt bài hướng dẫn dùng CSS cơ bản của lethach.com. Trong bài viết này mình sẽ giúp các bạn hiểu được bộ đếm trong CSS là gì và nó hoạt động như thế nào ? Hãy cùng theo dõi kỹ bài viết này nhé !

Bộ đếm CSS là “các biến” được duy trì bởi CSS có các giá trị có thể được tăng lên bởi các quy tắc CSS (để theo dõi số lần chúng được sử dụng). Bộ đếm cho phép bạn điều chỉnh giao diện nội dung dựa trên vị trí của nó trong tài liệu.

Tự Động Đánh Số Với Bộ Đếm

Bộ đếm CSS giống như “biến”. Các giá trị biến có thể được tăng lên bởi các quy tắc CSS (sẽ theo dõi số lần chúng được sử dụng).

Để làm việc với các bộ đếm CSS, chúng ta sẽ sử dụng các thuộc tính sau:

  • counter-reset – Tạo hoặc đặt lại bộ đếm
  • counter-increment – Tăng giá trị bộ đếm
  • content – Chèn nội dung được tạo
  • Hàm counter() hoặc counters() – Thêm giá trị của bộ đếm vào một phần tử

Để sử dụng bộ đếm CSS, trước tiên nó phải được tạo bằng counter-reset.

Ví dụ sau tạo bộ đếm cho trang, sau đó tăng giá trị bộ đếm cho mỗi phần tử <h2> và thêm “Phần <giá trị của bộ đếm >:” vào đầu mỗi phần tử <h2>:

Ví dụ

Ví dụ sau tạo một bộ đếm cho trang (phần chính) và một bộ đếm cho mỗi phần tử <h1> (phần phụ). Bộ đếm “phần chính” sẽ được tính cho mỗi phần tử <h1> với “< giá trị của bộ đếm phần chính >“, và bộ đếm “phần phụ ” sẽ được tính cho mỗi phần tử <h2> với “< giá trị của bộ đếm phần chính >.< giá trị của bộ đếm phụ >” :

Một bộ đếm cũng có thể hữu ích để tạo ra các danh sách bởi vì một cá thể mới của bộ đếm được tự động tạo ra trong các phần tử con. Ở đây chúng ta sử dụng hàm counters() để chèn một chuỗi giữa các mức khác nhau của các bộ đếm lồng nhau :

Bài viết liên quan

Thêm bình luận