CSS - รายการ

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

เรามีคุณสมบัติ CSS ห้าประการต่อไปนี้ซึ่งสามารถใช้เพื่อควบคุมรายการ -

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

ตอนนี้เราจะดูวิธีใช้คุณสมบัติเหล่านี้พร้อมตัวอย่าง

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

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

นี่คือค่าที่สามารถใช้สำหรับรายการที่ไม่ได้เรียงลำดับ -

ซีเนียร์	มูลค่าและรายละเอียด
1	none NA
2	disc (default) วงกลมที่เติมเต็ม
3	circle วงกลมว่างเปล่า
4	square สี่เหลี่ยมที่เติมเต็ม

นี่คือค่าที่สามารถใช้สำหรับรายการสั่งซื้อ -

มูลค่า	คำอธิบาย	ตัวอย่าง
ทศนิยม	จำนวน	1,2,3,4,5
ทศนิยมนำหน้าศูนย์	0 ก่อนเลข	01, 02, 03, 04, 05
อัลฟ่าที่ต่ำกว่า	อักขระตัวพิมพ์เล็กและตัวเลขคละกัน	ก, ข, ค, ง, จ
อัลฟ่าบน	อักขระตัวพิมพ์ใหญ่และตัวเลขและตัวอักษร	A, B, C, D, E.
โรมันล่าง	ตัวเลขโรมันตัวพิมพ์เล็ก	i, ii, iii, iv, v
โรมันบน	ตัวพิมพ์ใหญ่ตัวเลขโรมัน	ฉัน, II, III, IV, V.
กรีกตอนล่าง	เครื่องหมายเป็นภาษากรีกตอนล่าง	อัลฟาเบต้าแกมมา
ละตินล่าง	เครื่องหมายเป็นภาษาละตินล่าง	ก, ข, ค, ง, จ
ละตินตอนบน	เครื่องหมายเป็นภาษาละตินตอนบน	A, B, C, D, E.
ฮีบรู	เครื่องหมายคือการนับเลขภาษาฮิบรูแบบดั้งเดิม
อาร์เมเนีย	เครื่องหมายเป็นเลขอาร์เมเนียแบบดั้งเดิม
จอร์เจีย	เครื่องหมายนี้เป็นตัวเลขแบบจอร์เจียดั้งเดิม
cjk-ideographic	เครื่องหมายเป็นตัวเลขเชิงอุดมคติธรรมดา
ฮิรางานะ	เครื่องหมายคือฮิรางานะ	ก i, u, e, o, ka, ki
คาตาคานะ	เครื่องหมายคือคาตาคานะ	A, I, U, E, O, KA, KI
ฮิรางานะ - อิโรฮะ	เครื่องหมายคือฮิรางานะอิโรฮะ	ฉันโรฮ่าพรรณีโฮเขาถึง
คาตาคานะอิโรฮะ	เครื่องหมายคือคาตาคานะอิโรฮะ	ฉัน RO, HA, NI, HO, HE, TO

นี่คือตัวอย่าง -

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style-type:circle;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style = "list-style-type:square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style-type:decimal;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-roman;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

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

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

ซีเนียร์	มูลค่าและรายละเอียด
1	none NA
2	inside หากข้อความไปยังบรรทัดที่สองข้อความจะอยู่ใต้เครื่องหมาย นอกจากนี้ยังจะปรากฏเยื้องไปยังตำแหน่งที่ข้อความจะเริ่มต้นหากรายการมีค่าภายนอก
3	outside ถ้าข้อความไปยังบรรทัดที่สองข้อความจะถูกจัดชิดกับจุดเริ่มต้นของบรรทัดแรก (ทางด้านขวาของสัญลักษณ์แสดงหัวข้อย่อย)

นี่คือตัวอย่าง -

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style-type:circle; list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style = "list-style-type:square;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style-type:decimal;list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-alpha;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

คุณสมบัติรายการสไตล์รูปภาพ

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

นี่คือตัวอย่าง -

<html>
   <head>
   </head>
   
   <body>
      <ul>
         <li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol>
         <li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

คุณสมบัติรายการสไตล์

รูปแบบรายการช่วยให้คุณระบุทุกรายการคุณสมบัติเป็นแสดงออกเดียว คุณสมบัติเหล่านี้สามารถปรากฏในลำดับใดก็ได้

นี่คือตัวอย่าง -

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style: inside square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style: outside upper-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

คุณสมบัติ marker-offset

คุณสมบัติmarker-offsetช่วยให้คุณสามารถระบุระยะห่างระหว่างเครื่องหมายและข้อความที่เกี่ยวข้องกับเครื่องหมายนั้น ค่าควรเป็นความยาวตามที่แสดงในตัวอย่างต่อไปนี้ -

ขออภัยคุณสมบัตินี้ไม่รองรับใน IE 6 หรือ Netscape 7

นี่คือตัวอย่าง -

<html>
   <head>
   </head>

   <body>
      <ul style = "list-style: inside square; marker-offset:2em;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style: outside upper-alpha; marker-offset:2cm;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -