CSS Counter

21/05/2019

Bài sau » « Bài trước

CSS Counter giống như một "biến (variables)". Giá trị của biến này được tính theo rule của CSS (Dựa theo số lần mà nó được sử dụng ).

Để làm việc với CSS Counter thì bạn phải biết các thuộc tính sau:

  • counter-reset - Khởi tạo hoặc reset bộ đếm
  • counter-increment - Tăng giá trị biến đếm
  • content - Chèn thêm nội dung
  • counter() or counters() function - Thêm giá trị của biến đếm vào phần tử.

Để sử dụng CSS Counter, đầu tiên phải khởi tạo với counter-reset

Ví dụ bên dưới đếm thẻ <p> và in ra phía trước dòng chữ: Bài <số biến đếm>

body { counter-reset: dem-p; /* giá trị dem-p khi này là 0. */ /* tên biến đếm 'dem-p' bạn tự đặt, dùng để phân biệt nếu có nhiều biến đếm*/ } p::before { counter-increment: dem-p; /* Mỗi lần đếm giá trị tăng lên 1. */ content: "Bài " counter(dem-p) ": "; /* In giá trị 'Bài '+ giá trị đếm ra trước mỗi thẻ p*/ }

Code HTML:

<body> <h2>Ví dụ sử dụng CSS Counters:</h2> <p>Giới thiệu CSS</p> <p>CSS Color</p> <p>CSS Background</p> <span><b>Chú ý:</b> IE8 chỉ hỗ trợ thuộc tính này nếu có khai báo !DOCTYPE.</span> </body>

Kết quả hiển thị:

Ví dụ sử dụng CSS Counters:

Giới thiệu CSS

CSS Color

CSS Background

Counter lồng nhau

Ta có thể lồng bộ đếm với nhau. Thường hay áp dụng cho menu đa cấp. Cùng xem ví dụ đếm menu dưới đây nhé.

ul { counter-reset: dem-li; } li::before { counter-increment: dem-li; content: counters(dem-li,".") " - "; }

Chú ý: Ở đây ta dùng hàm counters() để chèn string ( dấu chấm . ) vào giữa các biến đếm lồng nhau.

Code HTML menu:

<ul class="menu-3cap" > <li><a href="#" >Trang chủ</a> </li> <li> <a href="#" >Sản phẩm</a> <ul class="menu-sub" > <li><a href="#" >Sản phẩm A</a> </li> <li> <a href="#" >Sản phẩm B</a> <ul class="menu-sub" > <li><a href="#" >Sản phẩm B - 1</a> </li> <li><a href="#" >Sản phẩm B - 2</a> </li> <li><a href="#" >Sản phẩm B - 3</a> </li> <li><a href="#" >Sản phẩm B - 4</a> </li> </ul> </li> <li><a href="#" >Sản phẩm C</a> </li> <li><a href="#" >Sản phẩm D</a> </li> </ul> </li> <li> <a href="#" >Về chúng tôi</a> <ul class="menu-sub" > <li><a href="#" >Lịch sử hình thành</a> </li> <li><a href="#" >Mục tiêu và sứ mệnh</a> </li> <li><a href="#" >Đối tác</a> </li> </ul> </li> <li><a href="#" >Chính sách</a> </li> <li><a href="#" >Liên hệ</a> </li> </ul> <ul class="menu-3cap" > <li><a href="#" >Item li của menu khác</a> </li> <li><a href="#" >Item li của menu khác</a> </li> </ul>

Kết quả hiển thị:

Yeah, vậy là bài hướng dẫn về CSS Counter đến đây là kết thúc. Chúc các bạn thực hành thành công.

Bài sau » « Bài trước
Back to top