CSS List Style: จัดรูปแบบรายการ (List) ให้สวยงามครบถ้วน

ประเภท List ใน HTML

• Unordered List (<ul>): จุด (Bullet Points)
• Ordered List (<ol>): ตัวเลข/ตัวอักษร ลำดับ
• Definition List (<dl>): คำและคำอธิบาย

CSS List Properties

ตัวอย่าง List Style Type

Unordered List

li.circle { list-style-type: circle; }
li.square { list-style-type: square; }
li.none { list-style-type: none; }

ค่าอื่นๆ: disc, decimal, lower-roman, upper-alpha, lower-greek เป็นต้น

Ordered List

li.alpha { list-style-type: lower-alpha; }   /* a, b, c */
li.roman { list-style-type: upper-roman; }   /* I, II, III */

List Style Position

ul.a { list-style-position: outside; } /* Default: Marker นอกเนื้อหา */
ul.b { list-style-position: inside; }  /* Marker ในเนื้อหา */

Custom Image Marker

ul { 
  list-style-image: url('cake.png'); 
}

Shorthand Property

ul { 
  list-style: outside url('cake.png'); /* type position image */
}

Background Colors สำหรับ List

ul { 
  background: lightblue; 
  padding: 10px; 
}
ul li { 
  background: pink; 
  margin: 10px; 
}

สรุป

CSS List Style ควบคุมรูปแบบ Marker, ตำแหน่ง, และรูปภาพได้อย่างละเอียด ใช้ Shorthand list-style เขียนสั้นได้ พร้อมจัดสีพื้นหลัง List และ Item แยกกัน