Trần Ngọc Thanh - 398
- 18/07/2025
Trần Ngọc Thanh 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:
Thuộc tính list-style trong CSS
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á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>
<ul>
<li>list-style:auto;</li>
<li>list-style:auto;</li>
<li>list-style:auto;</li>
<li>list-style:auto;</li>
</ul>
</body>
</html>
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>
<ul>
<li>list-style:disc;</li>
<li>list-style:disc;</li>
<li>list-style:disc;</li>
<li>list-style:disc;</li>
</ul>
</body>
</html>
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>
<ul>
<li>list-style:circle;</li>
<li>list-style:circle;</li>
<li>list-style:circle;</li>
<li>list-style:circle;</li>
</ul>
</body>
</html>
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:
Ví dụ: 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>
<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>
Css list-style square
Hình vuông nhỏ đậm sẽ xuất hiện ở vị trí đầu tiên trong thẻ li:
Ví dụ: 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>
<ul>
<li>list-style:square;</li>
<li>list-style:square;</li>
<li>list-style:square;</li>
<li>list-style:square;</li>
</ul>
</body>
</html>
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:
Ví dụ: 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>
<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>
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:
Ví dụ: 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>
<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>
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 *
