สไตล์รายการ CSS

รายการเป็นวิธีที่สำคัญในการแสดงข้อมูลในรูปแบบ HTML เมื่อคุณมีรายการจำนวนมากที่มีธีมร่วมกัน เช่น ขนาดรองเท้าหรือเครื่องมือนำทาง วิธีที่มีประสิทธิภาพที่สุดในการนำเสนอข้อมูลคือการใช้รายการ

โดยค่าเริ่มต้น รายการใน HTML จะค่อนข้างธรรมดา นั่นคือที่มาของคุณสมบัติสไตล์รายการ CSS คุณสมบัติสไตล์รายการและคุณสมบัติย่อยจะถูกใช้เพื่อปรับแต่งรายการเพื่อเสริมการออกแบบเว็บไซต์ที่เป็นเอกลักษณ์ของคุณ

บทช่วยสอนนี้จะครอบคลุมพร้อมตัวอย่าง วิธีกำหนดสไตล์รายการใน CSS โดยใช้คุณสมบัติ list-style และคุณสมบัติย่อย นอกจากนี้ยังจะครอบคลุมถึงวิธีตั้งค่าสีพื้นหลังของรายการและรายการต่างๆ หลังจากอ่านบทช่วยสอนนี้ คุณจะเป็นผู้เชี่ยวชาญด้านการจัดสไตล์รายการโดยใช้ CSS

รายการ HTML และ CSS

รายการใช้เพื่อแสดงรายการที่เกี่ยวข้องจำนวนหนึ่ง ใน HTML มีรายการสามประเภทที่คุณสามารถใช้เพื่อนำเสนอข้อมูลได้ เหล่านี้คือ:

• รายการที่ไม่เรียงลำดับ (
  ) – รายการสิ่งของที่มีค่าถูกทำเครื่องหมายโดยใช้สัญลักษณ์แสดงหัวข้อย่อย
  • รายการสั่งซื้อ (
    ) – รายการสิ่งของที่มีค่าซึ่งทำเครื่องหมายโดยใช้ระบบการสั่งซื้อ (เช่น ตัวเลขหรือตัวอักษรตามลำดับ)
    1. รายการคำจำกัดความ (

       ) – รายการที่มีคำอธิบายประกอบ

  หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับรายการ HTML โปรดอ่านบทความเกี่ยวกับรายการใน HTML
  

  รายการแต่ละประเภทข้างต้นมาพร้อมกับสไตล์ HTML เริ่มต้นของตัวเอง นอกจากนี้ CSS ยังมีคุณสมบัติมากมายที่คุณสามารถใช้เพื่อทำให้รายการของคุณดูสวยงามและสอดคล้องกับแนวทางสไตล์ของคุณมากขึ้น
  

  คุณสมบัติรายการ CSS ช่วยให้คุณ:
  

  • เปลี่ยนเครื่องหมายรายการสำหรับรายการที่สั่งซื้อ
  • เปลี่ยนเครื่องหมายรายการสำหรับรายการที่ไม่เรียงลำดับ
  • ตั้งค่ารูปภาพเป็นเครื่องหมายรายการ
  • เพิ่มสีพื้นหลังให้กับรายการและรายการ

  ในบทช่วยสอนนี้ เราจะพูดถึงสองวิธีที่ครอบคลุมในการจัดสไตล์รายการใน CSS:คุณสมบัติ list-style ผ่านคุณสมบัติย่อยแต่ละรายการ และคุณสมบัติ list-style shorthand คุณสมบัติย่อยของคุณสมบัติ list-style คือ:
  

  81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

  ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

  • list-style-type
  • รายการสไตล์ตำแหน่ง
  • list-style-image

  คุณสมบัติชวเลขแบบรายการเขียนเป็น:
  

  list-style:[list-style-type] [list-style-position] [list-style-image]; 

  เราจะหารือถึงวิธีการเพิ่มสีพื้นหลังในรายการและรายการด้วย

  ตัวอย่างรายการ HTML พื้นฐาน

  ขั้นแรก มาดูตัวอย่างรายการใน HTML สมมติว่าร้านเบเกอรี่ในท้องถิ่นขอให้เราสร้างหน้าเว็บที่มีรายการสูตรอาหารสำหรับใช้ในบ้านของลูกค้า
  

  นี่คือโค้ด HTML พื้นฐานที่เราจะใช้เพื่อกำหนดรายการของเรา:

   
  เค้กผีเสื้อ
   
  ช็อกโกแลตเทรย์เบค
   
  เค้กมะนาวปอนด์
   
  แป้งเค้กเนยถั่ว
   
  ช็อกโกแลตมัฟฟิน
  

  รายการของเราปรากฏดังนี้:
  

  

  รายการของเรามีห้ารายการ เราใส่รายการแต่ละรายการภายใน <li> แท็ก (“li” ย่อมาจาก “list item”) เราใส่ <li> . เหล่านี้ แท็กภายใน <ul> แท็ก <ul> แท็ก ระบุรายการที่ไม่เรียงลำดับ
  

  เนื่องจากนี่คือรายการที่ไม่เรียงลำดับ เว็บเบราว์เซอร์ของเราจึงวางสัญลักษณ์แสดงหัวข้อย่อยไว้หน้าแต่ละรายการในรายการ (หากเป็นรายการที่เรียงลำดับ เว็บเบราว์เซอร์ของเราจะวางค่าที่สั่งซื้อได้—โดยปกติคือตัวเลขหรือตัวอักษร—ก่อนแต่ละรายการในรายการ)
  

  ตอนนี้ มาสำรวจกันว่าเราจะจัดสไตล์รายการโดยใช้คุณสมบัติ list-style ได้อย่างไร

  รายการเครื่องหมายรายการ

  คุณสมบัติ list-style-type ใช้เพื่อระบุประเภทของ marker ที่ใช้สำหรับรายการในรายการ

  เครื่องหมายรายการแบบไม่เรียงลำดับ

  สมมติว่าร้านเบเกอรี่ขอให้เราแสดงรายการของพวกเขาด้วยสัญลักษณ์แสดงหัวข้อย่อยแบบวงกลมเทียบกับสัญลักษณ์แสดงหัวข้อย่อยแบบสี่เหลี่ยมที่อยู่ข้างหน้าแต่ละรายการ เราสามารถใช้รหัสต่อไปนี้เพื่อสร้างการออกแบบเหล่านี้สำหรับร้านเบเกอรี่:

  styles.cssli.circlebulletPoint { list-style-type:circle;}li.squarebulletPoint { list-style-type:square;}index.html
   
  เค้กผีเสื้อ
   
  ช็อกโกแลตเทรย์เบก
   
  เค้กมะนาวปอนด์
   
  แป้งขนมปังเนยถั่ว
   
  ช็อกโกแลตมัฟฟิน
  
   
  
   รหัสของเราส่งคืน:
   
    
  
   อย่างที่คุณเห็น รายการแรกของเราใช้รูปแบบเครื่องหมายสัญลักษณ์แสดงหัวข้อย่อยแบบวงกลม เราทำสิ่งนี้สำเร็จโดยกำหนดค่าคลาส “circlebulletPoint”—และด้วยเหตุนี้รูปแบบที่สอดคล้องกันของค่านั้น— ให้กับรายการแรกของเรา เรากำหนดค่าคลาส “squarebulletPoint” ให้กับรายการที่สองของเรา ดังนั้นเว็บเบราว์เซอร์จึงแสดงสัญลักษณ์แสดงหัวข้อย่อยแบบสี่เหลี่ยมก่อนรายการนั้น 
   
   
  
   มี list-style-types อื่นๆ ที่สามารถนำไปใช้กับรายการได้ ซึ่งได้แก่:
   
   
   
  แผ่นดิสก์
   
  วงกลม
   
  ทศนิยม
   
  ทศนิยมนำหน้าศูนย์
   
  ล่าง-โรมัน
   
  อัปเปอร์โรมัน
   
  ภาษากรีกตอนล่าง
   
  ล่าง-ละติน
   
  อัปเปอร์-ลาติน
   
  อาร์เมเนีย
   
  จอร์เจีย
   
  อัลฟาล่าง
   
  ไม่มี
   
   
  
   เราจะหารือเกี่ยวกับสิ่งเหล่านี้บางส่วนที่ใช้กับรายการสั่งซื้อในหัวข้อถัดไป
   
  เครื่องหมายรายการสั่งซื้อ
   
  
   รายการที่สั่งซื้อมีลักษณะเครื่องหมายรายการของตนเอง 
   
   
  
   สมมติว่าเราต้องการแสดงสูตรของเบเกอรี่ในรายการสั่งซื้อ เราต้องการดูว่ารายการของเรามีลักษณะอย่างไรโดยลำดับที่ทำเครื่องหมายด้วยอักษรตัวพิมพ์เล็กนำหน้าแต่ละรายการในรายการ และหน้าตาจะเป็นอย่างไรเมื่อใช้ตัวเลขโรมันตัวพิมพ์ใหญ่นำหน้าแต่ละรายการในรายการ เราสามารถใช้รหัสต่อไปนี้เพื่อทำงานนี้ให้สำเร็จ:
   
  styles.cssli.alpha { list-style-type:lower-alpha;}li.roman { list-style-type:upper-roman;}index.html
   
  Butterfly เค้ก
   
  ช็อกโกแลตเทรย์เบค
   
  เค้กมะนาวปอนด์
   
  แป้งเค้กเนยถั่ว
   
  ช็อกโกแลตมัฟฟิน
   
  
   รหัสของเราส่งคืน:
   
    
  
   ในตัวอย่างนี้ เราใช้รายการที่เรียงลำดับ (
  ) แทนรายการที่ไม่เรียงลำดับ ซึ่งช่วยให้เราสามารถสั่งซื้อรายการของเราด้วยตัวเลข (หรือตัวอักษร ฯลฯ) จากนั้น เราทำเครื่องหมายรายการแรกในรายการของเราด้วยตัวอักษรพิมพ์เล็กและรายการที่สองในรายการของเราด้วยตัวเลขโรมันตัวพิมพ์ใหญ่
   
  ลบการจัดรูปแบบตัวทำเครื่องหมายรายการเริ่มต้น
   
  
   มีคุณสมบัติ CSS สามประการที่เราสามารถใช้ในโค้ดของเราเพื่อลบลักษณะเริ่มต้นออกจากรายการ ได้แก่ list-style-type, margin และ padding
   
  การตั้งค่า list-style-type เป็น None
   
  
   หากเราไม่ต้องการให้มีสัญลักษณ์แสดงหัวข้อย่อยหรือตัวบ่งชี้ลำดับ (เช่น ตัวเลขหรือตัวอักษร) ก่อนรายการ เราสามารถตั้งค่าคุณสมบัติ list-style-type เป็น none ได้ ต่อไปนี้คือตัวอย่างการใช้คุณสมบัตินี้เพื่อลบสัญลักษณ์แสดงหัวข้อย่อยหรือตัวบ่งชี้ลำดับในรายการ:
   
  styles.cssul { list-style-type:none;}index.html
   
  เค้กผีเสื้อ
   
  ช็อกโกแลต Traybake
   
  เค้กมะนาวปอนด์
   
  ขนมปังเนยถั่ว
   
  ช็อกโกแลตมัฟฟิน
  
   
  
   รหัสของเราส่งคืน:
   
    
  
   รายการของเรายังคงมีโครงสร้างเป็นรายการ แต่เมื่อแสดงบนหน้าเว็บ รายการในรายการจะไม่มีเครื่องหมาย
   
  ตำแหน่งเครื่องหมาย
   
  
   คุณสมบัติ list-style-position ใช้เพื่อระบุตำแหน่งของตัวทำเครื่องหมายรายการในรายการ 
   
   
  
   มีสองตำแหน่งที่สามารถแสดงเครื่องหมายรายการสำหรับรายการ:ภายในและภายนอก หากเครื่องหมายรายการปรากฏขึ้นในรายการ ข้อความจะปรากฏถัดจากเครื่องหมายรายการโดยตรง หากเครื่องหมายรายการปรากฏนอกรายการ จะมีช่องว่างระหว่างเครื่องหมายรายการและรายการข้อความในรายการ 
   
   
  
   ต่อไปนี้คือตัวอย่างกฎ CSS สองตัวอย่างที่แสดงให้เห็นว่า list-style-position สามารถใช้ในทั้งสองสถานะนี้ได้อย่างไร:
   
  ul.a { รายการสไตล์ตำแหน่ง:ภายนอก;}ul.b { รายการสไตล์ตำแหน่ง:ภายใน}
   
  
   ในรายการแรกของเรา เราใช้ list-style-position:outside style นี่คือรูปแบบเริ่มต้นที่ใช้กับรายการ ดังนั้น หากเราไม่ได้ระบุตำแหน่งนี้หรือตำแหน่งรูปแบบรายการอื่นใดในกลุ่มโค้ดของเรา เบราว์เซอร์จะกำหนดตำแหน่งนี้โดยค่าเริ่มต้นสำหรับตัวทำเครื่องหมายรายการ ต่อไปนี้เป็นรหัสสำหรับรายการเบเกอรี่ของเราที่ใช้รูปแบบนี้:
   
   
  เค้กผีเสื้อ
   
  ช็อกโกแลตเทรย์เบค
   
  เค้กปอนด์มะนาว
   
  แป้งเค้กเนยถั่ว
   
  ช็อกโกแลตมัฟฟิน
  
   
  
   รหัสส่งคืน:
   
    
  
   ในรูปแบบนี้ เครื่องหมายรายการ (ในกรณีนี้คือสัญลักษณ์แสดงหัวข้อย่อย) จะปรากฏนอกรายการของเรา 
   
   
  
   ในรายการที่สอง เราได้ระบุตำแหน่งของเครื่องหมายรายการในรายการของเราเป็น "ภายใน" ต่อไปนี้เป็นรหัสสำหรับรายการเบเกอรี่ของเราที่ใช้รูปแบบนี้:
   
   
  เค้กผีเสื้อ
   
  ช็อกโกแลตเทรย์เบค
   
  เค้กปอนด์มะนาว
   
  แป้งเค้กเนยถั่ว
   
  ช็อกโกแลตมัฟฟิน
  
   
  
   รหัสส่งคืน:
   
    
  
   เป็นเรื่องยากที่จะบอก แต่ตำแหน่งของตัวทำเครื่องหมายรายการของเราอยู่นอกรายการ
   
  ตัวทำเครื่องหมายรูปภาพ
   
  
   รายการมักใช้เครื่องหมายที่กำหนดเองกับรูปภาพ หากคุณต้องการตั้งค่าเครื่องหมายสำหรับรายการเป็นรูปภาพ คุณสามารถใช้คุณสมบัติ CSS list-style-image 
   
   
  
   สมมติว่าร้านเบเกอรี่ขอให้เราเปลี่ยนเครื่องหมายรายการในรายการเป็นรูปภาพเค้ก (แทนที่จะเป็นสัญลักษณ์แสดงหัวข้อย่อย ตัวเลข ฯลฯ) เราสามารถใช้รหัสต่อไปนี้เพื่อทำงานนี้ให้สำเร็จ:
   
  styles.cssul { list-style-image:url("https://img.icons8.com/small/16/000000/cake.png");}index.html
   
  เค้กผีเสื้อ 
   
  ช็อกโกแลตเทรย์เบค
   
  เค้กมะนาวปอนด์
   
  แป้งขนมปังเนยถั่ว
   
  ช็อกโกแลตมัฟฟิน
  
   
  
   รหัสของเราส่งคืน:
   
    
  
   อย่างที่คุณเห็น แทนที่จะใช้ตัวทำเครื่องหมายรายการเริ่มต้น เราใช้ของเราเอง ในกรณีนี้ เครื่องหมายรายการของเราคือรูปเค้ก
   
  รายการคุณสมบัติชวเลขคุณสมบัติ
   
  
   เราได้พูดถึงคุณสมบัติย่อยของคุณสมบัติ list-style แล้ว สิ่งเหล่านี้ช่วยให้เรานำสไตล์แต่ละแบบมาใช้กับรายการของเราได้ 
   
   
  
   อย่างไรก็ตาม มีวิธีการจัดสไตล์ที่มีประสิทธิภาพมากกว่า แทนที่จะใช้พร็อพเพอร์ตี้ย่อยแต่ละรายการเพื่อจัดรูปแบบรายการ เราสามารถใช้คุณสมบัติชวเลขแบบรายการได้ นี่คือไวยากรณ์สำหรับคุณสมบัติชวเลขแบบรายการ:
   
  ul { list-style:[list-style-type] [list-style-position] [list-style-image];
   
  
   ลำดับของค่าที่ระบุข้างต้นคือลำดับที่คุณต้องใช้กับคุณสมบัติชวเลขแบบรายการ หากคุณไม่ได้ระบุค่าสำหรับคุณสมบัติย่อยอย่างใดอย่างหนึ่งในสามคุณสมบัติย่อยที่ประกอบเป็นไวยากรณ์ชวเลข เว็บเบราว์เซอร์จะใช้ค่าเริ่มต้นของคุณสมบัติย่อยนั้น 
   
   
  
   สมมติว่าเราต้องการจัดรูปแบบรายการสูตรขนมอบด้วยภาพเค้ก และย้ายเครื่องหมายรายการแต่ละรายการไปที่ด้านนอกของรายการ เราสามารถทำได้โดยใช้รหัสนี้:
   
  styles.cssul { list-style:url ภายนอก('https://img.icons8.com/small/16/000000/cake.png');}index.html
   
  Butterfly Cakes
   
  ช็อคโกแลตถาดอบ
   
  เค้กมะนาวปอนด์
   
  แป้งเค้กเนยถั่ว
   
  ช็อกโกแลตมัฟฟิน
  
   
  
   รหัสของเราส่งคืน:
   
    
  
   รายการของเราตอนนี้ใช้ภาพเค้กสำหรับเครื่องหมายแต่ละรายการ นอกจากนี้ เครื่องหมายของรายการแต่ละรายการยังมีการจัดรูปแบบนอกรายการของเรา 
   
  สีของรายการ CSS
   
  
   เมื่อคุณออกแบบรายการ คุณอาจตัดสินใจว่าต้องการให้รายการแสดงสีพื้นหลัง 
   
   
  
   สมมติว่าร้านเบเกอรี่ขอให้เราตั้งค่าสีพื้นหลังของรายการทั้งหมดเป็นสีฟ้าอ่อน และใช้สีพื้นหลังสีชมพูสำหรับแต่ละรายการในรายการ เราสามารถใช้คุณสมบัติพื้นหลัง CSS เพื่อทำงานนี้ให้สำเร็จ เช่น:
   
  ul { พื้นหลัง:สีฟ้าอ่อน; padding:10px;}ul li { พื้นหลัง:สีชมพู; ระยะขอบ:10px;}
   
  
   รหัสของเราส่งคืน:
   
   
  เค้กผีเสื้อ
   
  ช็อกโกแลตเทรย์เบค
   
  เค้กมะนาวปอนด์
   
  แป้งเค้กเนยถั่ว
   
  ช็อกโกแลตมัฟฟิน
   
  
   ในโค้ดของเรา เราใช้สีพื้นหลังสีฟ้าอ่อนโดยใช้คุณสมบัติพื้นหลังกับ <ul> องค์ประกอบซึ่งสร้างรายการที่ไม่เรียงลำดับ นอกจากนี้เรายังให้ <ul> องค์ประกอบช่องว่างภายใน 10px โดยใช้คุณสมบัติช่องว่างภายใน 
   
    
  
   นอกจากนี้เรายังใช้พื้นหลังสีชมพูเพื่อสร้างระยะขอบ 10px รอบแต่ละรายการ 
   
   
  
   เราทำสิ่งนี้สำเร็จโดยใส่สไตล์ของเราไว้ในตัวเลือก “ul li” ดังที่คุณเห็นด้านบน ตัวเลือกนี้ระบุว่าควรใช้พื้นหลังสีชมพูและระยะขอบ 10px กับ <li> . ทั้งหมด แท็กที่อยู่ภายใน <ul> แท็ก.
   
  บทสรุป
   
  
   เมื่อคุณทำงานกับรายการ HTML คุณสามารถใช้ CSS เพื่อนำสไตล์ที่กำหนดเองไปใช้กับรายการเหล่านั้นเพื่อให้ดูสวยงามยิ่งขึ้น คุณสมบัติ list-style ใช้เพื่อนำสไตล์ไปใช้กับ (หรือลบสไตล์ออกจาก) รายการใน CSS 
   
   
  
   กวดวิชานี้กล่าวถึงตัวอย่างวิธีใช้คุณสมบัติ CSS list-style และคุณสมบัติย่อยสามรายการ เรายังกล่าวถึงวิธีตั้งค่าสีพื้นหลังสำหรับรายการและรายการต่างๆ ภายในรายการ 
   
   
  
   ตอนนี้คุณมีความรู้ที่จำเป็นในการเริ่มจัดรูปแบบรายการใน CSS อย่างมืออาชีพแล้ว!