Tự động đánh số headings thông qua CSS kiểu như 1.2 1.3

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

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

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

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

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

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

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.

Math2IT

Math2IT

Đây là tác giả chung cho các bài viết không do trực tiếp tác giả cụ thể nào của Math2IT viết. Có thể đó là các bài dịch từ các bài viết nước ngoài hoặc các bài viết thiên về kỹ thuật và thông báo.