รายการ CSS
รายการที่ไม่เรียงลำดับ:
- กาแฟ
- ชา
- โคก
- กาแฟ
- ชา
- โคก
รายการสั่งซื้อ:
- กาแฟ
- ชา
- โคก
- กาแฟ
- ชา
- โคก
รายการ 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
ระบุตำแหน่งของเครื่องหมายรายการ (bullet points)
"list-style-position: ภายนอก" หมายความว่าสัญลักษณ์แสดงหัวข้อย่อยจะอยู่นอกรายการ จุดเริ่มต้นของแต่ละบรรทัดของรายการจะถูกจัดตำแหน่งในแนวตั้ง นี่เป็นค่าเริ่มต้น:
- กาแฟ - เครื่องดื่มชงจากเมล็ดกาแฟคั่ว...
- ชา
- โคก
"รายการสไตล์ตำแหน่ง: ภายใน;" หมายความว่าสัญลักษณ์แสดงหัวข้อย่อยจะอยู่ภายในรายการ เนื่องจากเป็นส่วนหนึ่งของรายการ รายการนั้นจะเป็นส่วนหนึ่งของข้อความและกดข้อความในตอนเริ่มต้น:
- กาแฟ - เครื่องดื่มชงจากเมล็ดกาแฟคั่ว...
- ชา
- โคก
ตัวอย่าง
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
ลบการตั้งค่าเริ่มต้น
คุณสมบัติlist-style-type:none
นี้ยังสามารถใช้เพื่อลบเครื่องหมาย/สัญลักษณ์แสดงหัวข้อย่อย โปรดทราบว่ารายการยังมีระยะขอบและช่องว่างภายในเริ่มต้น หากต้องการลบสิ่งนี้ ให้เพิ่มmargin:0
และpadding:0
ใน <ul> หรือ <ol>:
ตัวอย่าง
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
คุณสมบัติรายการ CSS ทั้งหมด
Property | Description |
---|---|
list-style | Sets all the properties for a list in one declaration |
list-style-image | Specifies an image as the list-item marker |
list-style-position | Specifies the position of the list-item markers (bullet points) |
list-style-type | Specifies the type of list-item marker |