Computer >> Máy Tính >  >> Lập trình >> CSS

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

Kiểu và vị trí của danh sách không có thứ tự và có thứ tự có thể được định dạng bởi thuộc tính CSS với kiểu danh sách, kiểu danh sách-hình ảnh và kiểu danh sách.

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 thuộc tính kiểu danh sách CSS -

Danh sách có thứ tự kiểu mẫu sau đây -

<!DOCTYPE html>
<html>
<head>
<style>
ol {
   list-style: upper-roman;
   line-height: 150%;
}
</style>
</head>
<body>
<h2>Latest C# Versions</h2>
<ol>
<li>C# 8.0</li>
<li>C# 7.3</li>
<li>C# 7.2</li>
<li>C# 7.1</li>
<li>C# 7.0</li>
</ol>
</body>
</html>

Đầu ra

Điều này cho kết quả sau -

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

Ví dụ

Ví dụ sau kiểu danh sách không có thứ tự -

<!DOCTYPE html>
<html>
<head>
<style>
ul > ul{
   list-style: circle inside;
}
li:last-child {
   list-style-type: square;
}
</style>
</head>
<body>
<h2>Programming Languages</h2>
<ul>
<li>C++ programming language created by Bjarne Stroustrup as an extension of the C programming language.</li>
<li>Java programming language developed by James Gosling.</li>
<ul>
<li>Core Java</li>
<li>Advanced Java</li>
</ul>
<li>Scala is a modern multi-paradigm programming language designed to express common programming patterns in a concise, elegant, and type-safe way.</li>
</ul>
</body>
</html>

Đầu ra

Điều này cho kết quả sau -

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