พอดแคสต์ CSS - 030: รายการ
ลองนึกภาพว่าคุณมีสินค้ามากมายที่วางแผนจะซื้อระหว่างการเดินทางซื้อของเข้าบ้านครั้งถัดไป วิธีหนึ่งที่ใช้บ่อยในการแสดงข้อมูลนี้คือรายการ แต่คุณจะเพิ่มการจัดรูปแบบให้กับรายการของที่ต้องซื้อได้อย่างไร
<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>
ลักษณะของรายการ
เมื่อทราบวิธีสร้างรายการแล้ว คุณก็สามารถกำหนดรูปแบบได้ พร็อพเพอร์ตี้ CSS รายการแรกที่ค้นพบคือพร็อพเพอร์ตี้ที่ใช้กับทั้งรายการ
พร็อพเพอร์ตี้รูปแบบรายการที่คุณใช้จัดรูปแบบตัวอย่างได้มีอยู่ 3 อย่าง ได้แก่ list-style-position
, list-style-image
และ list-style-type
list-style-position
list-style-position
ช่วยให้คุณสามารถย้ายสัญลักษณ์หัวข้อย่อยไปยัง inside
หรือ outside
เนื้อหาของรายการได้ ค่าเริ่มต้น outside
หมายความว่าหัวข้อย่อยจะไม่รวมอยู่ในเนื้อหารายการ ขณะที่ inside
ย้ายองค์ประกอบแรกไปยังเนื้อหาของรายการ
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
คือสัญลักษณ์หัวข้อย่อย ขีดกลาง หรือตัวเลขโรมันที่ช่วยระบุแต่ละรายการในลิสต์
หากตรวจสอบรายการในเครื่องมือสำหรับนักพัฒนาเว็บ คุณจะเห็นองค์ประกอบ ::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 ได้
พร็อพเพอร์ตี้ CSS ::marker
ที่ได้รับอนุญาตมีเพียงไม่กี่รายการดังนี้
animation-*
transition-*
color
direction
font-*
content
unicode-bidi
white-space
ประเภทดิสเพลย์
พร็อพเพอร์ตี้ list-style
และ ::marker
ทั้งหมดรู้ว่าควรจัดสไตล์องค์ประกอบ <li>
เพราะองค์ประกอบเหล่านี้มีค่าแสดงเริ่มต้นของรายการในลิสต์ คุณยังสามารถเพิ่มสิ่งที่ไม่ใช่ <li>
ลงในรายการได้อีกด้วย
ซึ่งทําได้โดยการเพิ่มพร็อพเพอร์ตี้ display: list-item
ตัวอย่างหนึ่งของการใช้ display: list-item
คือหากต้องการใช้สัญลักษณ์แสดงหัวข้อย่อยในส่วนหัว คุณสามารถเปลี่ยนเป็นอย่างอื่นได้ด้วย ::marker
ตัวอย่างต่อไปนี้แสดงส่วนหัวที่ใช้ display: list-item
เพื่อวัตถุประสงค์ในการจัดรูปแบบ โดยมีรายการที่ใช้มาร์กอัปรายการที่ถูกต้อง
แม้ว่าคุณจะเปลี่ยนทุกอย่างให้เป็นมุมมองรายการด้วย display
ได้ แต่คุณไม่ควรใช้สิ่งนี้แทนมาร์กอัปรายการที่ถูกต้อง แต่จริงๆ แล้วเนื้อหาที่คุณกำลังจัดรูปแบบเป็นรายการ การเปลี่ยนลักษณะที่ปรากฏของรายการเป็นรายการในลิสต์จะไม่เปลี่ยนแปลงวิธีที่บริการช่วยเหลือพิเศษอ่านและจดจำรายการดังกล่าว ดังนั้นระบบจะไม่อ่านรายการนี้เป็นรายการในลิสต์ในโปรแกรมอ่านหน้าจอหรือเปลี่ยนอุปกรณ์ คุณควรใช้มาร์กอัปที่สื่อความหมายและสร้างรายการด้วย <li>
ทุกครั้งที่ทำได้
ตรวจสอบความเข้าใจของคุณ
ทดสอบความรู้เกี่ยวกับรายการ
องค์ประกอบที่อยู่หน้ารายการจะเรียกว่า
รายการ HTML มีอยู่ 3 ประเภท ได้แก่
<dl>
<lo>
<ol>
<li>
<ul>
<list>
รูปแบบ 2 ข้อใดในรายการนี้ที่จะนำรูปแบบไปใช้กับ ::marker
transition
background-color
color
display