Trong việc thiết kế web, việc tự động đánh số các heading (h1, h2, h3, …) có thể giúp người đọc dễ dàng theo dõi nội dung hơn, đặc biệt là trong các tài liệu dài hoặc hướng dẫn. Mặc dù CSS không hỗ trợ trực tiếp việc đánh số heading, bạn có thể đạt được điều này bằng cách sử dụng một số kỹ thuật sáng tạo, bao gồm sử dụng pseudo-elements và thuộc tính counter.
CSS Counters là một tính năng cho phép bạn tạo ra các bộ đếm để tự động đánh số các phần tử. Dưới đây là cách thực hiện điều này cho các heading.
Đầu tiên, bạn cần định nghĩa một counter trong phần tử cha hoặc trực tiếp trên body.
body {
counter-reset: section; /* Khởi tạo bộ đếm tại phần tử body */
}Tiếp theo, bạn sẽ cần tăng bộ đếm khi gặp một heading và hiển thị giá trị của nó.
h2 {
counter-increment: section; /* Tăng bộ đếm mỗi khi có h2 */
}
h2::before {
content: counter(section) ". "; /* Hiển thị số trước heading */
font-weight: bold; /* Định dạng số */
}Nếu bạn muốn đánh số cho các heading cấp thấp hơn (như h3, h4), bạn có thể tạo các counter phụ.
h3 {
counter-increment: subsection; /* Tăng bộ đếm phụ cho h3 */
}
h3::before {
content: counter(section) "." counter(subsection) " "; /* Hiển thị số h2.h3 */
font-weight: bold;
}
h2 {
counter-reset: subsection; /* Khởi tạo lại bộ đếm phụ tại mỗi h2 */
}Dưới đây là một ví dụ đầy đủ về cách tự động đánh số các heading bằng CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Đánh Số Heading</title>
<style>
body {
counter-reset: section; /* Khởi tạo bộ đếm */
}
h2 {
counter-increment: section; /* Tăng bộ đếm */
}
h2::before {
content: counter(section) ". "; /* Hiển thị số */
font-weight: bold; /* Định dạng số */
}
h3 {
counter-increment: subsection; /* Tăng bộ đếm phụ */
}
h3::before {
content: counter(section) "." counter(subsection) " "; /* Hiển thị số h2.h3 */
font-weight: bold;
}
h2 {
counter-reset: subsection; /* Khởi tạo lại bộ đếm phụ tại mỗi h2 */
}
</style>
</head>
<body>
<h2>Tiêu đề 1</h2>
<h3>Tiêu đề 1.1</h3>
<h3>Tiêu đề 1.2</h3>
<h2>Tiêu đề 2</h2>
<h3>Tiêu đề 2.1</h3>
<h3>Tiêu đề 2.2</h3>
<h4>Tiêu đề 2.2.1</h4>
<h2>Tiêu đề 3</h2>
</body>
</html>Với ví dụ trên, các heading sẽ được tự động đánh số như sau:
Bằng cách sử dụng CSS Counters, bạn có thể dễ dàng tự động đánh số các heading trong tài liệu của mình. Điều này không chỉ giúp cải thiện khả năng đọc mà còn tăng tính chuyên nghiệp cho nội dung của bạn.
