Tự động đánh số headings thông qua CSS kiểu như 1.2 1.3 ~ blog chia sẻ kiến thức lập trình

Bài viết sẽ hướng dẫn bạn thêm chức năng tự động đánh số cho các headings h1, h2, h3 trong bài viết để ra dạng như 1.1, 1.2, 1.3,… Hoàn toàn bằng CSS.

Ví dụ đoạn code headings trong bài viết của bạn có dạng như sau

1
2
3
4
5
6
<h1>My Article</h1>
<h2>Introduction</h2>
<h3>Rationale</h3>
<h2>Background</h2>

Bạn muốn kết quả của nó sẽ thành ra như thế này

My Article

1. Introduction

1.1. Rationale

2. Background

Đánh số headings

Để có thể đánh số các headings, chúng ta dùng cấu trúc counter . Đây là một biến số nguyên gồm có 3 thành phần chính : reset , increment , read . Dưới đây là đoạn code để có thể đạt được kết quả trong ví dụ đầu bài viết

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
body {
    counter-reset: h2counter;
}
h1 {
    counter-reset: h2counter;
}
h2:before {
    content: counter(h2counter) ".\0000a0\0000a0";
    counter-increment: h2counter;
    counter-reset: h3counter;
}
h3:before {
    content: counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0";
    counter-increment: h3counter;
}

Giải thích cho đoạn code

Vì ở ví dụ đầu bài, tôi xem thẻ h2 là thẻ “to nhất”, nghĩa là nó có dạng 1., 2.,.. rồi tới thẻ h3 sẽ có dạng 1.1, 1.2,… thay vì là thẻ h1 . Thế nên ngay từ lúc load trang, tôi khôi phục (reset) bộ đếm của thẻ h2 về số đầu tiên, đó là lý do ta có dòng lệnh

1
2
3
4
5
body {
    counter-reset: h2counter;
}

Để an toàn hơn, chúng ta lại reset nó lần nữa ở thẻ h1 .

1
2
3
4
5
h1 {
    counter-reset: h2counter;
}

Bây giờ xem xét nội dung trong thẻ h2

content: counter(h2counter) ".\0000a0\0000a0"; Dòng này chính là cái hiển thị ra bài viết của bạn. Riêng cái ".\0000a0\0000a0" chính là dấu “.” và 2 khoảng trắng phía sau số đếm. Bạn có thể thay dấu “.” bằng bất cứ cái gì hoặc cũng có thể thêm/bớt số khoảng trắng phía sau số đếm.
counter-increment: h2counter; Trong thẻ h2 thì chỉ có thẻ h2 sẽ tăng dần thôi.
counter-reset: h3counter; Trong mỗi thẻ h2 mới thì các thẻ h3 đều phải được reset lại số đếm.

Ở đây thẻ h3 là thẻ “nhỏ nhất” nên ta chỉ có 2 dòng lệnh, không có dòng lệnh counter-reset , nếu như bạn muốn có thêm thẻ h4 nữa thì sẽ thêm dòng lệnh này vào.

Trong trường hợp bạn muốn dùng h1 làm thẻ “to nhất” thì phải làm sao? Vui lòng xem đoạn code bên dưới

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
body {
    counter-reset: h1counter;
}
h1:before {
    content: counter(h1counter) ".\0000a0\0000a0";
    counter-increment: h1counter;
    counter-reset: h2counter;
}
h2:before {
    content: counter(h1counter) "." counter(h2counter) ".\0000a0\0000a0";
    counter-increment: h2counter;
    counter-reset: h3counter;
}
h3:before {
    content: counter(h1counter) "." counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0";
    counter-increment: h3counter;
}

Không đánh số 1 heading nào đó

Bạn thêm đoạn code sau đây vào đoạn code có sẵn ở trên

1
2
3
4
5
6
7
8
9
10
11
h2.nocount:before {
    content: none;
    counter-increment: none;
}
h3.nocount:before {
    content: none;
    counter-increment: none;
}

Cách sử dụng : Ở heading nào mà bạn không muốn đánh số, bạn thêm class="nocount" vào là xong.

Chỉ đánh số ở một bài viết

Nếu bạn để đoạn code trên ở trong file css chính của trang web, tất cả các headings sẽ bị ảnh hưởng. Trong trường hợp bạn không muốn thế, bạn chỉ muốn đánh số ở 1 vài bài viết mà thôi, rất đơn giản, ở bài viết ấy, trong chế độ viết HTML, hãy chèn đoạn code vào giữa hai thẻ <style></style> là được.

Bài viết tham khảo trang này.