CSS Đếm: Đem Lại Trật Tự Cho Trang Web Của Bạn

Xin chào các nhà thiết kế web tương lai! Hôm nay, chúng ta sẽ cùng lặn sâu vào thế giới kỳ diệu của CSS counters. Là người bạn hàng xóm thân thiện của bạn trong lĩnh vực máy tính, tôi rất háo hức dẫn dắt bạn trong hành trình này. Tin tôi đi, đến cuối bài hướng dẫn này, bạn sẽ đếm các yếu tố như một chuyên gia!

CSS - Counters

CSS Counters Là Gì?

Hãy tưởng tượng bạn đang tổ chức một bữa tiệc lớn (ah, những ngày đó, trước khi tôi trở thành một người đam mê mã hóa toàn thời gian!). Bạn muốn đánh số tất cả các bàn để khách hàng có thể dễ dàng tìm thấy chỗ ngồi của mình. CSS counters giống như những trợ lý số hóa của bạn, tự động đánh số các yếu tố trên trang web của bạn. Đúng là cool phải không?

Hãy bắt đầu với một ví dụ đơn giản:

body {
counter-reset: section;
}

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

<h2>Giới Thiệu</h2>
<h2>Nội Dung Chính</h2>
<h2>Kết Luận</h2>

Trong ví dụ này, chúng ta đang nói với CSS để:

Khởi tạo một bộ đếm叫做 "section" ở đầu của body.
Tăng bộ đếm này mỗi khi chúng ta gặp thẻ <h2>.
Thêm "Section X: " trước mỗi <h2>, trong đó X là giá trị đếm hiện tại.

Kết quả? Các thẻ <h2> của bạn sẽ tự động được đánh số "Section 1: Giới Thiệu", "Section 2: Nội Dung Chính", và vân vân. Đó như một phép thuật, nhưng tốt hơn vì bạn là người phù thủy!

CSS Counters - Đếm Nested

Bây giờ, hãy nâng cấp một chút. Giả sử bạn đang viết một sách giáo khoa (hoặc một hướng dẫn rất, rất dài) và bạn muốn có các mục con. CSS counters sẽ hỗ trợ bạn!

body {
counter-reset: chapter;
}

h1 {
counter-reset: section;
}

h1::before {
counter-increment: chapter;
content: "Chapter " counter(chapter) ". ";
}

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

<h1>Bắt Đầu Với CSS</h1>
<h2>CSS Là Gì?</h2>
<h2>Cú Pháp CSS</h2>
<h1>Kỹ Thuật CSS Nâng Cao</h1>
<h2>Flexbox</h2>
<h2>Grid</h2>

Mã này tạo ra một cấu trúc đếm nested. Chúng ta đang đặt lại bộ đếm "section" mỗi khi chúng ta gặp một chương mới (h1). Kết quả? Một cấu trúc tự động đánh số đẹp mắt như sau:

Chapter 1. Bắt Đầu Với CSS 1.1 CSS Là Gì? 1.2 Cú Pháp CSS Chapter 2. Kỹ Thuật CSS Nâng Cao 2.1 Flexbox 2.2 Grid

Đó như có một người thủ thư nhỏ bé, vô hình tổ chức nội dung của bạn!

CSS Counters - Đếm Ngược

Đôi khi, chúng ta muốn đếm ngược. Có lẽ bạn đang tạo một countdown cho một sự kiện lớn (như việc phát hành một tiêu chuẩn CSS mới - oh, sự phấn khích!). CSS cũng có thể hỗ trợ bạn với thuộc tính counter-increment:

ol {
counter-reset: my-awesome-counter 5;
}

li {
counter-increment: my-awesome-counter -1;
}

li::before {
content: counter(my-awesome-counter) ") ";
}

<ol>
<li>Phóng tên lửa</li>
<li>Phát triển dù</li>
<li>Ngừng an toàn</li>
<li>Chúc mừng</li>
<li>Viết CSS</li>
</ol>

Điều này sẽ tạo ra một danh sách countdown:

Phóng tên lửa
Phát triển dù
Ngừng an toàn
Chúc mừng
Viết CSS

Vì, để nói thật, viết CSS luôn là mục tiêu cuối cùng!

Cú Pháp

Bây giờ, hãy phân tích cú pháp của CSS counters. Đừng lo lắng, nó dễ dàng hơn việc giải mã bí mật của bà nội của bạn!

Thuộc tính	Mô tả	Ví dụ
`counter-reset`	Khởi tạo hoặc đặt lại một bộ đếm	`counter-reset: my-counter 0;`
`counter-increment`	Tăng hoặc giảm một bộ đếm	`counter-increment: my-counter 1;`
`counter()`	Trả về giá trị hiện tại của bộ đếm	`content: counter(my-counter);`
`counters()`	Kết hợp các bộ đếm nested	`content: counters(my-counter, ".");`

CSS Counter - Các Thuộc Tính Liên Quan

Để sử dụng CSS counters một cách tối đa, bạn sẽ muốn làm quen với các thuộc tính liên quan:

content: Đây là nơi xảy ra phép màu. Bạn sử dụng này để hiển thị giá trị của bộ đếm.

li::before {
content: counter(item) ". ";
}

list-style-type: Mặc dù không trực tiếp liên quan đến counters, nhưng này có thể được sử dụng cùng với counters để tạo ra một số hiệu ứng rất cool.

ol {
list-style-type: none;
}

::before và ::after pseudo-elements: Đây là bạn của bạn khi làm việc với counters. Chúng cho phép bạn chèn nội dung trước hoặc sau một yếu tố.

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

Nhớ rằng, thực hành là cách tốt nhất để thành thạo! Hãy thử kết hợp các thuộc tính này theo nhiều cách khác nhau. Ai biết được? Bạn có thể phát minh ra điều lớn lao tiếp theo trong thiết kế web!

Cuối cùng, CSS counters là một công cụ mạnh mẽ có thể tiết kiệm thời gian và công sức của bạn khi tạo nội dung có cấu trúc. Chúng như một đội nhỏ robot đánh số trang của bạn cho bạn. Và phần tốt nhất? Chúng không bao giờ mệt mỏi hoặc yêu cầu nghỉ giải lao cà phê!

Vậy hãy tiến lên, đếm không ngừng nghỉ, và chúc may mắn cho các bộ đếm của bạn luôn tăng theo ý bạn!

Credits: Image by storyset