การจัดสไตล์รายการ (Lists) ด้วย CSS

รายการมี 2 ประเภท: ลำดับ (ordered/ol) และไม่มีลำดับ (unordered/ul) ด้วย CSS สามารถตั้งค่าตัวหมายเลข (list markers) หรือใช้ภาพแทนได้ พร้อมกับกำหนดตำแหน่งของตัวหมายเลข

1. list-style-type - ประเภทตัวหมายเลข

ใช้กำหนดประเภทของตัวหมายเลขรายการ

ตัวอย่าง: ul ใช้ upper-roman

<!DOCTYPE html> <html> <head> <style> ul {    list-style-type: upper-roman; } </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. list-style-image - ใช้ภาพเป็นตัวหมายเลข

ใช้กำหนดภาพเป็นตัวหมายเลขรายการ

ตัวอย่าง

<!DOCTYPE html> <html> <head> <style> ul.demo1 {    list-style-image: url('https://www.tutorialspoint.com/images/Swift.png'); } ol.demo2 {    list-style-image: url('https://www.tutorialspoint.com/images/Swift.png'); } </style> </head> <body> <h2>Teams</h2> <ul class="demo1"> <li>India - Qualified for WordCup</li> <li>Australia - Qualified for WordCup</li> <li>England - Qualified for WordCup</li> </ul> <h2>Players</h2> <ol class="demo2"> <li>Virat Kohli</li> <li>David Warner</li> <li>Steve Smith</li> </ol> </body> </html>

ผลลัพธ์

3. list-style-position - ตำแหน่งตัวหมายเลข

ใช้กำหนดตำแหน่งของตัวหมายเลขรายการ

ตัวอย่าง

<!DOCTYPE html> <html> <head> <style> ul.demo1 {    list-style-position: outside; } ul.demo2 {    list-style-position: inside; } </style> </head> <body> <h1>Teams</h1> <h2>ODI Teams</h2> <ul class="demo1"> <li>India</li> <li>Australia</li> <li>England</li> <li>West Indies</li> <li>South Africa</li> <li>Srilanka</li> </ul> <h2>Test Teams</h2> <ul class="demo2"> <ul> <li>India</li> <li>Australia</li> <li>England</li> <li>West Indies</li> <li>South Africa</li> <li>Srilanka</li> </ul> </ul> </body> </html>

ผลลัพธ์

ค่าของ list-style-type ยอดนิยม

Shorthand: list-style

list-style: type position image;
/* ตัวอย่าง */
list-style: square inside none;
list-style: upper-roman outside url('bullet.png');