Thuộc tính list-style-type trong CSS
Bùi Tấn Lực - 948
- 12/10/2025
Chức năng của Thuộc tính list-style-type trong CSS
Thuộc tính list-style-type 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-type trong CSS
list-style-type: giatri;
giatri: Giá trị để 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-type 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-type trong CSS
#circle li {list-style-type:circle;}
#auto li {list-style-type:auto;}
#disc li {list-style-type:disc;}
#lower-alpha li {list-style-type:lower-alpha;}
#square li {list-style-type:square;}
#upper-alpha li {list-style-type:upper-alpha;}
#upper-roman li {list-style-type:upper-roman;}
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính list-style-type trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
ul{background: #ddd;}
#circle li {list-style-type:circle;}
#auto li {list-style-type:auto;}
#disc li {list-style-type:disc;}
#lower-alpha li {list-style-type:lower-alpha;}
#square li {list-style-type:square;}
#upper-alpha li {list-style-type:upper-alpha;}
#upper-roman li {list-style-type:upper-roman;}
</style>
</head>
<body>
<h1>Code Thuộc tính list-style-type trong CSS</h1>
<p>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ã....:</p>
<ul id="circle">
<li>list-style-type:circle;</li>
<li>list-style-type:circle;</li>
<li>list-style-type:circle;</li>
</ul>
<ul id="auto">
<li>list-style-type:auto;</li>
<li>list-style-type:auto;</li>
<li>list-style-type:auto;</li>
</ul>
<ul id="disc">
<li>list-style-type:disc;</li>
<li>list-style-type:disc;</li>
<li>list-style-type:disc;</li>
</ul>
<ul id="lower-alpha">
<li>list-style-type:lower-alpha;</li>
<li>list-style-type:lower-alpha;</li>
<li>list-style-type:lower-alpha;</li>
</ul>
<ul id="square">
<li>list-style-type:square;</li>
<li>list-style-type:square;</li>
<li>list-style-type:square;</li>
</ul>
<ul id="upper-alpha">
<li>list-style-type:upper-alpha;</li>
<li>list-style-type:upper-alpha;</li>
<li>list-style-type:upper-alpha;</li>
</ul>
<ul id="upper-roman">
<li>list-style-type:upper-roman;</li>
<li>list-style-type:upper-roman;</li>
<li>list-style-type:upper-roman;</li>
</ul>
</body>
</html>
Cách sử dụng list-style-type hiệu quả trong CSS
list-style-type phát huy hiệu quả nhất khi được lựa chọn dựa trên mục đích của danh sách thay vì chỉ quan tâm đến hình thức hiển thị. Với danh sách nội dung thông thường, nên ưu tiên kiểu dễ đọc; còn với menu hoặc giao diện tùy chỉnh, có thể loại bỏ kiểu mặc định để tự xây dựng cách trình bày riêng.
Chọn kiểu danh sách phù hợp với từng nội dung
Kiểu danh sách nên phản ánh cách người đọc tiếp nhận thông tin. Với ul, các giá trị như disc, circle hoặc square phù hợp khi các mục không có thứ tự bắt buộc. Với ol, các kiểu đánh số như decimal, lower-alpha hoặc upper-roman thích hợp khi thứ tự giữa các mục có ý nghĩa.
Không nên chọn kiểu chỉ vì yếu tố trang trí. Một kiểu quá nổi bật hoặc khó nhận biết có thể khiến danh sách mất tính trực quan, đặc biệt khi xuất hiện nhiều mục liên tiếp.
Kết hợp list-style-type với ul và ol
list-style-type có thể được áp dụng cho từng loại danh sách để tạo cách trình bày khác nhau. Chẳng hạn, danh sách tính năng có thể dùng dấu chấm, trong khi các bước thực hiện nên sử dụng số để người đọc dễ theo dõi trình tự.
<ul class="features">
<li>Tốc độ tải nhanh</li>
<li>Giao diện dễ sử dụng</li>
</ul>
<ol class="steps">
<li>Tạo cấu trúc HTML</li>
<li>Thêm CSS</li>
</ol>
<style>
.features {
list-style-type: square;
}
.steps {
list-style-type: decimal;
}
</style>
Cách kết hợp này giúp cấu trúc HTML vẫn rõ ràng, đồng thời CSS đảm nhiệm phần trình bày. Khi thay đổi giao diện, bạn chỉ cần điều chỉnh kiểu danh sách mà không phải sửa lại nội dung.
Tùy chỉnh kiểu đánh số cho danh sách nhiều cấp
Với nội dung có nhiều cấp như tài liệu hướng dẫn hoặc mục lục, mỗi cấp có thể sử dụng một kiểu khác nhau để tạo sự phân biệt. Cấp chính có thể dùng số, cấp phụ dùng chữ cái hoặc số La Mã.
<ol class="main-list">
<li>Phần thứ nhất
<ol>
<li>Nội dung phụ</li>
<li>Nội dung bổ sung</li>
</ol>
</li>
<li>Phần thứ hai</li>
</ol>
<style>
.main-list {
list-style-type: decimal;
}
.main-list ol {
list-style-type: lower-alpha;
}
</style>
Việc thay đổi kiểu theo từng cấp giúp người đọc nhanh chóng nhận biết mối quan hệ giữa nội dung chính và nội dung phụ mà không cần thêm nhiều thành phần HTML.
Khi nào nên dùng list-style-type: none?
list-style-type: none phù hợp khi muốn loại bỏ dấu đầu dòng hoặc số thứ tự mặc định để tự thiết kế giao diện. Cách này thường xuất hiện ở menu điều hướng, danh sách liên kết, thanh chức năng hoặc các thành phần mà dấu đầu dòng không còn cần thiết.
<ul class="menu">
<li><a href="#">Trang chủ</a></li>
<li><a href="#">Sản phẩm</a></li>
<li><a href="#">Liên hệ</a></li>
</ul>
<style>
.menu {
list-style-type: none;
}
</style>
Khi sử dụng giá trị này, nội dung danh sách vẫn giữ cấu trúc ngữ nghĩa của ul hoặc ol; chỉ phần ký hiệu hiển thị mặc định được loại bỏ. Đây là lựa chọn phù hợp khi giao diện cần một cách trình bày riêng thay vì phụ thuộc vào kiểu đánh dấu có sẵ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-type 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 *
