Thuộc tính list-style trong CSS

Trần Ngọc Thanh
550
18/07/2025

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ã, chi tiết như nào hãy cùng chúng tôi phân tích:

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;

Chạy Thử

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;

Chạy Thử

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;

Chạy Thử

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;

Chạy Thử

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;

Chạy Thử

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;

Chạy Thử

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;

Chạy Thử

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.

5/5 - (1 Đánh giá)
0 Bình luận

Trần Ngọc Thanh

Content Trần Ngọc Thanh là người viết content có kinh nghiệm nhiều năm tại Web Mới, chuyên viết content bên lĩnh vực website và nhiều lĩnh vực khác

Chia sẻ nội dung đánh giá của bạn về Thuộc tính list-style trong CSS
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 *

Bình luận, Hỏi đáp

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn

Kiến thức CSS

Kiến thức HTML

Kiến thức PHP

Kiến thức MySQL

Kiến thức JavaScript

Kiến thức về website

Kiến thức SEO website