- กาแฟ
- ชา
- โคคาโคลา
- กาแฟ
- ชา
- โคคาโคลา
รายการ 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;
} ลองตัวเอง» หมายเหตุ: บางส่วนของค่าที่มีการเรียงลำดับรายการและบางส่วนสำหรับรายการสั่งซื้อ
ภาพเป็นรายการที่ Marker
list-style-image คุณสมบัติที่ระบุภาพเป็นเครื่องหมายรายการนี้:
ตำแหน่งรายการตัวเครื่องหมาย
list-style-position ของสถานที่ระบุว่าเครื่องหมายรายการรายการที่ควรจะปรากฏขึ้นภายในหรือภายนอกไหลเนื้อหา:
รายการ - ทรัพย์สินชวเลข
list-style คุณสมบัติเป็นที่พักชวเลข มันถูกใช้เพื่อตั้งค่าทั้งหมดคุณสมบัติรายการในหนึ่งประกาศ:
เมื่อมีการใช้สถานที่ให้บริการจดชวเลขคำสั่งของมูลค่าทรัพย์สินที่มี:
-
list-style-type(ถ้ามีรายการแบบภาพมีการระบุค่าของคุณสมบัตินี้จะแสดงว่าภาพด้วยเหตุผลบางอย่างไม่สามารถแสดง) -
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
ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 »
คุณสมบัติทั้งหมดรายการ CSS
| คุณสมบัติ | ลักษณะ |
|---|---|
| list-style | การตั้งค่าคุณสมบัติทั้งหมดสำหรับรายการในหนึ่งประกาศ |
| list-style-image | ระบุภาพเป็นเครื่องหมายรายการรายการได้อีกด้วย |
| list-style-position | ระบุถ้าเครื่องหมายรายการรายการที่ควรจะปรากฏขึ้นภายในหรือภายนอกไหลเนื้อหา |
| list-style-type | ระบุชนิดของเครื่องหมายรายการรายการ |