Counter - Bộ đếm trong CSS

Thanh Huyen

Counter - Bộ đếm trong CSS được dùng để đánh số đối tượng nhằm biểu thị hệ thống phân cấp thông tin trên website, giúp hiển thị thông tin một cách rõ ràng và dễ hiểu cho người đọc. Đây là một tính năng khá hữu ích, nhưng chưa được nhiều người biết đến của 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. 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 trong CSS, chúng ta sẽ 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.
Hàm counter() hoặc counters() - Thêm giá trị bộ đếm vào thành phần.

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

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

body {
  counter-reset: section;
}

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

Code đầy đủ:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  counter-reset: section;
  color: white;
  background-color: #58257b
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
</style>
</head>
<body>

<h3>Ví dụ sử dụng Counter - Bộ đếm CSS:</h3>
<h1>Website Quản Trị Mạng</h1>
<h2>Làng Công nghệ</h2>
<h2>Công nghệ</h2>
<h2>Khoa học</h2>

</body>
</html>

Bộ đếm lồng nhau

Ví dụ sau tạo một bộ đếm cho trang (phần chính - section) và một bộ đếm cho mỗi phần tử <h2> (phần phụ - subsection). Bộ đếm section sẽ được tính cho mỗi phần tử <h2> với nội dung "Section <value of the section counter>", và bộ đếm subsection sẽ được tính cho mỗi phần tử <h3> với nội dung "<value of the section counter>.<value of the subsection counter>":

body {
  counter-reset: section;
}

h2 {
  counter-reset: subsection;
}

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

h3::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

Code đầy đủ:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  counter-reset: section;
  color: white;
  background-color: #58257b
}

h2 {
  counter-reset: subsection;
}

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

h3::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>

<h1>Website Quản Trị Mạng</h1>

<h2>Chuyên mục Làng Công nghệ</h2>
<h3>Chuyện công nghệ</h3>
<h3>Tấn công mạng</h3>

<h2>Chuyên mục Công nghệ</h2>
<h3>Lập trình</h3>
<h3>Hệ thống</h3>

<h2>Chuyên mục Khoa học</h2>
<h3>Bí ẩn - Chuyện lạ</h3>
<h3>Khám phá thiên nhiên</h3>

</body>
</html>

Ngoài ra, bạn có thể sử dụng bộ đếm trong CSS để tạo ra các danh sách, tính năng cũng hữu ích và phù hợp, có thể tự động đánh số thứ tự danh sách như bạn mong muốn.

Ví dụ bạn tạo danh sách có bộ đếm như sau, sử dụng thêm hàm counters() để phân cấp bộ đếm lồng nhau:

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

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

Code đầy đủ:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: white;
  background-color: #58257b;
  font-family: Arial;
  font-size: 18px
}

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

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}
</style>
</head>
<body>

<ol>
  <li>Làng Công nghệ</li>
  <li>Công nghệ
    <ol>
      <li>Hệ thống</li>
      <li>Ứng dụng</li>
      <li>Lập trình
        <ol>
          <li>CSS và CSS3</li>
          <li>Python</li>
          <li>SQL Server</li>
        </ol>
      </li>
      <li>Game - Trò chơi</li>
    </ol>
  </li>
  <li>Khoa học</li>
  <li>Cuộc sống</li>
</ol>

<ol>
  <li>Giới thiệu Quantrimang.com</li>
  <li>Liên hệ với Quản Trị Mạng</li>
</ol>

</body>
</html>

Bài trước: Form - Biểu mẫu trong CSS

Bài tiếp: Thiết kế Layout - Bố cục website trong CSS

Thứ Bảy, 20/04/2019 10:01

4,7 ★ 7 👨 3.898

#CSS

Bạn nên đọc

Xác thực tài khoản!

Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:

Số điện thoại chưa đúng định dạng!