CSS รายการ
รายการลำดับที่ไม่มีลำดับ:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
รายการลำดับที่มีลำดับ:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
รายการลำดับ HTML และรายการลักษณะ CSS
ใน HTML มีรายการลำดับสองประเภทหลัก:
- รายการลำดับที่ไม่มีลำดับ (<ul>) - ลำดับของรายการลำดับเป็นลูกฟิล์ม
- รายการลำดับที่มีลำดับ (<ol>) - ลำดับของรายการลำดับเป็นตัวเลขหรือตัวอักษร
รายการลักษณะ CSS รายการทำให้คุณสามารถ:
- ตั้งลูกฟิล์มที่แตกต่างกันสำหรับรายการลำดับมีลำดับ
- ตั้งลูกฟิล์มที่แตกต่างกันสำหรับรายการลำดับไม่มีลำดับ
- ตั้งรูปภาพเป็นลูกฟิล์ม
- เพิ่มสีพื้นหลังสำหรับรายการและรายการลำดับ
ลูกฟิล์มที่แตกต่างกัน
list-style-type รายการลักษณะนี้กำหนดชนิดของลูกฟิล์ม
ตัวอย่างด้านล่างแสดงบางรายการลูกฟิล์มที่สามารถใช้ได้:
ตัวอย่าง
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
หมายเหตุ:บางค่าใช้สำหรับรายการลำดับไม่มีลำดับ และบางค่าใช้สำหรับรายการลำดับมีลำดับ
รูปภาพเป็นลูกฟิล์ม
list-style-image รายการลักษณะนี้กำหนดรูปภาพเป็นลูกฟิล์ม
ตัวอย่าง
ul {
list-style-image: url('sqpurple.gif');
}
ตำแหน่งลูกฟิล์ม
list-style-position รายการลักษณะนี้กำหนดตำแหน่งของลูกฟิล์ม (ลำดับ)
"list-style-position: outside;" แสดงว่าจุดของรายการลำดับจะอยู่นอกจากรายการลำดับ ในแต่ละบรรทัดของรายการลำดับจะปรับตัวตรงขึ้นด้วยศูนย์ตรงขึ้น นี่เป็นการปรับระบุโดยเริ่มต้น:
- Coffee - สเปรย์ดื่มที่ทำจากกาแฟที่ทำด้วยการต้ม
- Tea
- Coca-cola
"list-style-position: inside;" แสดงว่าสัญลักษณ์ลูกฟ้าจะอยู่ด้านในรายการ ตั้งแต่นั้นมันจะกลายเป็นส่วนหนึ่งของรายการ และขยายของข้อความในต้น
- Coffee - สเปรย์ดื่มที่ทำจากกาแฟที่ทำด้วยการต้ม
- Tea
- Coca-cola
ตัวอย่าง
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
ลบการตั้งค่าเริ่มต้น
list-style-type:none คุณสมบัตินี้ก็สามารถใช้เพื่อลบสัญลักษณ์/ลูกฟ้า โปรดจำเป็นที่จะลบส่วนนี้ ให้เพิ่มเข้าไปใน <ul> หรือ <ol> margin:0 และ padding:0 :
ตัวอย่าง
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
รายชื่อ - คุณสมบัติย่อย
list-style คุณสมบัตินี้เป็นคุณสมบัติย่อย มันใช้เพื่อตั้งค่าทั้งหมดของคุณสมบัติรายชื่อลำดับในการประกาศหนึ่ง
ตัวอย่าง
ul {
list-style: square inside url("sqpurple.gif");
}
เมื่อใช้คุณสมบัติย่อย ลำดับของค่าของคุณสมบัติคือ:
list-style-type(ถ้ากำหนดคุณสมบัติ list-style-image และรูปภาพไม่สามารถแสดงได้ด้วยเหตุใดๆ จะแสดงค่าของคุณสมบัตินี้)list-style-position(กำหนดสัญลักษณ์รายการที่จะแสดงในภายในหรือภายนอกกระแสเนื้อหา)list-style-image(กำหนดรูปภาพเป็นสัญลักษณ์รายการ)
ถ้าขาดค่าของคุณสมบัติหนึ่งในของคุณสมบัติดังกล่าว จะใช้ค่าเริ่มต้นของคุณสมบัติที่ขาด (ถ้ามี)
ตั้งค่าสีสไตล์รายชื่อลำดับ
เรายังสามารถตั้งค่าสีเพื่อตั้งรูปแบบรายชื่อลำดับ ทำให้มันดูมากไปขนาด
รูปแบบที่เพิ่มเข้าไปใน <ol> หรือ <ul> จะส่งผลกระทบต่อรายชื่อลำดับทั้งหมด และรูปแบบที่เพิ่มเข้าไปใน <li> จะส่งผลกระทบต่อรายชื่อลำดับแต่ละราย:
ตัวอย่าง
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
margin: 5px;
}
ผลลัพธ์:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
ตัวอย่างเพิ่มเติม
- รายชื่อลำดับที่มีเส้นขอบด้านซ้ายสีแดงแบบที่กำหนดเอง
- ตัวอย่างนี้แสดงวิธีการสร้างรายชื่อลำดับที่มีเส้นขอบด้านซ้ายสีแดง
- รายชื่อลำดับเส้นขอบความกว้างทั้งหมด
- ตัวอย่างนี้แสดงวิธีการที่จะสร้างรายการแบบเส้นทางที่ไม่มีลูกฟังก์ชันและมีขอบเขต
- รายการทั้งหมดของสัญลักษณ์รายการ
- ตัวอย่างนี้แสดงวิธีการที่จะสร้างรายการแบบเส้นทางที่ไม่มีลูกฟังก์ชัน
ขอบเขตทั้งหมดของ CSS ตัวแปรรายการ
| ขอบเขต | คำอธิบาย |
|---|---|
| list-style | แบบง่าย |
| list-style-image | กำหนดรูปภาพเป็นสัญลักษณ์รายการ |
| list-style-position | กำหนดตำแหน่งของสัญลักษณ์รายการ (ลูกฟังก์ชัน) |
| list-style-type | กำหนดชนิดของสัญลักษณ์รายการ |
