Danh sách trong CSS

Trong hướng dẫn này, bạn sẽ học cách định dạng danh sách HTML bằng CSS.

Các loại danh sách trong HTML

Có ba loại danh sách khác nhau trong HTML:

• Danh sách không có thứ tự – Một danh sách các phần tử, trong đó mọi phần tử trong danh sách đều được đánh dấu bằng dấu đầu dòng.
• Danh sách có thứ tự – Một danh sách các phần tử, trong đó mỗi phần tử trong danh sách được đánh dấu bằng số.
• Danh sách định nghĩa – Một danh sách các phần tử, kèm theo mô tả của từng phần tử.

Xem hướng dẫn về danh sách trong HTML để tìm hiểu thêm về danh sách và cách tạo chúng.

Tạo kiểu cho danh sách với CSS

CSS cung cấp một số thuộc tính để tạo kiểu và định dạng danh sách không có thứ tự và có thứ tự được sử dụng phổ biến nhất. Các thuộc tính danh sách CSS này thường cho phép bạn:

• Kiểm soát hình dạng hoặc màu sắc của điểm đánh dấu.
• Chỉ định hình ảnh cho điểm đánh dấu thay vì dấu đầu dòng hoặc số.
• Đặt khoảng cách giữa điểm đánh dấu và văn bản trong danh sách.
• Chỉ định xem điểm đánh dấu sẽ xuất hiện bên trong hay bên ngoài hộp chứa các phần tử trong danh sách.

Trong phần sau, chúng ta sẽ thảo luận về các thuộc tính có thể được sử dụng để tạo kiểu cho danh sách HTML.

Thay đổi loại danh sách đánh dấu

Theo mặc định, các phần tử trong danh sách có thứ tự được đánh số bằng các chữ số (1, 2, 3, 5, v.v.), trong khi trong danh sách không có thứ tự, các mục được đánh dấu bằng dấu đầu dòng •.

Tuy nhiên, bạn có thể thay đổi kiểu điểm đánh dấu danh sách mặc định này thành bất kỳ kiểu nào khác, chẳng hạn như số la mã, chữ cái latin, hình tròn, hình vuông, hình thoi, v.v. bằng cách sử dụng thuộc tính list-style-type của CSS.

Hãy thử ví dụ sau để hiểu cách thuộc tính này thực sự hoạt động:

ul {
    list-style-type: square;
}
ol {
    list-style-type: upper-roman;
}

Thay đổi vị trí của các điểm đánh dấu danh sách

Theo mặc định, các điểm đánh dấu của mỗi phần tử trong danh sách được đặt là outside và nằm bên ngoài hộp hiển thị của chúng.

Tuy nhiên, bạn cũng có thể đặt các điểm đánh dấu hoặc dấu đầu dòng này bên trong hộp hiển thị của các phần tử trong danh sách bằng cách sử dụng thuộc tính list-style-position cùng với giá trị inside. Trong trường hợp này, các dòng sẽ nằm dưới điểm đánh dấu thay vì được thụt vào. Đây là một ví dụ:

ol.in li {
    list-style-position: inside;
}
ol.out li {
    list-style-position: outside;
}

Hãy xem hình minh họa sau đây để hiểu vị trí của các điểm đánh dấu hoặc dấu đầu dòng.

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

Bạn cũng có thể sử dụng hình ảnh làm điểm đánh dấu danh sách bằng cách sử dụng thuộc tính list-style-image.

Ví dụ sau chỉ định hình ảnh png nền trong suốt “bullet.png” làm điểm đánh dấu danh sách cho tất cả các phần tử trong danh sách không có thứ tự. Hãy dùng thử và xem nó hoạt động như thế nào:

ul li {
    list-style-image: url("images/bullet.png");
}

Đôi khi, thuộc tính list-style-image có thể không hoạt động như mong đợi. Thay vào đó, bạn có thể sử dụng giải pháp sau để kiểm soát tốt hơn vị trí của các điểm đánh dấu bằng hình ảnh.

Để giải quyết vấn đề, bạn cũng có thể đặt dấu đầu dòng hình ảnh thông qua thuộc tính background-image của CSS. Đầu tiên, đặt danh sách không có gạch đầu dòng. Sau đó, xác định hình nền không lặp lại cho phần tử danh sách.

Ví dụ sau đây hiển thị các điểm đánh dấu bằng hình ảnh trong tất cả các trình duyệt:

ul {
    list-style-type: none;
}
ul li {
    background-image: url("images/bullet.png");
    background-position: 0px 5px;    /* X-pos Y-pos (from top-left) */
    background-repeat: no-repeat;
    padding-left: 20px;
}

Thiết lập tất cả các thuộc tính danh sách cùng một lúc

Thuộc tính list-style là một thuộc tính viết tắt cho việc định nghĩa cả ba thuộc tính list-style-type, list-style-image và list-style-position một danh sách ở một nơi.

Ví dụ sau thiết lập tất cả các thuộc tính danh sách trong một khai báo.

ul {
    list-style: square inside url("images/bullet.png");
}

Lưu ý: Khi sử dụng thuộc tính viết tắt list-style, thứ tự của các giá trị là: list-style-type | list-style-position | list-style-image. Không quan trọng nếu một trong các giá trị trên bị thiếu miễn là các giá trị còn lại theo thứ tự đã chỉ định.

Tạo menu điều hướng bằng danh sách

Danh sách HTML thường được sử dụng để tạo thanh điều hướng ngang hoặc menu thường xuất hiện ở đầu trang web. Nhưng vì các phần tử trong danh sách là các phần tử khối, vì vậy để hiển thị chúng trên một dòng, chúng ta cần sử dụng thuộc tính display của CSS. Hãy thử một ví dụ để xem nó thực sự hoạt động như thế nào:

ul {
    padding: 0;
    list-style: none;
    background: #f2f2f2;
}
ul li {
    display: inline-block;
}
ul li a {
    display: block;
    padding: 10px 25px;
    color: #333;
    text-decoration: none;
}
ul li a:hover {
    color: #fff;
    background: #939393;
}

Bạn sẽ tìm hiểu chi tiết về các thuộc tính display và padding của CSS trong các chương sắp tới.