Bài 37: Counters – Bộ đếm trong CSS



counters
Bộ đếm CSS là “biến” được duy trì bởi CSS mà giá trị của nó 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 hình thức của 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 bộ đếm CSS , chúng ta sẽ sử dụng các thuộc tính sau:

  • counter-reset – Tạo bộ đếm hoặc đặt lại bộ đếm
  • counter-increment – Tăng lên giá trị bộ đếm
  • content – Chèn nội dung đã tạo
  • counter() hoặc hàm counters() – Thêm giá trị của bộ đếm tới một phần tử

Sử dụng bộ đếm CSS, nó phải được tạo đầu tiên với counter-reset.
Trong ví dụ này tạo bộ đếm với trang (trong thân bộ chọn), sau khi tăng giá trị bộ đếm cho mỗi phần tử <h2> và thêm nội dung “Section <value of the counter>:”  đến đầu của mỗi phần tử <h2>:


body {
counter-reset: section;
}

h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}

Bộ đếm lồng nhau

Trong ví dụ này 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 section sẽ đếm mỗi phần tử <h1> với nội dung “Section .” và bộ đếm “subsection” sẽ đếm mỗi phần tử <h2> với nội dung “<value of the section counter>.<value of the subsection counter>”:


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 để tạo danh sách được phác thảo bởi vì một phiên bản mới của bộ đếm được tự động tạo 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:


ol {
  counter-reset: section;
  list-style-type: none;
}

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

Tổng hợp thuộc tính bộ đếm CSS

Thuộc tính Mô tả ví dụ
content Sử dụng với ::before và ::after pseudo-elements, để chèn nội dung đã tạo
counter-increment Tăng một hoặc nhiều hơn giá trị bộ đếm
counter-reset Tạo hoặc đặt lại một hoặc nhiều bộ đếm

Có thể bạn sẽ thích…

Trả lời

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 *

EnglishVietnamese