บทนำ
คุณสมบัติ list-style ใน CSS เป็น **Shorthand Property** (คุณสมบัติย่อ) ที่รวมคุณสมบัติของรายการ (List) 3 อย่างไว้ในบรรทัดเดียว:
list-style-type- รูปแบบ Marker (disc, circle, square, decimal, v.v.)list-style-position- ตำแหน่ง Marker (insideหรือoutside)list-style-image- ใช้รูปภาพเป็น Marker
ตัวอย่างการใช้งาน
<html>
<head>
</head>
<body>
<ul style="list-style: inside square;">
<li>Table</li>
<li>Chair</li>
</ul>
</body>
</html>
คำอธิบาย
inside- Marker อยู่ภายในกล่องเนื้อหา (Content Box)square- ใช้สัญลักษณ์สี่เหลี่ยมจัตุรัส
รูปแบบอื่นๆ ที่นิยม
/* ใช้รูปภาพเป็น Marker */
list-style: url('bullet.png') inside;
/* ใช้ตัวเลขลำดับภายใน */
list-style: decimal inside;
/* ไม่มี Marker */
list-style: none;
แนวทางปฏิบัติที่ดี: ควรแยก CSS ไปไฟล์ .css แยกต่างหาก แทนการเขียน Inline Style เพื่อการบำรุงรักษาที่ง่ายขึ้น
