[Tự học CSS]– Bộ đếm trong CSS là gì ?

[Tự học CSS]– Bộ đếm trong CSS là gì ?

Mẹo nhỏ: Để tìm kiếm chính xác các mẫu web đẹp của Ninh Bình Web, hãy search trên Google với cú pháp: "Từ khóa" + "ninhbinhweb". (Ví dụ: mẫu web bất động sản ninhbinhweb). Tìm kiếm ngay

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ộ đế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. 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 :

 

Rate this post

Thông báo chính thức: Ninh Bình Web (thuộc GiuseArt) không hợp tác với bất kỳ ai để bán giao diện Wordpress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebookzalo chính thức.

Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!