Tự học CSS - Bài 33 - Định dạng số đếm thẻ TIÊU ĐỀ

 CSS counters là “các biến” được lưu giữ bởi CSS, trong đó các giá trị này có thể tăng lên bởi các qui tắc thiết lập của CSS (để lưu lại số lần chúng được dùng). Counters cho phép bạn tùy biến giao diện nội dung dựa vào những thay thế của nó trên văn bản.

Số tự động với counters

CSS counters giống như “các biến” vậy.

Giá trị biến có thể tăng bởi các qui tắc thiết lập trong CSS (chúng sẽ ghi lại bao nhiêu lần đã được dùng).

Để làm việc với CSS counters, chúng ta sẽ dùng các thuộc tính sau:

·         counter-reset – tạo hoặc resets lại 01 counter

·         counter-increment – tăng 01 giá trị counter

·         content – chèn nội dung phát sinh

Hàm counter() hoặc counters() – thêm giá trị của 01 counter vào 01 phần tử.

Để dùng 01 CSS counter, ban đầu ta phải tạo ra bằng counter-reset

Ví dụ sau tạo ra 01 counter cho trang (trong phần chọn qua body), sau đó tăng giá trị counter sau mỗi thẻ <h2> và thêm “Section <giá trị của counter>:” vào đầu mỗi thẻ <h2>

body {
  counter-reset: section;
}

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

Phân nhánh Counters

Ví dụ sau tạo ra 01 counter cho trang (section) và 01 counter cho mỗi thẻ <h1> (subsection)

Counter “section” sẽ được đếm ở mỗi thẻ <h1> với “Section <giá trị của section counter>.”, và counter “subsection” sẽ được đếm trên mỗi thẻ <h2> với “<giá trị của section counter>.<giá trị của subsection counter>”:

body {
  counter-reset: section;
}

h1 {
  counter-reset: subsection;
}

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

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

01 counter cũng có thể hữu ích khi tạo danh sách có sắp xếp thứ tự. Vì 01 giá trị mới của counter sẽ được tự động tạo trong các phần tử con.

Ở đây chúng ta dùng hàm counters() để chèn 01 chuỗi giữa các cấp khác nhau của counter nhánh.

ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

Các thuộc tính CSS Counter

Thuộc tính	Mô tả
content	Dùng với ::before và ::after pseudo-elements, để chèn thêm nội dung
counter-increment	Tăng 01 hoặc nhiều giá trị counter
counter-reset	Tạo hoặc resets 01 hay nhiều counters
counter()	Trả về giá trị hiện tại của counter đã được đặt tên

Nếu vẫn chưa rõ các bạn xem thêm video clip sau:

Xem MỤC LỤC BÀI VIẾT VỀ CSS

• Đăng ký kênh tại đây: https://www.youtube.com/channel/UCXjV9sLt3WgamL7vofLofow?sub_confirmation=1
• Trang fan page: https://www.facebook.com/lophocvitinhcom
• Trang web: http://lophocvitinh.com

Sưu tầm bởi #drM