Thuộc tính HTML Lists và CSS List
Trong HTML, có hai loại list 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
Thuộc tính list 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 đã sắp xếp
- Đặ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
Các loại điểm đánh dấu mục list trong CSS
Thuộc tính list-style-type chỉ định loại điểm đánh dấu mục danh sách.
Ví dụ sau đây cho thấy một số điểm đánh dấu mục danh sách có sẵn:
ul.a { list-style-type: circle; } ul.b { list-style-type: square; } ol.c { list-style-type: upper-roman; } ol.d { list-style-type: lower-alpha; }
Lấy hình ảnh làm điểm đánh dấu mục danh sách
Thuộc tính list-style-image chỉ định một hình ảnh làm điểm đánh dấu mục danh sách:
ul { list-style-image: url('sqpurple.gif'); }
Vị trí các điểm đánh dấu mục trong danh sách
Thuộc tính list-style-position chỉ định vị trí của các điểm đánh dấu mục danh sách (dấu đầu dòng).
"list-style-position: outside;" nghĩa là các dấu đầu dòng sẽ nằm ngoài mục danh sách. Đầu mỗi dòng của một mục danh sách sẽ được căn chỉnh theo chiều dọc. Đây là mặc định:
- Cà phê
- Trà
- Coca-cola
"list-style-position: inside;" nghĩa là các dấu đầu dòng sẽ nằm bên trong mục danh sách. Vì nó là một phần của mục danh sách, nó sẽ là một phần của văn bản và đẩy văn bản vào đầu:
- Cà phê
- Trà
- Coca-cola
ul.a { list-style-position: outside; } ul.b { list-style-position: inside; }
Xóa style mặc định
Thuộc tính list-style-type: none cũng có thể được sử dụng để xóa các điểm đánh dấu / dấu đầu dòng. Lưu ý rằng list cũng có marrgin và padding mặc định. Để loại bỏ điều này, hãy thêm margin: 0 và padding: 0 cho <ul> hoặc <ol>:
ul { list-style-type: none; margin: 0; padding: 0; }
List - Shorthand property
Thuộc tính list-style là một thuộc tính shorthand. Nó được sử dụng để đặt tất cả các thuộc tính list trong một khai báo:
ul { list-style: square inside url("sqpurple.gif"); }Khi sử dụng thuộc tính shorthand, thứ tự của các giá trị thuộc tính là:
- list-style-type (nếu một hình ảnh kiểu danh sách được chỉ định, giá trị của thuộc tính này sẽ được hiển thị nếu hình ảnh vì một lý do nào đó không thể được hiển thị)
- list-style-position (chỉ định xem các điểm đánh dấu mục danh sách sẽ xuất hiện bên trong hay bên ngoài luồng nội dung)
- list-style-image (chỉ định một hình ảnh làm điểm đánh dấu mục danh sách)
Nếu thiếu một trong các giá trị thuộc tính ở trên, giá trị mặc định cho thuộc tính bị thiếu sẽ được chèn, nếu có.
ol { background: #ff9999; padding: 20px; } ul { background: #3399ff; padding: 20px; } ol li { background: #ffe5e5; color: darkred; padding: 5px; margin-left: 35px; } ul li { background: #cce5ff; color: darkblue; margin: 5px; }