คุณสมบัติ list-style-type

คุณสมบัติ list-style-type ช่วยให้ สำหรับรายการ ul แทนที่จะเป็นมาร์กเกอร์แบบจุดสามารถเปลี่ยนเป็นสี่เหลี่ยมจัตุรัสหรือ วงกลมได้ สำหรับรายการ ol แทนที่จะเป็นตัวเลขธรรมดาสามารถใช้ตัวเลขโรมัน การนับเลขแบบตัวอักษร: ละตินหรือกรีกได้

ไวยากรณ์

ตัวเลือก {
	list-style-type: ค่า;
}

ค่าสำหรับ ul

ค่า	คำอธิบาย
`circle`	สร้างมาร์กเกอร์เป็นวงกลมกลวง
`disc`	สร้างมาร์กเกอร์เป็นวงกลมทึบ
`square`	สร้างมาร์กเกอร์เป็นสี่เหลี่ยมจัตุรัส
`none`	ลบมาร์กเกอร์ออก

ค่าเริ่มต้น: disc

ค่าสำหรับ ol

ค่า	คำอธิบาย
`armenian`	การนับเลขแบบอาร์เมเนียดั้งเดิม
`decimal`	ตัวเลขอารบิก
`decimal-leading-zero`	ตัวเลขอารบิกที่มีศูนย์นำหน้าสำหรับตัวเลขที่น้อยกว่าสิบ
`georgian`	การนับเลขแบบจอร์เจียนดั้งเดิม
`lower-alpha`	ตัวอักษรละตินพิมพ์เล็ก
`lower-greek`	ตัวอักษรกรีกพิมพ์เล็ก
`lower-latin`	ค่านี้เหมือนกับ lower-alpha
`lower-roman`	ตัวเลขโรมันพิมพ์เล็ก
`upper-alpha`	ตัวอักษรละตินพิมพ์ใหญ่
`upper-latin`	ค่านี้เหมือนกับ upper-alpha
`upper-roman`	ตัวเลขโรมันพิมพ์ใหญ่
`none`	ลบมาร์กเกอร์ออก

ค่าเริ่มต้น: decimal

ตัวอย่าง

<ul>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
</ul>

ul {
	list-style-type: disc;
}

ตัวอย่าง

<ul>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
</ul>

ul {
	list-style-type: circle;
}

ตัวอย่าง

<ul>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
</ul>

ul {
	list-style-type: square;
}

ตัวอย่าง

<ul>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
</ul>

ul {
	list-style-type: none;
}

ตัวอย่าง

<ol>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
</ol>

ol {
	list-style-type: decimal;
}

ตัวอย่าง

<ol>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
</ol>

ol {
	list-style-type: armenian;
}

ตัวอย่าง

<ol>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
</ol>

ol {
	list-style-type: decimal-leading-zero;
}

ตัวอย่าง

<ol>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
</ol>

ol {
	list-style-type: georgian;
}

ตัวอย่าง

<ol>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
</ol>

ol {
	list-style-type: lower-alpha;
}

ตัวอย่าง

<ol>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
</ol>

ol {
	list-style-type: lower-greek;
}

ตัวอย่าง

<ol>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
</ol>

ol {
	list-style-type: lower-latin;
}

ตัวอย่าง

<ol>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
</ol>

ol {
	list-style-type: lower-roman;
}

ตัวอย่าง

<ol>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
</ol>

ol {
	list-style-type: upper-alpha;
}

ตัวอย่าง

<ol>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
</ol>

ol {
	list-style-type: upper-roman;
}

ตัวอย่าง

ตัวอย่างนี้แสดงว่าคุณสมบัติ color มีผลไม่เพียงแต่ต่อสีของข้อความ แต่ยังมีผลต่อ สีของมาร์กเกอร์ด้วย:

<ul>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
	<li>รายการ</li>
</ul>

ul {
	list-style-type: disc;
	color: red;
}

ดูเพิ่มเติม

คุณสมบัติ list-style-image,
ซึ่งกำหนดมาร์กเกอร์เป็นรูปภาพที่กำหนด
คุณสมบัติ list-style-position,
ซึ่งกำหนดตำแหน่งของมาร์กเกอร์
คุณสมบัติ list-style,
ซึ่งเป็นคุณสมบัติแบบย่อสำหรับมาร์กเกอร์