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ó ba loại danh sách khác nhau trong HTML:
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.
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:
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.
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;
}
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.
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;
}
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ắtlist-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.
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.
Bạn có thể vui lòng tắt trình chặn quảng cáo ❤️ để hỗ trợ chúng tôi duy trì hoạt động của trang web.
Trong hướng dẫn này, bạn sẽ học cách tạo kiểu cho bảng trong HTML bằng CSS.
Trong hướng dẫn này, bạn sẽ học cách tạo kiểu cho văn bản trên các trang web của mình bằng CSS.
Trong hướng dẫn này, bạn sẽ học cách tạo kiểu cho các trạng thái khác nhau của một liên kết bằng cách sử dụng CSS.
Trong hướng dẫn này, bạn sẽ học cách tạo kiểu font chữ trên trang web bằng CSS.