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 Ninh Bình Web. 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ì? Hoạt động của nó 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. Nó có các giá trị có thể được tăng lên bởi các quy tắc CSS. 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ộ đếmcounter-increment– Tăng giá trị bộ đếmcontent– Chèn nội dung được tạo- Hàm
counter()hoặccounters()– 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>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <style> body { counter-reset: section; } h2::before { counter-increment: section; content: "Section " counter(section) ": "; } </style> </head> <body> <h1>Sử dụng bô đếm CSS</h1> <h2>Hướng dẫn HTML</h2> <h2>Hướng dẫn CSSl</h2> <h2>Hướng dẫn JavaScript </h2> </body> </html> |
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ụ >” :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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) " "; } |
Một bộ đếm cũng có thể hữu ích. Nó 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 :
|
1 2 3 4 5 6 7 8 9 |
ol { counter-reset: section; list-style-type: none; } li::before { counter-increment: section; content: counters(section,".") " "; } |
