×

Cách sử dụng counter-reset - Đặt lại bộ đếm danh sách trong CSS

Avatar of admin
admin 0 Views

Trong thiết kế web hiện đại, định dạng danh sách là một phần không thể thiếu của stylesheet (CSS). CSS cho phép chúng ta tùy chỉnh các thành phần và các bộ đếm trong danh sách để thể hiện một cách chuyên nghiệp và đẹp mắt hơn. Để làm điều này, thuộc tính counter-reset trong CSS là một công cụ mạnh mẽ. Bài viết này sẽ hướng dẫn bạn cách sử dụng thuộc tính này để đặt lại và điều chỉnh các bộ đếm trong danh sách.

Khái niệm về counter-reset

Thuộc tính counter-reset được sử dụng để định nghĩa hoặc đặt lại giá trị của một hoặc nhiều bộ đếm CSS. Khi sử dụng thuộc tính này, bạn có thể tạo và quản lý các bộ đếm được sử dụng để đếm số lần một thành phần xuất hiện hoặc để đánh số các phần tử trong danh sách.

Cú pháp cơ bản của counter-reset

Cú pháp của thuộc tính counter-reset khá đơn giản:

selector {
  counter-reset: name number;
}
  • name: Tên của bộ đếm, có thể là bất kỳ từ nào tuỳ chọn.
  • number: Giá trị khởi đầu của bộ đếm. Nếu không được chỉ định, giá trị mặc định sẽ là 0.

Ví dụ cơ bản

Hãy cùng xem một ví dụ cơ bản về cách sử dụng counter-reset để đặt lại một bộ đếm:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Counter Reset Example</title>
    <style>
        body {
            counter-reset: section-counter; /* Đặt lại bộ đếm "section-counter" về 0 */
        }

        h2::before {
            counter-increment: section-counter; /* Tăng giá trị của bộ đếm */
            content: "Section " counter(section-counter) ": "; /* Hiển thị giá trị của bộ đếm */
        }
    </style>
</head>
<body>
    <h2>Introduction</h2>
    <h2>Details</h2>
    <h2>Conclusion</h2>
</body>
</html>

Trong ví dụ trên:

  1. Thuộc tính counter-reset được sử dụng để đặt lại bộ đếm có tên section-counter về 0 khi phần tử body được tải.
  2. Sử dụng h2::before để thêm nội dung phía trước mỗi thẻ <h2> thông qua content.
  3. Thuộc tính counter-increment làm tăng giá trị của section-counter cho mỗi thẻ <h2>.
  4. Sử dụng counter(section-counter) để chèn giá trị của bộ đếm vào nội dung của ::before.

Đặt lại bộ đếm trong các danh sách lồng nhau

Đôi khi, bạn cần đặt lại bộ đếm cho các danh sách lồng nhau. Hãy xem xét ví dụ sau để hiểu rõ hơn:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nested List Counter</title>
    <style>
        ol {
            counter-reset: item; /* Đặt lại bộ đếm "item" cho từng danh sách <ol> */
        }

        li {
            counter-increment: item; /* Tăng giá trị của bộ đếm "item" */
        }

        li::before {
            content: counters(item, ".") " "; /* Hiển thị giá trị của bộ đếm */
        }

        ol ol {
            counter-reset: sub-item; /* Đặt lại bộ đếm "sub-item" cho từng danh sách <ol> lồng */
        }

        ol ol li {
            counter-increment: sub-item; /* Tăng giá trị của bộ đếm "sub-item" */
        }

        ol ol li::before {
            content: counters(item, ".") "." counter(sub-item) " "; /* Hiển thị giá trị của bộ đếm lồng */
        }
    </style>
</head>
<body>

    <ol>
        <li>Item 1
            <ol>
                <li>Sub-item 1.1</li>
                <li>Sub-item 1.2</li>
            </ol>
        </li>
        <li>Item 2
            <ol>
                <li>Sub-item 2.1</li>
                <li>Sub-item 2.2</li>
            </ol>
        </li>
    </ol>

</body>
</html>

Trong ví dụ này:

  1. Sử dụng counter-reset và counter-increment để thiết lập và điều chỉnh giá trị bộ đếm item cho các danh sách <ol>.
  2. Sử dụng counters(item, ".") để tạo chuỗi số thứ tự của các phần tử, ví dụ 1.1, 1.2,…
  3. Sử dụng một bộ đếm sub-item để quản lý các số thứ tự trong danh sách con <ol>.

Kết luận

Việc sử dụng counter-reset trong CSS giúp bạn tùy chỉnh sự xuất hiện của các bộ đếm trong danh sách một cách sáng tạo và linh hoạt. Bằng cách hiểu và áp dụng các nguyên tắc cơ bản của thuộc tính này, bạn có thể cải thiện giao diện trang web của mình và đem lại trải nghiệm người dùng tốt hơn.

Comments

Bài viết liên quan