Thuộc tính list-style-type trong CSS được dùng để tạo kiểu cho dấu hiệu của các mục danh sách. Chúng ta có thể áp dụng các kiểu này cho cả danh sách có thứ tự và không thứ tự.
Cú pháp
Cú pháp của thuộc tính CSS list-style-type như sau:
Selector { list-style-type: /*giá trị*/ }
Ví dụ
Các ví dụ sau minh họa việc tạo kiểu cho danh sách:
<!DOCTYPE html> <html> <head> <style> ol li { padding: 5px; list-style-type: lower-roman; } li:last-child { font-size: 1.2em; font-style: italic; list-style-type: circle; } </style> </head> <body> <ol> <li>demo1</li> <li> demo 2 <ul> <li>demo a</li> <li>demo b</li> </ul> </li> <li>demo 3</li> </ol> </body> </html>
Kết quả
Đoạn mã trên cho kết quả sau:
Ví dụ khác
<!DOCTYPE html> <html> <head> <style> ol li { width: 50%; margin: 5px; font-size: 1.2em; list-style-type: devanagari; border: thin solid; background: linear-gradient(to right, lightgreen, pink,lightblue); } li:last-child { font-style: italic; list-style-type: lower-latin; } </style> </head> <body> <ol> <li>Eh!?</li> <li> demo one <ol> <li>What!?</li> <li>demo two</li> </ol> </li> <li>demo 3</li> <li>demo four</li> </ol> </body> </html>
Kết quả
Đoạn mã trên cho kết quả sau:
