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

3670 lượt xem
Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). 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 Giuseart.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 :

 

5/5 - (3 bình chọn)
Chia sẻ bài viết:

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!

Thẻ tìm kiếm:

Bài viết mới cập nhật:

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *