เพื่อตั้งค่าประเภทตัวหมายเลขรายการใน CSS ให้ใช้คุณสมบัติ list-style-type
ตัวอย่างที่ 1: ul ใช้ square
<!DOCTYPE html> <html> <head> <style> ul { list-style-type: square; } </style> </head> <body> <h2>Teams</h2> <ul> <li>India</li> <li>Australia</li> <li>England</li> <li>West Indies</li> <li>South Africa</li> <li>Srilanka</li> </ul> </body> </html>
ผลลัพธ์
ตัวอย่างที่ 2: ol ใช้ upper-roman
<!DOCTYPE html> <html> <head> <style> ol { list-style-type: upper-roman; } </style> </head> <body> <h2>Teams</h2> <ol> <li>India</li> <li>Australia</li> <li>England</li> <li>West Indies</li> <li>South Africa</li> <li>Srilanka</li> </ol> </body> </html>
ผลลัพธ์
ค่าทั้งหมดของ list-style-type
| กลุ่ม | ค่า | ตัวอย่าง |
|---|---|---|
| Unordered (ul) | disc | ● (ค่าเริ่มต้น) |
| circle | ○ | |
| square | ■ | |
| none | ไม่มี marker | |
| Ordered (ol) | decimal | 1, 2, 3... (ค่าเริ่มต้น) |
| decimal-leading-zero | 01, 02, 03... | |
| lower-roman | i, ii, iii... | |
| upper-roman | I, II, III... | |
| lower-alpha / lower-latin | a, b, c... | |
| upper-alpha / upper-latin | A, B, C... | |
| lower-greek | α, β, γ... | |
| อื่นๆ | cjk-ideographic | 中文數字 |
| hiragana / katakana | ひらがな / カタカナ | |
| armenian / georgian | Ա, Բ, Գ... / ა, ბ, გ... |
CSS Counter (ขั้นสูง)
สำหรับการควบคุมหมายเลขแบบกำหนดเอง ใช้ CSS Counters:
ol {
counter-reset: section;
list-style: none;
}
li::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
