CSS cho phép chúng ta tạo kiểu cho danh sách bằng cách chỉ định nền, các thuộc tính list-style, kiểu chữ, v.v. Thuộc tính list-style là viết tắt để chỉ định list-style-type, list-style-image và list-style-position theo đúng thứ tự đó.
Cú pháp
Cú pháp của thuộc tính CSS list-style như sau:
Selector { list-style: /*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> ul { display: flex; float: left; list-style-image: url("https://www.tutorialspoint.com/images/reactjs.png"); background: lightseagreen; list-style-position: inside; } li { background: azure; margin: 5px 20px; } </style> </head> <body> <h3>ReactJS</h3> <ul> <li>Bài 1</li> <li>Bài 2</li> <li>Bài 3</li> <li>Bài 4</li> <li>Bài 5</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> ol { width: 40%; color: white; list-style: lower-greek inside; background-image: url("https://www.tutorialspoint.com/ethereum/images/ethereum-mini-logo.jpg"); } li { background-color: rgba(0,0,0,0.6); margin: 5px 30px; } </style> </head> <body> <h2>Ethereum</h2> <ol> <li>Hợp đồng thông minh</li> <li>Ganache</li> <li>Tạo ví</li> <li>Triển khai hợp đồng</li> </ol> </body> </html>
Kết quả
Đoạn mã trên cho kết quả sau:
