Danh sách được sắp xếp cũng như không có thứ tự. Với CSS, bạn có thể đặt các điểm đánh dấu mục danh sách đã đặt hoặc một hình ảnh cho các điểm đánh dấu. Cùng với đó, với CSS, chúng tôi cũng có thể đặt vị trí cho các điểm đánh dấu mục danh sách.
Bây giờ chúng ta hãy xem một số ví dụ -
list-style-type
Loại kiểu danh sách được sử dụng để đặt loại điểm đánh dấu mục danh sách.
Ví dụ
Bây giờ chúng ta hãy xem một ví dụ trong đó chúng ta đang định dạng danh sách có thứ tự (ol) -
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<h2>Teams</h2>
<ul>
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ul>
</body>
</html> Đầu ra
list-style-image
Thuộc tính list-style-image được sử dụng để đặt hình ảnh làm điểm đánh dấu mục danh sách.
Ví dụ
Bây giờ chúng ta hãy xem một ví dụ -
<!DOCTYPE html>
<html>
<head>
<style>
ul.demo1 {
list-style-image: url('https://www.tutorialspoint.com/images/Swift.png');
}
ol.demo2 {
list-style-image: url('https://www.tutorialspoint.com/images/Swift.png');
}
</style>
</head>
<body>
<h2>Teams</h2>
<ul class="demo1">
<li>India - Qualified for WordCup</li>
<li>Australia - Qualified for WordCup</li>
<li>England - Qualified for WordCup</li>
</ul>
<h2>Players</h2>
<ol class="demo2">
<li>Virat Kohli</li>
<li>David Warner</li>
<li>Steve Smith</li>
</ol>
</body>
</html> Đầu ra
list-style-position
Thuộc tính list-style-position được sử dụng để đặt vị trí của các điểm đánh dấu mục danh sách.
Ví dụ
Bây giờ chúng ta hãy xem một ví dụ -
<!DOCTYPE html>
<html>
<head>
<style>
ul.demo1 {
list-style-position: outside;
}
ul.demo2 {
list-style-position: inside;
}
</style>
</head>
<body>
<h1>Teams</h1>
<h2>ODI Teams</h2>
<ul class="demo1">
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ul>
<h2>Test Teams</h2>
<ul class="demo2">
<ul>
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ul>
</ul>
</body>
</html> Đầu ra
