คุณสมบัติ 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>
ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้