การตั้งค่าประเภทสไตล์รายการใน CSS

คุณสมบัติ list-style-type ใน CSS ใช้สำหรับจัดรูปแบบเครื่องหมายของรายการ เราสามารถนำสไตล์เหล่านี้ไปใช้กับทั้งรายการแบบไม่เรียงลำดับและแบบเรียงลำดับได้

ไวยากรณ์

ไวยากรณ์ของคุณสมบัติ 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>

ผลลัพธ์

ได้ผลลัพธ์ดังนี้: