Định dạng danh sách có thứ tự và không thứ tự bằng CSS

Để định dạng cả danh sách không thứ tự (ul) và có thứ tự (ol), sử dụng các thuộc tính: list-style-type, list-style-image, và list-style-position.

Ví dụ 1: Danh sách không thứ tự (ul) với square

<!DOCTYPE html>
<html>
<head>
<style>
ul { list-style-type: square; }
</style>
</head>
<body>
<h2>Các đội</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>

Kết quả

Ví dụ 2: Danh sách có thứ tự (ol) với upper-roman

<!DOCTYPE html>
<html>
<head>
<style>
ol { list-style-type: upper-roman; }
</style>
</head>
<body>
<h2>Các đội</h2>
<ol>
  <li>India</li><li>Australia</li><li>England</li>
  <li>West Indies</li><li>South Africa</li><li>Srilanka</li>
</ol>
</body>
</html>

Kết quả

Ví dụ 3: Hình ảnh marker cho cả ul và ol

<!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>Các đội</h2>
<ul class="demo1">
  <li>India - Đạt WorldCup</li>
  <li>Australia - Đạt WorldCup</li>
  <li>England - Đạt WorldCup</li>
</ul>
<h2>Các cầu thủ</h2>
<ol class="demo2">
  <li>Virat Kohli</li><li>David Warner</li><li>Steve Smith</li>
</ol>
</body>
</html>

Kết quả

Các kiểu list-style-type phổ biến: