คุณสมบัติ list-style แบบย่อใน CSS

คุณสมบัติ list-style ใน CSS ใช้สำหรับระบุ list-style-type, list-style-position และ list-style-image สำหรับองค์ประกอบ

ไวยากรณ์

ไวยากรณ์ของคุณสมบัติ CSS list-style ดังนี้:

Selector {    list-style: /*value*/ }

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงการจัดรูปแบบรายการ:

<!DOCTYPE html> <html> <head> <style> body {    font-size: 1.33em;    background: linear-gradient(to right, orange, lightgreen, lightblue); } ol:first-of-type {    box-shadow: inset 0 0 23px rgb(20,255,40);    list-style: upper-alpha inside; } ul {    list-style: circle; } </style> </head> <body> <ol> <li>Demo</li> </ol> <ol> <li>Demo</li> </ol> <ul> <li>demo</li> <ol> <li>demo</li> </ol> </ul> </body> </html>

ผลลัพธ์

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

ตัวอย่างเพิ่มเติม

<!DOCTYPE html> <html> <head> <style> ol {    width: 40%;    list-style: lower-roman; } li {    border: thin solid hotpink;    margin: 5px 30px; } </style> </head> <body> <h2>กีฬายอดนิยม</h2> <ol> <li>ฟุตบอล</li> <li>คริกเก็ต</li> <li>เทนนิส</li> <li>ฮอกกี้</li> <li>วอลเลย์บอล</li> <li>บาสเกตบอล</li> </ol> </body> </html>

ผลลัพธ์

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