CSS cho phép chúng ta định kiểu danh sách bằng cách chỉ định nền, thuộc tính kiểu danh sách, kiểu phông chữ, v.v. Thuộc tính kiểu danh sách là cách viết tắt để chỉ định kiểu danh sách, kiểu danh sách -image và list-style-position theo cùng một 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: /*value*/
} Ví dụ
Các ví dụ sau minh họa kiểu danh sách -
<!DOCTYPE html>
<html>
<head>
<style>
ul {
display: flex;
float: left;
list-style-image: url("https://www.tutorialspoint.com/images/reactjs.png");
background: lightseagreen;
list-style-position: inside;
}
li {
background: azure;
margin: 5px 20px;
}
</style>
</head>
<body>
<h3>ReactJS</h3>
<ul>
<li>Lesson 1</li>
<li>Lesson 2</li>
<li>Lesson 3</li>
<li>Lesson 4</li>
<li>Lesson 5</li>
</ul>
</body>
</html> Đầu ra
Điều này cho kết quả sau−
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
ol {
width: 40%;
color: white;
list-style: lower-greek inside;
background-image: url("https://www.tutorialspoint.com/ethereum/images/ethereum-mini-logo.jpg");
}
li {
background-color: rgba(0,0,0,0.6);
margin: 5px 30px;
}
</style>
</head>
<body>
<h2>Ethereum</h2>
<ol>
<li>Smart Contracts</li>
<li>Ganache</li>
<li>Creating Wallet </li>
<li>Deploying Contract</li>
</ol>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
