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>

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