คุณสมบัติ CSS list-style-type ใช้เพื่อกำหนดรูปแบบตัวทำเครื่องหมายของรายการ เรานำสไตล์เหล่านี้ไปใช้กับรายการที่ไม่เรียงลำดับและเรียงลำดับได้
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติ CSS list-style-type มีดังนี้ -
Selector {
list-style-type: /*value*/
} ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการจัดรูปแบบของรายการ
<!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> ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
ตัวอย่าง
<!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> ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้
