CSS รายการ

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

CSS รายการ

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

เพราะรูปแบบลิสต์มีหลายรูปแบบ ดังนั้นมันเป็นสิ่งที่สำคัญมาก ดังนั้นเรื่องที่ CSS มีรูปแบบลิสต์ที่ไม่มีมากเป็นการขาดแคลนมาก

รูปแบบลิสต์

ในการสัมพันธ์รูปแบบลิสต์ วิธีที่ง่ายที่สุด (และที่สนับสนุนอย่างเต็มที่) คือการเปลี่ยนรูปแบบสัญลักษณ์

ตัวอย่าง ในลิสต์ออนไลน์ สัญลักษณ์รายการ (marker) จะปรากฏข้างขวางของรายการทุกตัว ในลิสต์ออร์เดอร์ด สัญลักษณ์อาจเป็นตัวอักษร ตัวเลข หรือสัญลักษณ์ในระบบนับใด ๆ

เพื่อเปลี่ยนรูปแบบสัญลักษณ์ที่ใช้ในรายการ สามารถใช้คุณสมบัติ list-style-type:

ul {list-style-type : square}

การประกาศดังกล่าวจะทำให้รายการในลิสต์ออนไลน์มีสัญลักษณ์เป็นลูกเข็ม

ภาพสัญลักษณ์รายการ

บางครั้ง สัญลักษณ์ทั่วไปไม่เพียงพอ คุณอาจต้องการใช้ภาพเป็นสัญลักษณ์สำหรับแต่ละสัญลักษณ์ ซึ่งสามารถทำได้ด้วย list-style-image โดยคุณสมบัตินี้ทำให้

ul li {list-style-image : url(xxx.gif)}

แค่ใช้ค่า url() แบบเรียบง่ายก็สามารถใช้ภาพเป็นสัญลักษณ์

ตำแหน่งสัญลักษณ์ลิสต์

CSS2.1 สามารถระบุว่าสัญลักษณ์ที่แสดงในลิสต์อยู่นอกหรือในตัวรายการ list-style-position เสร็จแล้ว

รูปแบบลิสต์ย่อ

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

li {list-style : url(example.gif) square inside}

ค่าของ list-style สามารถเรียกด้วยลำดับที่ใดก็ได้ และค่าทั้งหมดสามารถละเลยได้ โดยเดียวกับที่มีค่าเดียวก็จะเติมค่าเริ่มต้น

ตัวอย่าง CSS ลิสต์

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

CSS คุณสมบัติรายการ (list)

คุณสมบัติ คำอธิบาย
list-style รูปแบบที่ย่อ
list-style-image ตั้งค่ารูปภาพเป็นตัวอักษรที่ใช้ในรายการ
list-style-position ตั้งค่าตำแหน่งรูปแบบการที่ตัวอักษรจะตั้งตำแหน่ง
list-style-type ตั้งค่ารูปแบบการที่ตัวอักษรจะตั้งตำแหน่ง
marker-offset