Thuộc tính list-style-image trong CSS được dùng để đặt một hình ảnh làm dấu hiệu cho mục danh sách.
Cú pháp
Cú pháp của thuộc tính CSS list-style-image như sau:
Selector { list-style-image: /*giá trị*/ }
Ví dụ
Các ví dụ sau minh họa thuộc tính CSS list-style-image:
<!DOCTYPE html> <html> <head> <style> ul { width: 150px; list-style-image: url("https://www.tutorialspoint.com/images/Servlets.png"); background: goldenrod; } li { text-align: center; background: lavenderblush; margin: 5px 30px; } </style> </head> <body> <h2>Servlets</h2> <ul> <li>Yêu cầu khách hàng</li> <li>Phản hồi máy chủ</li> <li>Xử lý Cookie</li> <li>Theo dõi phiên</li> </ul> </body> </html>
Kết quả
Đoạn mã trên cho kết quả sau:
Ví dụ khác
<!DOCTYPE html> <html> <head> <style> ul { margin-left: 20px; list-style-image: url("https://www.tutorialspoint.com/images/hibernate.png"); } li { font-size: 1.3em; text-align: center; background: burlywood; margin: 3px; } </style> </head> <body> <h2>Hướng dẫn Hibernate</h2> <ul> <li>Phiên</li> <li>Lớp bền vững</li> <li>Tệp ánh xạ</li> <li>Kiểu ánh xạ</li> <li>Chú thích</li> </ul> </body> </html>
Kết quả
Đoạn mã trên cho kết quả sau:
