Thuộc tính Counter trong CSS

(8)
91 lượt xem
Share

Trong bài viết dưới đây, eLib sẽ giúp các bạn hiểu được bộ đếm trong CSS là gì và nó hoạt động như thế nào? Hãy cùng theo dõi kỹ bài viết này nhé!

Mục lục nội dung

Thuộc tính Counter trong CSS

1. Tự động đánh số với bộ đếm

Bộ đếm CSS giống như “biến”. Các giá trị biến có thể được tăng lên bởi các quy tắc CSS (sẽ theo dõi số lần chúng được sử dụng).

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

  • counter-reset – Tạo hoặc đặt lại bộ đếm
  • counter-increment – Tăng giá trị bộ đếm
  • content – Chèn nội dung được tạo
  • Hàm counter() hoặc counters() – Thêm giá trị của bộ đếm vào một phần tử

Để sử dụng bộ đếm CSS, trước tiên nó phải được tạo bằng counter-reset.

Ví dụ sau tạo bộ đếm cho trang, sau đó tăng giá trị bộ đếm cho mỗi phần tử <h2> và thêm “Phần <giá trị của bộ đếm >:” vào đầu mỗi phần tử <h2>:

<!DOCTYPE html>
<html>
	<head>
		<style>
  body {
    counter-reset: section;
  }

  h2::before {
    counter-increment: section;
    content: "Section " counter(section) ": ";
  }
</style>
	</head>
	<body>
		<h1>Sử dụng bô đếm CSS</h1>
		<h2>Hướng dẫn HTML</h2>
		<h2>Hướng dẫn CSSl</h2>
		<h2>Hướng dẫn JavaScript </h2>
	</body>
</html>

2. Ví dụ

Ví dụ sau tạo một bộ đếm cho trang (phần chính) và một bộ đếm cho mỗi phần tử <h1> (phần phụ). Bộ đếm “phần chính” sẽ được tính cho mỗi phần tử <h1> với “< giá trị của bộ đếm phần chính >“, và bộ đếm “phần phụ ” sẽ được tính cho mỗi phần tử <h2> với “< giá trị của bộ đếm phần chính >.< giá trị của bộ đếm phụ >” :

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) " ";
}

 

Một bộ đếm cũng có thể hữu ích để tạo ra các danh sách bởi vì một cá thể mới của bộ đếm được tự động tạo ra trong các phần tử con. Ở đây chúng ta sử dụng hàm counters() để chèn một chuỗi giữa các mức khác nhau của các bộ đếm lồng nhau :

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

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

Trên đây là bài viết của eLib.VN về thuộc tính Counter trong CSS. Qua bài viết này, eLib đã hướng dẫn bạn tìm hiểu về thuộc tính counter trong CSS. Hãy thử nghiệm và ứng dụng nó trong các trường hợp thích hợp bạn nhé.

(8)
91 lượt xem
Share
Ngày:10/11/2020 Chia sẻ bởi:Thi
TẢI VỀ XEM ONLINE

CÓ THỂ BẠN QUAN TÂM