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
|
1 2 3 |
ul { 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
Ví dụ 2: sử dụng ul với thuộc tính list-style-type: square
|
1 2 3 |
ul { 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
|
1 2 3 |
ol { 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
|
1 2 3 |
ol { 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
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’);
|
1 2 3 4 |
ul { list-style-image: url('purple.jpg'); } |
Kết quả: danh sách không có thứ tự được biểu diễn bằng ảnh màu tím.
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
|
1 2 3 |
ul { list-style: square outside url('purple.jpg'); } |
Kết quả:
