รายการลักษณะ CSS (UL)
บทบาท CSS คุณสมบัติของรายการจะเป็นดังนี้:
- ตั้งค่ารายการที่แตกต่างกันถูกทำเครื่องหมายเป็นรายการสั่งซื้อ
- ตั้งค่ารายการที่แตกต่างกันถูกทำเครื่องหมายเป็นรายการเรียงลำดับ
- ตั้งค่ารายการรูปเครื่องหมายรายการ
รายการ
ใน HTML, มีสองประเภทของรายการ:
- เรียงลำดับรายการ - รายการมีการทำเครื่องหมายที่มีกราฟิกพิเศษ (เช่นจุดสีดำกล่องขนาดเล็กอื่น ๆ )
- รายการสั่งซื้อ - รายการที่มีการทำเครื่องหมายด้วยตัวเลขหรือตัวอักษร
ด้วย CSS คุณสามารถแสดงรายการรูปแบบต่อไปและสามารถทำเครื่องหมายภาพในรายการ
เครื่องหมายรายการที่แตกต่างกัน
รูปแบบรายการประเภทแอตทริบิวต์ระบุชนิดของเครื่องหมายรายการคือ ::
ตัวอย่าง
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
ลอง»
ค่าบางคนมีรายชื่อเรียงลำดับและบางส่วนเป็นรายการสั่งซื้อ
เป็นเครื่องหมายภาพรายการรายการ
เพื่อระบุเครื่องหมายภาพในรายการให้ใช้สถานที่ให้บริการรูปแบบรายการภาพนี้:
ตัวอย่างข้างต้นแสดงให้เห็นว่าไม่เหมือนกันในเบราว์เซอร์, IE และ Opera แสดงแท็กภาพกว่า Firefox, Chrome และ Safari สูงขึ้นเล็กน้อย
หากคุณต้องการที่จะวางภาพเดียวกันของโลโก้ในเบราว์เซอร์ที่คุณควรจะใช้การแก้ปัญหาความเข้ากันได้เบราว์เซอร์ดังต่อไปนี้
โซลูชั่นเบราว์เซอร์ที่เข้ากันได้
นอกจากนี้ในเบราว์เซอร์ตัวอย่างต่อไปนี้จะแสดงแท็กรูปภาพ:
ตัวอย่าง
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
ลอง»
ตัวอย่างอธิบายว่า:
- UL:
- การตั้งค่ารูปแบบรายการประเภทที่ไม่ได้ลบเครื่องหมายรายการสินค้า
- การตั้งค่า padding และ 0px อัตรากำไรขั้นต้น (เข้ากันได้ของเบราว์เซอร์)
- ทั้งหมด li UL:
- ตั้งค่า URL ของภาพที่ตั้งไว้จะปรากฏเฉพาะในครั้งเดียว (ไม่ซ้ำ)
- คุณจำเป็นต้องค้นหาตำแหน่งของภาพ (ซ้าย 0px 5px และแนวตั้ง)
- มีคุณลักษณะ padding ซ้ายกับข้อความในรายการ
รายการ - ทรัพย์สินจดชวเลข
คุณสามารถระบุรายชื่อของทุกคุณสมบัติในคุณสมบัติเดียว นี้เรียกว่าคุณสมบัติจดชวเลข
ใช้ตัวย่อคุณสมบัติในรายการรายการแอตทริบิวต์สไตล์มีการตั้งค่าดังต่อไปนี้:
ถ้าคุณใช้มูลค่าทรัพย์สินจดชวเลขของการสั่งซื้อคือ
- รูปแบบรายการประเภท
- รูปแบบรายการตำแหน่ง (สำหรับคำแนะนำให้ดูที่ตาราง CSS แอตทริบิวต์ต่อไปนี้)
- รูปแบบรายการภาพ
หากค่าเหล่านี้จะหายไปหนึ่งของการสั่งซื้อที่เหลือจะถูกระบุยังคงไม่เป็นไร
ตัวอย่างเพิ่มเติม
เครื่องหมายรายการทั้งหมดที่แตกต่างกัน
ตัวอย่างนี้แสดงให้เห็นถึงทุกเครื่องหมายรายการ CSS รายการที่แตกต่างกัน
คุณสมบัติทั้งหมดรายการ CSS
| คุณสมบัติ | ลักษณะ |
|---|---|
| รูปแบบรายการ | สถานที่ให้บริการจดชวเลข สำหรับรายชื่อของคุณสมบัติทั้งหมดที่ระบุไว้ในคำสั่ง |
| รูปแบบรายการภาพ | ภาพที่มีการตั้งค่าที่จะลงนามรายชื่อของรายการ |
| รูปแบบรายการตำแหน่ง | ตั้งตำแหน่งในรายการเครื่องหมายรายการรายการ |
| รูปแบบรายการประเภท | กำหนดประเภทของธงรายการสินค้า |