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.

ul{
    border:1px solid red;
    padding:50px;
}
li{
    border:1px solid gray;
    padding:20px;
    margin:10px;
}

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

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

ol{
    list-style-type: lower-alpha;
}

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:

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)

ul{
    list-style-type: none;
    list-style-image: url('../public/home/img_demo/iconulli.jpg');
}

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:

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>

ol {
    list-style-position: outside;
}

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

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

ul {
    list-style: none inside url('../public/home/img_demo/iconulli.jpg');
}

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

li:before{
    content: "O_O";
}

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

ul{
    border:1px solid black;
    list-style:none inside url('../public/home/img_demo/iconulli.jpg');
    padding:0px;
}
li{
    border:1px solid black;
    padding:20px;
    background-color: yellow;
    font-size:20px;
}
li:hover{
    background-color: #73AD21;
}