CSS List ในรูปแบบต่าง ๆ

CSS List ในรูปแบบต่าง ๆ

บทความนี้ เรามาดูวิธีใส่ Style ให้กับ List ในรูปแบบต่าง ๆ กันคับ

List มีประโยชน์ในการแสดงข้อมูล มีเว็บไซต์หลาย ๆ เว็บ ที่ใช้ List ในการแสดงข้อมูล เรายังจะเห็นว่า List ในแต่ละเว็บมีลักษณะหลาย ๆ อย่าง ตามแต่ละเว็บ เช่น ขนาด ตำแหน่ง รูปแบบ ฯลฯ บทความดูเรามาดูวิธีใส่ Style ให้กับ List โดยใช้ CSS กันครับ

มาดู Property ในการกำหนด Style ให้กับ List กันก่อนคับ ตามด้านล่างเลย
 

  • list-style-type เป็นการกำหนดรูปแบบหรือลักษณะเครื่องหมายให้กับ List
  • list-style-position เป็นการกำหนดตำแหน่ง ของเครื่องหมาย
  • list-style-image เป็นการกำหนดรูปภาพให้กับเครื่องหมาย
  • list-style เป็นการกำหนด Style แบบรวม ๆ
  • marker-offset เป็นการกำหนดตำแหน่งของ เครื่องหมายกับข้อความ

เรามาดู list-style-type กันครับ

Value คำอธิบาย
none NA
disc (default) รูปวงกลมเต็ม
circle รูปวงกลมกลวงใน
square รูปสี่เหลี่ยม


นอกจากนี้เรายังสามารถใช้ List ที่เป็นแบบ Order ได้ด้วยครับ ตามตารางด้านล่าง

 

 

Value Description Example
decimal ตัวเลข 1,2,3,4,5
decimal-leading-zero เลข 0 ก่อนตัวเลข 01, 02, 03, 04, 05
lower-alpha ตัวอักษรตัวเล็ก a, b, c, d, e
upper-alpha ตัวอักษรตัวใหญ่ A, B, C, D, E
lower-roman เลขโรมันตัวเล็ก i, ii, iii, iv, v
upper-roman เลขโรมันตัวใหญ่ I, II, III, IV, V
lower-greek กรีกตัวเล็ก alpha, beta, gamma
lower-latin ลาตินตัวเล็ก a, b, c, d, e
upper-latin ลาตินตัวใหญ่ A, B, C, D, E
hebrew ตัวเลข Hebrew  
armenian ตัวเลข Armenian  
georgian ตัวเลข Georgian  
cjk-ideographic เป็นตัวเลขที่เป็นเครื่องหมาย  
hiragana ตัว hiragana a, i, u, e, o, ka, ki
katakana ตัว katakana A, I, U, E, O, KA, KI
hiragana-iroha ตัว hiragana-iroha i, ro, ha, ni, ho, he, to
katakana-iroha ตัว katakana-iroha I, RO, HA, NI, HO, HE, TO

 

 

 

ตัวอย่างการใส่ Style ให้กับ List

 
  1. List ที่ 1
  2. List ที่ 2
  3. List ที่ 3
  1. List ที่ 1
  2. List ที่ 2
  3. List ที่ 3
  1. List ที่ 1
  2. List ที่ 2
  3. List ที่ 3
  1. List ที่ 1
  2. List ที่ 2
  3. List ที่ 3
  1. List ที่ 1
  2. List ที่ 2
  3. List ที่ 3
  1. List ที่ 1
  2. List ที่ 2
  3. List ที่ 3

ลองมาดูการใส่ตำแหน่งกันครับ
  1. List ที่ 1
  2. List ที่ 2
  3. List ที่ 3
  1. List ที่ 1
  2. List ที่ 2
  3. List ที่ 3