Tạo kiểu cho danh sách (Lists) với CSS

Danh sách có thứ tự (ordered) và không thứ tự (unordered). Với CSS, bạn có thể thiết lập kiểu đánh dấu (marker) hoặc hình ảnh cho marker. Cũng có thể thiết lập vị trí cho marker.

1. list-style-type - Kiểu đánh dấu

Dùng để thiết lập kiểu marker cho mục danh sách.

Ví dụ: Danh sách không thứ tự (ul)

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: upper-roman;
}
</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ả

2. list-style-image - Hình ảnh làm marker

Dùng hình ảnh làm marker cho mục danh sách.

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>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ả

3. list-style-position - Vị trí marker

Thiết lập vị trí của marker danh sách.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
ul.demo1 { list-style-position: outside; }
ul.demo2 { list-style-position: inside; }
</style>
</head>
<body>
<h1>Các đội</h1>
<h2>Đội ODI</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>Đội Test</h2>
<ul class="demo2">
  <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ả

Shorthand: list-style

list-style: type position image;

Ví dụ: list-style: square inside url('icon.png');