Các thuộc tính định dạng DANH SÁCH (LIST) trong CSS

Cấu trúc của danh sách
Có hai kiểu danh sách là: danh sách có thứ tự (dùng thẻ <ol>) và danh sách không có thứ tự (dùng thẻ <ul>)

Các thẻ: <ol>, <ul>, <li> đều thuộc dạng PHẦN TỬ KHỐI.

Hình ảnh minh họa dưới đây sẽ cho bạn thấy rõ cấu trúc phạm vi của các phần tử trong danh sách:

HTML
CSS
JavaScript
Giải thích:

Đường màu đỏ chính là đường viền của phần tử <ul>
Đường màu xám là đường viền của phần tử <li>
Phần tử <ul> có một vùng đệm bên trái (padding-left) khoảng 40px
Ta có thể dùng thuộc tính margin, padding để làm co giãn khoảng cách giữa các list item.

Ví dụ

Chọn kiểu đánh dấu cho danh sách
Thuộc tính list-style-type dùng để chọn kiểu đánh dấu cho danh sách

Cú pháp
list-style-type: circle | disc | square |
decimal | decimal-leading-zero | lower-alpha | upper-alpha | lower-roman | upper-roman |
none;
Trong đó:

circle, disc, square: dùng cho danh sách không có thứ tự
decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman, upper-roman: dùng cho danh sách có thứ tự
none: không chọn kiểu đánh dấu cho danh sách
Ví dụ

Kiểu đánh dấu danh sách bằng hình ảnh
Thuộc tính list-style-image dùng để thiết lập kiểu đánh dấu bằng hình ảnh cho danh sách. Cú pháp:

list-style-image: url(“đường dẫn đến tập tin hình ảnh”);
Trong đó, “đường dẫn đến tập tin hình ảnh” có thể là đường dẫn tương đối hoặc tuyệt đối

(Nếu chưa rõ cách xác định đường dẫn, bạn có thể xem lại bài Liên kết, đường dẫn trong HTML)

Ví dụ

Lưu ý: Nếu muốn thiết lập kiểu đánh dấu bằng hình ảnh cho danh sách thì trước hết ta phải thiết lập thuộc tính list-style-type với giá trị none để loại đó kiểu đánh dấu mặc định của danh sách.

Thiết lập vị trí đánh dấu danh sách
Thuộc tính list-style-position dùng để thiết lập vị trí đánh dấu danh sách. Cú pháp:

list-style-position: inside|outside;
Trong đó

inside: đánh dấu nằm bên trong nội dung của phần tử <li>
outside: đánh dấu nằm bên ngoài nội dung của phần tử <li>
Ví dụ

Cú pháp định dạng danh sách rút gọn
Thay vì phải định dạng cho danh sách bởi 3 thuộc tính (list-style-type, list-style-image, list-style-position) riêng biệt, thì ta có thể gôm chúng lại thành một bởi thuộc tính list-style

Cú pháp
list-style: parameter1 parameter2 parameter3;
Trong đó:

parameter1 là giá trị của thuộc tính list-style-type
parameter2 là giá trị của thuộc tính list-style-position
parameter3 là giá trị của thuộc tính list-style-image
Ví dụ

Lưu ý: Giá tị của thuộc tính list-style không nhất thiết phải đủ 3 tham số. Tuy nhiên, các tham số phải được sắp xếp theo đúng thứ tự trên.

Trạng thái before, thuộc tính content
Trạng thái before thường được dùng để tạo ra một phần tử nằm ở vị trí đầu tiên bên trong nội dung của phần tử <li>, và để tạo nội dung cho phần tử này thì ta sử dụng thuộc tính content

Ví dụ

Lưu ý: Để dùng hình ảnh làm nội dung cho phần tử này, ta sử dụng cú pháp content: url(“đường dẫn đến tập tin hình ảnh”);

Tạo danh sách chuyên nghiệp
Ví dụ

Danh sách sẽ có hình dạng như sau:

Bài 01: Tổng quan về CSS
Bài 02: Các thuộc tính định dạng văn bản
Bài 03: Cách sử dụng CSS
Bài 04: Phần tử khối và phần tử nội tuyến
Bài 05: Canh lề cho phần tử

Học CSS