[CSS] – CSS Lists

Trong HTML, có 2 loại danh sách chính:

  • Danh sách không có thứ tự (unordered lists – UL)
  • Danh sách có thứ tự (ordered lists – OL): những mục trong danh sách được biểu diễn bằng số hoặc ký tự chữ.

Các thuộc tính CSS List cho phép bạn:

  • Thiết lập các biểu tượng sắp xếp khác nhau cho các mục trong danh sách.
  • Thiết lập một hình ảnh thay thế cho các biểu tượng sắp xếp.
  • Thiết lập màu nền cho danh sách

1.Thuộc tính list-style-type

Thuộc tính list-style-type xác định loại biểu tượng của mục sắp xếp

list-style-type: circle; <!– hình tròn–>

list-style-type: square; <!– hình vuông–>

Ví dụ 1: sử dụng ul với thuộc tính list-style-type: circle

Kết quả: danh sách không có thứ tự được biểu diễn bằng hình tròn

Hình 1. Sử dụng UL với thuộc tính list-style-type

Ví dụ 2: sử dụng ul với thuộc tính list-style-type: square

Kết quả: danh sách không có thứ tự được biểu diễn bằng hình vuông


Hình 2. Sử dụng UL với thuộc tính list-style-type: square

Ví dụ 3: sử dụng ol với thuộc tính list-style-type: upper-roman

Kết quả: danh sách có thứ tự được viết in các chữ số theo kiểu la mã


Hình 3. Sử dụng OL với thuộc tính list-style-type: upper-roman

Ví dụ 4: sử dụng ol với thuộc tính list-style-type: lower-alpha

Kết quả: danh sách có thứ tự được viết in thường các chữ cái

Hình 4. Sử dụng OL với thuộc tính list-style-type: lower-alpha

2.Thuộc tính list-style-image

Thuộc tính list-style-image sử dụng một hình ảnh thay cho mục thứ tự

Ví dụ 5: sử dụng ul với thuộc tính list-style-image: url(‘đường dẫn ảnh’);

Kết quả: danh sách không có thứ tự được biểu diễn bằng ảnh màu tím.

Hình 5. Sử dụng UL với thuộc tính list-style-image

3.Cách viết ngắn gọn các thuộc tính

Ví dụ 6: viết ngắn gọn các thuộc tính css list sử dụng list-style

Kết quả:

Sử dụng list-style viết ngắn gọn
Hình 6. Sử dụng UL với thuộc tính list-style

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.