CSS 30 – Thuộc tính Counter trong CSS

0
88

Để hiển thị dạng chỉ mục số có phân cấp như trong phần mục lục của một cuốn sách, bạn có thể sử dụng thuộc tính counter-increment để thực hiện mục đích này. Ở đây, counter được gia tăng thêm 1 (hoặc tùy vào bạn thiết lập) mỗi khi phần tử đã chọn xuất hiện. Giá trị mặc định cho sự tăng thêm này (ý nghĩa của từ increment trong tên thuộc tính) là 1.

CSS Counter là gì?

CSS counter giống như biến trong lập trình. Giá trị của biến tăng theo quy luật của CSS.

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

  • counter-reset : Tạo Counter hoặc Reset lại counter
  • counter-increment: Tăng giá trị counter
  • content : Chèn nội dung vào counter
  • counter() or counters() function : Thêm giá trị của counter vào thành phần.

Để sử dụng CSS counter, trước tiên phải tạo biến couter-reset.

Các dạng Counter trong CSS

Counter tăng số tự động

Ví dụ: Tạo trang web có counter, tăng giá trị của counter cho thẻ <p> và chèn thêm nội dung “Phần <value of the counter>:”

Code HTML:

Code CSS:

Kết quả:

Nesting Counters

Counter phân cấp

Để hiển thị dạng chỉ mục số có phân cấp như trong phần mục lục của một cuốn sách. Ta dùng một counter gọi là Nesting Counters

VD:

Code HTML:

Code CSS:

Kết quả:

Hàm counters() – Counter phân cấp chia mức

Chúng ta sử dụng các hàm counters () để chèn một chuỗi giữa các mức khác nhau của các lồng nhau. Ví dụ như sau:

Kết luận

Như vậy mình đã hướng dẫn các bạn xong phần Bộ đếm Counters trong CSS, đây là bộ thuộc tính sẽ giúp các bạn áp dụng làm các phần mục lục, chia phần bài viết chặt chẽ và khoa học hơn.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây