รายการ

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

<ul>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ul>

การสร้างรายการ

รายการก่อนหน้าเริ่มต้นด้วยองค์ประกอบเชิงความหมายหรือ <ul> ที่มีรายการในรายการซื้อของใช้ทั่วไป (องค์ประกอบ <li>) เป็นรายการย่อย หากตรวจสอบองค์ประกอบ <li> แต่ละรายการ คุณจะเห็นว่ามี display: list-item ทั้งหมด ซึ่งเป็นเหตุผลที่เบราว์เซอร์แสดงผล ::marker โดยค่าเริ่มต้น

li {
  display: list-item;
}

นอกจากนี้ยังมีรายการอีก 2 ประเภท

คุณสร้างรายการที่เรียงลําดับได้ด้วย <ol> ซึ่งในกรณีนี้รายการในลิสต์จะแสดงตัวเลขเป็น ::marker

<ol>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ol>

และรายการคำอธิบายสร้างขึ้นด้วย <dl> แต่รายการประเภทนี้ไม่ได้ใช้องค์ประกอบรายการย่อย <li>

<dl>
  <dt>oat milk</dt>
  <dd>- non dairy trendy drink</dd>
  <dt>cereal</dt>
  <dd>- breakfast food</dd>
</dl>

รูปแบบรายการ

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

พร็อพเพอร์ตี้รายการมี 3 รายการที่คุณสามารถใช้เพื่อจัดรูปแบบตัวอย่าง ได้แก่ list-style-position, list-style-image และ list-style-type

list-style-position

list-style-position ช่วยให้คุณย้ายหัวข้อย่อยไปยัง inside หรือ outside เนื้อหาของรายการได้ outside เริ่มต้นหมายความว่าหัวข้อย่อยจะไม่รวมอยู่ในเนื้อหาของรายการย่อย ส่วน inside จะย้ายองค์ประกอบแรกในเนื้อหาของรายการย่อย

รายการที่มีทั้ง ::marker ภายนอกและภายใน ซึ่งแสดงให้เห็นว่า ::marker ภายนอก (ค่าเริ่มต้น) ไม่ได้อยู่ในรายการย่อยและอยู่ภายในกล่องเนื้อหาของรายการย่อย

list-style-image

list-style-image ช่วยให้คุณแทนที่หัวข้อย่อยของรายการด้วยรูปภาพได้ ซึ่งจะช่วยให้คุณตั้งค่ารูปภาพ เช่น url หรือ none เพื่อทําให้หัวข้อเป็นรูปภาพ, svg หรือ gif ได้ นอกจากนี้ คุณยังใช้สื่อประเภทใดก็ได้หรือแม้แต่ URI ข้อมูลก็ได้

มาดูวิธีเพิ่มรูปภาพสินค้าแต่ละรายการในร้านขายของใช้ทั่วไปเป็นlist-style-imageกัน

list-style-type

ตัวเลือกสุดท้ายคือการจัดรูปแบบ list-style-type ซึ่งจะเปลี่ยนหัวข้อย่อยเป็นคีย์เวิร์ดรูปแบบที่คุ้นเคย สตริงที่กำหนดเอง อีโมจิ และอื่นๆ คุณดูประเภทรูปแบบรายการทั้งหมดที่เป็นไปได้ได้ที่นี่

list-style ข้อความสั้นๆ

เมื่อคุณมีพร็อพเพอร์ตี้แต่ละรายการเหล่านี้แล้ว คุณจะใช้ตัวย่อ list-style เพื่อตั้งค่ารูปแบบรายการทั้งหมดในบรรทัดเดียวได้ ดังนี้

list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>

list-style ช่วยให้คุณประกาศการผสมผสานพร็อพเพอร์ตี้ list-style 1, 2 หรือ 3 รายการตามลำดับใดก็ได้ หากตั้งค่าทั้ง list-style-type และ list-style-image ระบบจะใช้ list-style-type เป็นภาพสำรองหากรูปภาพไม่พร้อมใช้งาน

/* type */
list-style: square;

/* image */
list-style: url('../img/shape.png');

/* position */
list-style: inside;

/* type | position */
list-style: georgian inside;

/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;

/* Keyword value */
list-style: none;

/* Global values */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: unset;

นี่เป็นพร็อพเพอร์ตี้ที่ใช้กันมากที่สุดของรูปแบบรายการที่กล่าวถึงในส่วนนี้ การใช้งานที่พบบ่อยอย่างหนึ่งคือ list-style: none เพื่อซ่อนสไตล์เริ่มต้น สไตล์เริ่มต้นมาจากเบราว์เซอร์ และคุณมักจะเห็นสไตล์ชีตที่รีเซ็ตนำสไตล์รายการออก เช่น ระยะขอบและระยะห่าง คุณยังใช้ตัวย่อนี้เพื่อตั้งค่าสไตล์ได้ด้วย เช่น list-style: square inside;

จนถึงตอนนี้ ตัวอย่างต่างๆ มุ่งเน้นที่การจัดสไตล์รายการทั้งหมดและรายการในรายการ แต่จะมีแนวทางที่ละเอียดยิ่งขึ้นไหม

::marker องค์ประกอบจำลอง

องค์ประกอบเครื่องหมาย list-item คือสัญลักษณ์หัวข้อ ขีดกลาง หรือตัวเลขโรมันที่ช่วยระบุรายการแต่ละรายการในรายการ

รายการที่มี 3 รายการ ซึ่งแสดงให้เห็นว่าหัวข้อย่อยแต่ละรายการคือองค์ประกอบจำลอง ::marker

หากตรวจสอบรายการใน DevTools คุณจะเห็นองค์ประกอบ ::marker สำหรับรายการแต่ละรายการ แม้ว่าจะไม่ได้ประกาศรายการใดใน HTML ก็ตาม หากตรวจสอบ ::marker เพิ่มเติม คุณจะเห็นการจัดรูปแบบเริ่มต้นของเบราว์เซอร์

::marker {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: start !important;
}

เมื่อคุณประกาศรายการ แต่ละรายการจะมีเครื่องหมายกำกับ แม้ว่าจะไม่มีหัวข้อย่อยหรือตัวเลขโรมันใน HTML ก็ตาม องค์ประกอบนี้เป็นองค์ประกอบจำลองเนื่องจากเบราว์เซอร์สร้างองค์ประกอบนี้ให้คุณ และมี API การจัดรูปแบบแบบจำกัดเพื่อกำหนดเป้าหมาย ดูข้อมูลเพิ่มเติมเกี่ยวกับโครงสร้างของหัวข้อย่อย CSS ::marker มีการรองรับแบบจำกัดใน Safari

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

ในโมเดลเลย์เอาต์ CSS เครื่องหมายรายการในลิสต์จะแสดงด้วยกล่องเครื่องหมายที่เชื่อมโยงกับรายการในลิสต์แต่ละรายการ กล่องเครื่องหมายคือคอนเทนเนอร์ที่มักมีสัญลักษณ์แสดงหัวข้อย่อยหรือตัวเลข

หากต้องการจัดรูปแบบกล่องเครื่องหมาย ให้ใช้ตัวเลือก ::marker ซึ่งจะช่วยให้คุณเลือกเฉพาะเครื่องหมายแทนการจัดสไตล์ตามรายการทั้งหมดได้

รูปแบบเครื่องหมาย

เมื่อเลือกเครื่องหมายแล้ว มาดูพร็อพเพอร์ตี้การจัดสไตล์ที่ใช้ได้กับตัวเลือกนี้กัน ดูข้อมูลเพิ่มเติมเกี่ยวกับหัวข้อย่อยที่กำหนดเองด้วย CSS ::marker ได้ใน web.dev

พร็อพเพอร์ตี้ ::marker ของ CSS ที่อนุญาตมีค่อนข้างมาก ดังนี้

  • animation-*
  • transition-*
  • color
  • direction
  • font-*
  • content
  • unicode-bidi
  • white-space

ประเภทดิสเพลย์

พร็อพเพอร์ตี้ list-style และ ::marker ทั้งหมดของเราจะกำหนดสไตล์ให้กับองค์ประกอบ <li> ได้เนื่องจากมีค่าการแสดงผลเริ่มต้นเป็น list-item นอกจากนี้ คุณยังเปลี่ยนสิ่งที่ไม่ใช่ <li> ให้เป็นรายการในลิสต์ได้ด้วย

โดยเพิ่มพร็อพเพอร์ตี้ display: list-item ตัวอย่างการใช้ display: list-item คือในกรณีที่คุณต้องการหัวข้อที่มีหัวข้อย่อยแบบแขวนเพื่อให้คุณเปลี่ยนหัวข้อย่อยเป็นอย่างอื่นได้โดยใช้ ::marker ตัวอย่างต่อไปนี้แสดงส่วนหัวที่ใช้ display: list-item เพื่อจัดสไตล์ โดยมีรายการที่ใช้มาร์กอัปรายการที่ถูกต้อง

แม้ว่าคุณจะเปลี่ยนทุกอย่างให้เป็นมุมมองรายการด้วย display ได้ แต่ไม่ควรใช้แทนการใช้มาร์กอัปรายการที่ถูกต้อง หากเนื้อหาที่คุณจัดสไตล์เป็นรายการจริงๆ การเปลี่ยนลักษณะที่ปรากฏของรายการเป็นรายการในลิสต์จะไม่เปลี่ยนวิธีที่บริการการช่วยเหลือพิเศษอ่านและจดจำรายการดังกล่าว ดังนั้นรายการดังกล่าวจะไม่ได้รับการอ่านเป็นรายการในลิสต์สำหรับโปรแกรมอ่านหน้าจอหรืออุปกรณ์เปลี่ยน คุณควรใช้มาร์กอัปเชิงความหมายและสร้างรายการด้วย <li> ทุกครั้งที่ทำได้

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับลิสต์

องค์ประกอบที่อยู่ก่อนหน้ารายการในลิสต์เรียกว่า

::marker
::pencil
::bullet
::counter

รายการ HTML มี 3 ประเภท ได้แก่

<li>
<ul>
<dl>
<ol>
<list>
<lo>

รูปแบบใด 2 รูปแบบในรายการนี้จะนํารูปแบบไปใช้กับ ::marker

color
background-color
display
transition

แหล่งข้อมูล