Thuộc tính list-style-type dùng để tùy chỉnh giao diện của các dấu mục danh sách. Nó cung cấp nhiều tùy chọn như hình tròn, hình vuông và hơn thế nữa.
Cú pháp:
list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | none | inherit;
Giá trị thuộc tính:
disc | Đây là giá trị mặc định. Dấu mục là một hình tròn được tô đầy. |
circle | Dấu mục là một hình tròn rỗng. |
square | Dấu mục là một hình vuông. |
decimal | Dấu mục là một số thập phân, bắt đầu từ 1. |
lower-roman | Dấu mục là một số La Mã viết thường (i, ii, iii, iv, v, v.v.). |
upper-roman | Dấu mục là số La Mã viết hoa (I, II, III, IV, V, v.v.). |
lower-greek | Dấu mục là chữ cái Hy Lạp cổ điển viết thường alpha, beta, gamma,... (??, ?...). |
upper-Latin | Dấu mục là một chữ cái ASCII viết hoa (A, B, C, ... Z). |
lower-Latin | Dấu mục là một chữ cái ASCII viết thường (a, b, c, ... z). |
none | Không có dấu mục nào được hiển thị ở chế độ này. |
Ví dụ 1: Trong ví dụ này, ta sử dụng thuộc tính list-style-type: disc;.
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: disc;
}
</style>
</head>
<body>
<h1 style="text-align: center; color: green">
list-style-type: disc;
</h1>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
Đầu ra:
Ví dụ: Trong ví dụ này, ta sử dụng thuộc tính list-style-type: circle;.
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: circle;
}
</style>
</head>
<body>
<h1 style="text-align: center; color: green">
list-style-type: circle;
</h1>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
Đầu ra:
Ví dụ: Trong ví dụ này, ta sử dụng thuộc tính list-style-type: square;.
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: square;
}
</style>
</head>
<body>
<h1 style="text-align: center; color: green">
list-style-type: square;
</h1>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
Đầu ra:
Ví dụ: Trong ví dụ này, ta sử dụng thuộc tính list-style-type: decimal;.
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: decimal;
}
</style>
</head>
<body>
<h1 style="text-align: center; color: green">
list-style-type: decimal;
</h1>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
Đầu ra:
Ví dụ: Trong ví dụ này, ta sử dụng thuộc tính list-style-type: lower-roman;.
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: lower-roman;
}
</style>
</head>
<body>
<h1 style="text-align: center; color: green">
list-style-type: lower-roman;
</h1>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
Đầu ra:
Ví dụ: Trong ví dụ này, ta sử dụng thuộc tính list-style-type: upper-roman;.
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<h1 style="text-align: center; color: green">
list-style-type: upper-roman;
</h1>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
Đầu ra:
Ví dụ: Trong ví dụ này, ta sử dụng thuộc tính list-style-type: lower-greek;.
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: lower-greek;
}
</style>
</head>
<body>
<h1 style="text-align: center; color: green">
list-style-type: lower-greek;
</h1>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
Đầu ra:
Ví dụ: Trong ví dụ này, ta sử dụng thuộc tính list-style-type: lower-latin;.
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: lower-latin;
}
</style>
</head>
<body>
<h1 style="text-align: center; color: green">
list-style-type: lower-latin;
</h1>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
Đầu ra:
Ví dụ: Trong ví dụ này, ta sử dụng thuộc tính list-style-type: upper-latin;.
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: upper-latin;
}
</style>
</head>
<body>
<h1 style="text-align: center; color: green">
list-style-type: upper-latin;
</h1>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
Đầu ra:
Ví dụ: Trong ví dụ này, ta sử dụng thuộc tính list-style-type: none;.
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: none;
}
</style>
</head>
<body>
<h1 style="text-align: center; color: green">
list-style-type: none;
</h1>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
Đầu ra:
Lưu ý:
lower-alphavà upper-alpha tương tự nhưlower-latinvàupper-latin.
Trình duyệt được hỗ trợ: Dưới đây là danh sách các trình duyệt hỗ trợ thuộc tính list-style-type:
- Google Chrome 1.0
- Edge 12.0
- Firefox 1.0
- Opera 3.5
- Apple Safari 1.0