1. Danh sách trong HTML và thuộc tính danh sách trong CSS

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

• danh sách không có thứ tự (<ul>) – các mục danh sách được đánh dấu bằng dấu ở đầu dòng
• danh sách có thứ tự (<ol>) – các mục danh sách được đánh dấu bằng số hoặc chữ cái ở đầu dòng

Thuộc tính danh sách CSS cho phép bạn:

• Đặt các điểm đánh dấu mục danh sách khác nhau cho các danh sách có thứ tự
• Đặt các điểm đánh dấu mục danh sách khác nhau cho các danh sách không có thứ tự
• Đặt hình ảnh làm điểm đánh dấu mục danh sách
• Thêm màu nền vào danh sách và liệt kê các mục

2. Các điểm đánh dấu các mục trong danh sách khác nhau

Thuộc tính list-style-type quy định các loại danh sách mục đánh dấu

Ví dụ:

3. Sử dụng hình ảnh làm điểm đánh dấu các mục của danh sách

Để sử dụng hình ảnh làm mục đánh dấu của danh sách ta sử dụng thuộc tính

list-style-image

Ví dụ:

4. Vị trí các điểm đánh dấu mục trong danh sách

Để thay đổi vị trí điểm đánh dấu các mục trong danh sách ta sử dụng thuộc tính

list-style-position

Ví dụ:

5. Xóa cài đặt mặc định danh sách

Thuộc tính list-style-type: none ; được sử dụng để loại bỏ các điểm đánh dấu trong danh sách

Lưu ý: danh sách cũng có phần margin và padding mặc định. Để loại bỏ nó hãy cho margin: 0 ; và padding: 0 ;

Ví dụ:

6. Viết tắt thuộc tính

Để viết tắt các dòng lệnh bên trên ta sử dụng thuộc tính list-style

Ví dụ:

7.Tạo màu sắc cho danh sách

Chúng ta cũng có thể tạo kiểu danh sách bằng màu sắc, để làm cho chúng trông thú vị hơn

Bất kỳ thứ gì được thêm vào thẻ <ol> hoặc <ul> đều ảnh hưởng đến toàn bộ danh sách, trong khi các thuộc tính được thêm vào thẻ <li> sẽ ảnh hưởng đến các mục danh sách riêng lẻ

Ví dụ: