16. List trong CSS

List trong CSS: bạn có thể tùy chỉnh kiểu và bố cục của danh sách (list) như danh sách không có dấu đầu dòng (unordered list) hoặc danh sách có dấu số (ordered list). Dưới đây là một số cách bạn có thể tùy chỉnh danh sách trong CSS:

1. Danh Sách Không Có Dấu Đầu Dòng (Unordered List):

css

/* Loại bỏ ký hiệu mặc định của danh sách */
ul {
    list-style: none;
}

/* Tạo biểu tượng tùy chỉnh cho danh sách không có dấu đầu dòng */
ul li::before {
    content: "\2022"; /* Ký hiệu dấu chấm tròn (bullet) */
    color: blue;
    font-weight: bold;
    margin-right: 8px;
}

2. Danh Sách Có Dấu Số (Ordered List):

css

/* Tùy chỉnh kiểu số danh sách */
ol {
    list-style-type: decimal;
}

/* Tạo biểu tượng tùy chỉnh cho danh sách có dấu số */
ol li {
    margin-left: 20px;
}

/* Tạo biểu tượng tùy chỉnh cho danh sách có dấu số */
ol li::before {
    content: counters(item, ".") " ";
    counter-increment: item;
    color: green;
    font-weight: bold;
}

Trong ví dụ trên:

• Một số thuộc tính cơ bản dùng để tùy chỉnh danh sách là list-style và list-style-type. list-style được sử dụng để loại bỏ ký hiệu mặc định của danh sách và list-style-type được sử dụng để chọn kiểu ký hiệu cho danh sách.
• Bạn có thể sử dụng các ký hiệu khác nhau như bullet (dấu chấm tròn), decimal (số thập phân), lower-alpha (chữ cái thường), upper-roman (số la mã hoa), và nhiều kiểu khác.
• Bạn cũng có thể tạo biểu tượng tùy chỉnh bằng cách sử dụng pseudo-element ::before để thêm biểu tượng vào mỗi phần tử danh sách.

Với việc tùy chỉnh danh sách trong CSS, bạn có thể tạo ra giao diện danh sách độc đáo và phù hợp với thiết kế của trang web.