Thuộc tính list-style trong CSS
Trần Thị Vân - 1404
- 18/07/2025
Chức năng của Thuộc tính list-style trong CSS
Thuộc tính list-style trong CSS dùng để chọn các loại ký tự đầu dòng cho thẻ li như: hình tròn, hình vuông, con số, chữ số, chữ la mã....
Cú pháp của Thuộc tính list-style trong CSS
list-style: giatri;
giatri: Giá trị dùng để chọn các loại ký tự đầu dòng cho thẻ li (Ví dụ: decimal, auto, inside, disc, circle, lower-latin, lower-alpha, square, upper-alpha, upper-latin, upper-roman,...)
Các giá trị của Thuộc tính list-style trong CSS
decimal, auto: Những con số tự nhiên bắt đầu từ 1 sẽ xuất hiện ở vị trí đầu tiên trong thẻ li.
inside, disc: Dấu chấm đậm sẽ xuất hiện ở vị trí đầu tiên trong thẻ li.
circle: Dấu chấm tròn chỉ có border sẽ xuất hiện ở vị trí đầu tiên trong thẻ li.
lower-latin, lower-alpha: Chữ cái thường a, b, c sẽ xuất hiện ở vị trí đầu tiên trong thẻ li.
square: Hình vuông nhỏ đậm sẽ xuất hiện ở vị trí đầu tiên trong thẻ li.
upper-alpha, upper-latin: Chữ cái in Hoa A, B, C sẽ xuất hiện ở vị trí đầu tiên trong thẻ li.
upper-roman: Chữ cái la mã viết hoa I, II, III, IV sẽ xuất hiện ở vị trí đầu tiên trong thẻ li.
Code Thuộc tính list-style trong CSS
Css list-style auto
Những con số tự nhiên bắt đầu từ 1 sẽ xuất hiện ở vị trí đầu tiên trong thẻ li, giá trị này giống với giá trị decimal.
list-style:auto;
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Css list-style auto</title>
<style>
ul li{list-style:auto;}
</style>
</head>
<body>
<h1>Chạy thử Css list-style auto</h1>
<p>Những con số tự nhiên bắt đầu từ 1 sẽ xuất hiện ở vị trí đầu tiên trong thẻ li, giá trị này giống với giá trị decimal:</p>
<ul>
<li>list-style:auto;</li>
<li>list-style:auto;</li>
<li>list-style:auto;</li>
<li>list-style:auto;</li>
</ul>
</body>
</html>
Kết quả:
1. list-style:auto;
2. list-style:auto;
3. list-style:auto;
4. list-style:auto;
Css list-style disc
Dấu chấm đậm sẽ xuất hiện ở vị trí đầu tiên trong thẻ li.
list-style:disc;
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Css list-style disc</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
ul li{list-style:disc;}
</style>
</head>
<body>
<h1>Chạy thử Css list-style disc</h1>
<p>Dấu chấm đậm sẽ xuất hiện ở vị trí đầu tiên trong thẻ li:</p>
<ul>
<li>list-style:disc;</li>
<li>list-style:disc;</li>
<li>list-style:disc;</li>
<li>list-style:disc;</li>
</ul>
</body>
</html>
Kết quả:
• list-style:disc;
• list-style:disc;
• list-style:disc;
• list-style:disc;
Css list-style circle
Dấu chấm tròn chỉ có border sẽ xuất hiện ở vị trí đầu tiên trong thẻ li.
list-style:circle;
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Css list-style circle</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
ul li{list-style:circle;}
</style>
</head>
<body>
<h1>Chạy thử Css list-style circle</h1>
<p>Dấu chấm tròn chỉ có border sẽ xuất hiện ở vị trí đầu tiên trong thẻ li:</p>
<ul>
<li>list-style:circle;</li>
<li>list-style:circle;</li>
<li>list-style:circle;</li>
<li>list-style:circle;</li>
</ul>
</body>
</html>
Kết quả:
○ list-style:circle;
○ list-style:circle;
○ list-style:circle;
○ list-style:circle;
Css list-style lower-alpha
Chữ cái thường a, b, c sẽ xuất hiện ở vị trí đầu tiên trong thẻ li:
list-style:lower-alpha;
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Css list-style lower-alpha</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
ul li{list-style:lower-alpha;}
</style>
</head>
<body>
<h1>Chạy thử Css list-style lower-alpha</h1>
<p>Chữ cái thường a, b, c sẽ xuất hiện ở vị trí đầu tiên trong thẻ li:</p>
<ul>
<li>list-style:lower-alpha;</li>
<li>list-style:lower-alpha;</li>
<li>list-style:lower-alpha;</li>
<li>list-style:lower-alpha;</li>
</ul>
</body>
</html>
Kết quả:
a. list-style:lower-alpha;
b. list-style:lower-alpha;
c. list-style:lower-alpha;
d. list-style:lower-alpha;
Css list-style square
Hình vuông nhỏ đậm sẽ xuất hiện ở vị trí đầu tiên trong thẻ li:
list-style:square;
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Css list-style square</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
ul li{list-style:square;}
</style>
</head>
<body>
<h1>Chạy thử Css list-style square</h1>
<p>Hình vuông nhỏ đậm sẽ xuất hiện ở vị trí đầu tiên trong thẻ li:</p>
<ul>
<li>list-style:square;</li>
<li>list-style:square;</li>
<li>list-style:square;</li>
<li>list-style:square;</li>
</ul>
</body>
</html>
Kết quả:
■ list-style:square;
■ list-style:square;
■ list-style:square;
■ list-style:square;
Css list-style upper-alpha
Chữ cái in Hoa A, B, C sẽ xuất hiện ở vị trí đầu tiên trong thẻ li:
list-style:upper-alpha;
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Css list-style upper-alpha</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
ul li{list-style:upper-alpha;}
</style>
</head>
<body>
<h1>Chạy thử Css list-style upper-alpha</h1>
<p>Chữ cái in Hoa A, B, C sẽ xuất hiện ở vị trí đầu tiên trong thẻ li:</p>
<ul>
<li>list-style:upper-alpha;</li>
<li>list-style:upper-alpha;</li>
<li>list-style:upper-alpha;</li>
<li>list-style:upper-alpha;</li>
</ul>
</body>
</html>
Kết quả:
A. list-style:upper-alpha;
B. list-style:upper-alpha;
C. list-style:upper-alpha;
D. list-style:upper-alpha;
Css list-style upper-roman
Chữ cái la mã viết hoa I, II, III, IV sẽ xuất hiện ở vị trí đầu tiên trong thẻ li:
list-style:upper-roman;
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Css list-style upper-roman</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
ul li{list-style:upper-roman;}
</style>
</head>
<body>
<h1>Chạy thử Css list-style upper-roman</h1>
<p>Chữ cái la mã viết hoa I, II, III, IV sẽ xuất hiện ở vị trí đầu tiên trong thẻ li:</p>
<ul>
<li>list-style:upper-roman;</li>
<li>list-style:upper-roman;</li>
<li>list-style:upper-roman;</li>
<li>list-style:upper-roman;</li>
</ul>
</body>
</html>
Kết quả:
I. list-style:upper-roman;
II. list-style:upper-roman;
III. list-style:upper-roman;
IV. list-style:upper-roman;
Cách sử dụng list-style kết hợp trong CSS
Thuộc tính list-style phát huy hiệu quả rõ rệt khi cần kiểm soát nhiều đặc điểm của danh sách trong cùng một khai báo. Thay vì thiết lập riêng từng thuộc tính, bạn có thể kết hợp kiểu ký hiệu, vị trí hiển thị và hình ảnh để tạo cấu trúc danh sách phù hợp với giao diện.
Kết hợp list-style-type và list-style-position
Khi kết hợp list-style-type với list-style-position, bạn có thể đồng thời xác định kiểu dấu đầu dòng và vị trí của dấu so với nội dung. Cách này hữu ích khi danh sách có nhiều dòng hoặc cần kiểm soát độ thẳng hàng của phần văn bản.
Ví dụ dưới đây sử dụng dấu tròn và đặt dấu đầu dòng nằm bên ngoài vùng nội dung:
ul {
list-style-type: circle;
list-style-position: outside;
}
Nếu muốn dấu đầu dòng nằm trong vùng nội dung của mỗi mục, có thể chuyển sang inside:
ul {
list-style-type: circle;
list-style-position: inside;
}
Điểm cần lưu ý là outside thường tạo cảm giác thoáng và dễ phân biệt giữa dấu đầu dòng với nội dung, trong khi inside khiến dấu và phần chữ nằm cùng phạm vi bố cục của mục danh sách.
Kết hợp list-style-image với kiểu danh sách
list-style-image cho phép thay dấu đầu dòng mặc định bằng một hình ảnh. Khi sử dụng cùng các thiết lập khác của danh sách, bạn có thể tạo dấu hiệu trực quan riêng cho từng nhóm nội dung.
Ví dụ:
ul {
list-style-image: url("icon.png");
list-style-position: outside;
}
Trong trường hợp hình ảnh không được tải hoặc không phù hợp với trình duyệt, việc xác định thêm list-style-type có thể giúp danh sách vẫn có kiểu đánh dấu thay thế:
ul {
list-style-image: url("icon.png");
list-style-type: square;
}
Cách kết hợp này phù hợp với các danh sách cần dấu nhận diện riêng, nhưng nên chọn hình ảnh nhỏ, rõ và có kích thước đồng đều để tránh làm thay đổi cảm giác căn chỉnh của toàn bộ danh sách.
Sử dụng list-style để viết CSS ngắn gọn hơn
Thay vì khai báo lần lượt nhiều thuộc tính, list-style có thể gom các thiết lập liên quan đến dấu đầu dòng vào một dòng CSS. Điều này giúp phần định dạng danh sách ngắn gọn và dễ quản lý hơn.
Ví dụ:
ul {
list-style: square outside;
}
Khai báo trên tương đương với việc xác định kiểu dấu là square và vị trí dấu là outside. Nếu cần sử dụng hình ảnh, bạn cũng có thể khai báo trực tiếp trong shorthand:
ul {
list-style: url("icon.png") outside;
}
Khi viết shorthand, không nhất thiết phải khai báo mọi thành phần. Chỉ nên đưa vào những giá trị thực sự cần thay đổi để CSS dễ đọc và tránh ghi đè ngoài ý muốn lên các thiết lập đã có.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính list-style 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 *
