Thuộc tính list-style-image trong CSS
Bùi Tấn Lực - 810
- 12/10/2025
Chức năng của Thuộc tính list-style-image trong CSS
Thuộc tính list-style-image trong CSS dùng để quy định một hình ảnh (img) làm đầu dòng trong nội dung của thẻ li.
Cú pháp của Thuộc tính list-style-image trong CSS
list-style-image: url('duongdanhinh');
duongdanhinh: Đường dẫn hình để quy định một hình ảnh (img) làm đầu dòng trong nội dung của thẻ li (Ví dụ: https://webmoi.vn/thumuc/li.png hoặc /thumuc/li.png)
Code Thuộc tính list-style-image trong CSS
list-style-image: url('https://webmoi.vn/thumuc/li.png');
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính list-style-image trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#ulmot li {
list-style-image: url('https://webmoi.vn/thumuc/li.png');
}
#ulhai {
list-style-image: url('https://webmoi.vn/thumuc/li2.png');
}
#ulba {
list-style-image: url('https://webmoi.vn/thumuc/li3.png');
}
</style>
</head>
<body>
<h1>Code Thuộc tính list-style-image trong CSS</h1>
<p>Dùng để quy định một hình ảnh (img) làm đầu dòng trong nội dung của thẻ li:</p>
<ul id="ulmot">
<li>list-style-image: url('li.png');</li>
<li>list-style-image: url('li.png');</li>
<li>list-style-image: url('li.png');</li>
</ul>
<ul id="ulhai">
<li>list-style-image: url('li2.png');</li>
<li>list-style-image: url('li2.png');</li>
<li>list-style-image: url('li2.png');</li>
</ul>
<ul id="ulba">
<li>list-style-image: url('li3.png');</li>
<li>list-style-image: url('li3.png');</li>
<li>list-style-image: url('li3.png');</li>
</ul>
</body>
</html>
Những lưu ý khi sử dụng list-style-image trong CSS
list-style-image phù hợp khi muốn thay dấu đầu dòng mặc định bằng một hình ảnh riêng. Tuy nhiên, thuộc tính này có một số điểm cần chú ý, đặc biệt khi hình ảnh không hiển thị hoặc có kích thước không phù hợp với nội dung danh sách.
Hình ảnh làm dấu đầu dòng hiển thị không đúng kích thước
CSS không cung cấp cách trực tiếp để đặt width và height riêng cho hình ảnh được khai báo bằng list-style-image. Vì vậy, nếu ảnh quá lớn hoặc quá nhỏ, dấu đầu dòng có thể làm dòng chữ bị lệch hoặc mất cân đối.
Trong trường hợp cần kiểm soát chính xác kích thước, khoảng cách và vị trí của biểu tượng, nên cân nhắc dùng ::before thay cho list-style-image. Cách này cho phép tạo phần tử giả và tùy chỉnh hình ảnh linh hoạt hơn.
ul {
list-style: none;
}
li::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 8px;
background-image: url("icon.png");
background-size: contain;
background-repeat: no-repeat;
}
Cách tiếp cận này đặc biệt hữu ích với các danh sách cần đồng bộ biểu tượng trên nhiều kích thước màn hình.
Cách xử lý khi list-style-image không hiển thị
Nếu hình ảnh không xuất hiện, trước tiên hãy kiểm tra đường dẫn trong url(). Đường dẫn tương đối được tính dựa trên vị trí của tệp CSS, vì vậy việc đặt CSS và hình ảnh ở các thư mục khác nhau có thể khiến đường dẫn bị sai.
ul {
list-style-image: url("images/check.png");
}
Ngoài đường dẫn, cần kiểm tra hình ảnh có tồn tại và trình duyệt có thể tải được hay không. Nếu ảnh vẫn không hiển thị, hãy kiểm tra thêm quy tắc CSS khác đang tác động đến danh sách, đặc biệt là list-style hoặc list-style-type.
Một nguyên nhân khác là hình ảnh không phù hợp với vai trò dấu đầu dòng. Nếu ảnh có kích thước quá lớn, định dạng không được trình duyệt hỗ trợ hoặc đường dẫn chứa lỗi, kết quả hiển thị sẽ không như mong muốn.
Khi cần một biểu tượng có kích thước ổn định và dễ căn chỉnh, việc chuyển sang ::before thường là lựa chọn thực tế hơn.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính list-style-image trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
