Thuộc tính kiểu danh sách CSS được sử dụng để tạo kiểu cho điểm đánh dấu của các mục danh sách. Chúng tôi có thể áp dụng các kiểu này cho cả danh sách không có thứ tự và có thứ tự.
Cú pháp
Cú pháp của thuộc tính kiểu danh sách CSS như sau -
Selector {
list-style-type: /*value*/
} Ví dụ
Các ví dụ sau minh họa kiểu danh sách
<!DOCTYPE html>
<html>
<head>
<style>
ol li {
padding: 5px;
list-style-type: lower-roman;
}
li:last-child {
font-size: 1.2em;
font-style: italic;
list-style-type: circle;
}
</style>
</head>
<body>
<ol>
<li>demo1</li>
<li>
demo 2
<ul>
<li>demo a</li>
<li>demo b</li>
</ul>
</li>
<li>demo 3</li>
</ol>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
ol li {
width: 50%;
margin: 5px;
font-size: 1.2em;
list-style-type: devanagari;
border: thin solid;
background: linear-gradient(to right, lightgreen, pink,lightblue);
}
li:last-child {
font-style: italic;
list-style-type: lower-latin;
}
</style>
</head>
<body>
<ol>
<li>Eh!?</li>
<li>
demo one
<ol>
<li>What!?</li>
<li>demo two</li>
</ol>
</li>
<li>demo 3</li>
<li>demo four</li>
</ol>
</body>
</html> Đầu ra
Điều này cho kết quả sau
