วิธีการใช้ประโยชน์จากรายการ CSS ให้ดีที่สุด

รายการ CSS มีประโยชน์มากในการเข้าถึงชุดของจุดที่มีตัวเลขหรือสัญลักษณ์แสดงหัวข้อย่อย บทความนี้จะแสดงวิธีการควบคุมประเภทตำแหน่งรูปแบบของ โดยใช้ CSS คำแนะนำต่อไปนี้จะกล่าวถึงที่นี่

• คุณสมบัติ CSS
• คุณสมบัติ list-style-type
• รายการ CSS: โปรแกรมตัวอย่าง
• ค่าเครื่องหมายสำหรับในคุณสมบัติรายการสไตล์ตำแหน่ง

มาเริ่มกันเลย

รายการ CSS

คุณสมบัติ CSS

มีคุณสมบัติ CSS ห้าแบบที่คุณสามารถใช้เพื่อควบคุมรายการ:

• List-style-type: ช่วยให้เราสามารถควบคุมรูปร่างหรือลักษณะที่ปรากฏของเครื่องหมาย
• ตำแหน่งสไตล์รายการ: ระบุว่าจำเป็นต้องใช้จุดยาวในการตัดกับบรรทัดที่สองหรือควรจัดแนวกับบรรทัดแรกหรือเริ่มต้นด้วยเครื่องหมาย
• List-style-image: ระบุว่าควรเพิ่มภาพสำหรับเครื่องหมายหรือทำให้น่าสนใจมากกว่าสัญลักษณ์แสดงหัวข้อย่อยหรือจุดที่มีตัวเลข
• สไตล์รายการ: แสดงชวเลขไปยังคุณสมบัติก่อนหน้า
• Marker-offset: ระบุระยะห่างระหว่างเครื่องหมายและข้อความที่ป้อนในรายการ

รายการที่ใช้กันทั่วไป ได้แก่ list-style-type และ list-style-position มีการอธิบายไว้ด้านล่าง

ไปต่อกับบทความนี้ในรายการ CSS

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

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

ตารางด้านล่างแสดงรายการที่ไม่เรียงลำดับ:

ตารางด้านล่างแสดงรายการสั่งซื้อ:

ไปต่อกับบทความนี้ในรายการ CSS

รายการ CSS: โปรแกรมตัวอย่าง

 
Java
 
Python
 
เชิงมุม
 
 
 
Java
 
Python
 
เชิงมุม
 
 
 
Java
 
Python
 
เชิงมุม
 
 
 
Java
 
Python
 
เชิงมุม
 
 
 
Java
 
Python
 
เชิงมุม
 
 

เอาต์พุต

char ใน java คืออะไร

ไปต่อกับบทความนี้ในรายการ CSS

คุณสมบัติของตำแหน่งสไตล์รายการ

ค่าเครื่องหมายสำหรับคุณสมบัติในตำแหน่งสไตล์รายการ

ในคุณสมบัติตำแหน่งสไตล์รายการจะแสดงว่าเครื่องหมายควรปรากฏภายในหรือภายนอกกล่องที่มีสัญลักษณ์แสดงหัวข้อย่อย ซึ่งอาจมีค่าใดค่าหนึ่งจากสองค่า:

ตัวอย่าง:

 
คณิตศาสตร์
 
สังคมศาสตร์
 
ฟิสิกส์
 
 
 
คณิตศาสตร์
 
สังคมศาสตร์
 
ฟิสิกส์
 
 
 
คณิตศาสตร์
 
สังคมศาสตร์
 
ฟิสิกส์
 
 
 
คณิตศาสตร์
 
สังคมศาสตร์
 
ฟิสิกส์
 
 

เอาต์พุต

เรามาถึงตอนท้ายของบทความเกี่ยวกับ CSS Lists

ตรวจสอบ ซึ่งมาพร้อมกับการฝึกอบรมสดที่นำโดยผู้สอนและประสบการณ์โครงการในชีวิตจริง การฝึกอบรมนี้ทำให้คุณมีความเชี่ยวชาญในทักษะในการทำงานกับเทคโนโลยีเว็บส่วนหลังและส่วนหน้า รวมถึงการฝึกอบรมเกี่ยวกับ Web Development, jQuery, Angular, NodeJS, ExpressJS และ MongoDB

มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นของบทความแล้วเราจะติดต่อกลับไป