Đánh số tự động bằng CSS

Bài hướng dẫn CSS này sẽ cho bạn biết mọi thứ bạn cần để đánh số tự động cho mọi loại phần tử HTML mà bạn muốn.

Ý tưởng khá đơn giản, sử dụng CSS để đánh số cho các danh sách, tài liệu.... Nó thậm chí còn cung cấp việc đánh số cho các mục nhỏ hơn. Nó chỉ cần một vài dòng code mà thôi, vậy hãy làm ngay để xem cách thức mà nó hoạt động như thế nào.

Các bạn có thể xem đoạn code dưới đây kết hợp cùng việc xem video hướng dẫn. Việc này bổ sung khá là dễ dàng cũng như tăng cường trải nghiệm của người dùng. Nó cũng giữ cho nội dung của bạn sắp xếp gọn gàng và có tổ chức. CSS có sự linh hoạt mà bạn cần, nhất là trong tình huống thế này.

1. <style type="text/css">
2. h1 { counter-reset: section; }
3. h2 { counter-reset: subsection; }
4. h2::before {
5. content: counter(section) ". ";
6. counter-increment: section;
7. }
8. p::before {
9. content: counter(section) "." counter(subsection) " ";
10. counter-increment: subsection;
11. }
12. </style>
13. <h1>HTML</h1>
14. <h2>HTML Multimedia Elements</h2>
15. <p>audio</p>
16. <p>embed</p>
17. <p>video</p>
18. <h2>HTML Form Elements</h2>
19. <p>form</p>
20. <p>input</p>
21. <p>textarea</p>
22. <p>button</p>

Nếu bạn có bất kì yêu cầu hướng dẫn hoặc có những chia sẻ kiến thức cho cộng đồng. Hãy cho chùng tôi biết bằng cách để lại comment cũng như gửi email cho chúng tôi. Trước khi rời khỏi đây, bạn có thể xem qua một vài bài hướng dẫn khác mà có thể bạn sẽ cần cho việc thiết kế website của mình.

Bài viết liên quan: Các kĩ thuật thiết kế web thích nghi - Responsive web design