ชื่ออื่นสำหรับรายการ รายการที่เรียงลำดับเลข ประเภทของเครื่องหมายแสดงหัวข้อย่อย

รายการสัญลักษณ์แสดงหัวข้อย่อยช่วยให้คุณสามารถแบ่งข้อความขนาดใหญ่ออกเป็นบล็อกแยกกัน ซึ่งแต่ละบล็อกจะขึ้นต้นด้วยสัญลักษณ์แสดงหัวข้อย่อย ซึ่งโดยปกติจะเป็นจุดเล็กๆ สิ่งนี้จะดึงความสนใจของผู้อ่านมาที่ข้อความและเพิ่มความสามารถในการอ่าน

ด้วยธาตุ

    คุณสมบัติต่อไปนี้มีความเกี่ยวข้อง:

    • ในที่ที่มันเกิดขึ้น
        เบราว์เซอร์จะเพิ่มการขึ้นบรรทัดใหม่โดยอัตโนมัติ
      • รายการมีการเยื้องที่ด้านบนและด้านล่าง
      • ตามค่าเริ่มต้น เครื่องหมายจะแสดงเป็นวงกลมที่เติมสี
      • แต่ละองค์ประกอบรายการจะถูกเลื่อนไปทางขวาโดยสัมพันธ์กับข้อความหลัก

      รูปที่ 1 แสดงผลลัพธ์ของตัวอย่าง ซึ่งแสดงให้เห็นคุณสมบัติข้างต้นของรายการสัญลักษณ์แสดงหัวข้อย่อย

      ข้าว. 1. มุมมองรายการสัญลักษณ์แสดงหัวข้อย่อย

      ประเภทเครื่องหมาย

      เครื่องหมายอาจอยู่ในรูปแบบใดรูปแบบหนึ่งจากสามรูปแบบ: วงกลมเติมสี (ค่าเริ่มต้น) วงกลมเปิด และสี่เหลี่ยมจัตุรัส หากต้องการเลือกประเภทมาร์กเกอร์ให้ใช้ คุณสมบัติประเภทรายการสไตล์หรือรูปแบบรายการสากล (ตัวอย่างที่ 1) ใช้ค่าต่อไปนี้:

      • แผ่นดิสก์ - เครื่องหมายในรูปแบบของวงกลมที่เต็มไป
      • วงกลม - เครื่องหมายในรูปแบบของวงกลมเปิด
      • สี่เหลี่ยม - เครื่องหมายสี่เหลี่ยม

      ตัวอย่างที่ 1: การเปลี่ยนรูปลักษณ์ของมาร์กเกอร์

      รายการ

      • เซปุลกิ
      • Sepulcaria
      • การแยกตัว

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

    • มันจะใช้งานไม่ได้ ดังนั้นคุณจะต้องแก้ไขมัน เมื่อต้องการทำเช่นนี้ ให้ซ่อนเครื่องหมายรายการโดยใช้คุณสมบัติ list-style ที่มีค่า none และในข้อความก่อนเนื้อหา
    • เพิ่มของคุณ ตัวละครของตัวเองใช้ ::before องค์ประกอบหลอก ในตัวอย่างที่ 2 สามเหลี่ยมทำหน้าที่เป็นเครื่องหมายดังกล่าว

      ตัวอย่างที่ 2: การใช้::before

      รายการ

      • เซปุลกิ
      • Sepulcaria
      • การแยกตัว

      ผลลัพธ์ ตัวอย่างนี้แสดงในรูปที่. 2. เนื่องจากการใช้คุณสมบัติ list-style ที่มีค่า none จะไม่ลบเครื่องหมายออกเลย แต่จะซ่อนไว้จากมุมมองเท่านั้น รายการจึงเลื่อนไปทางขวา หากต้องการกำจัดคุณลักษณะนี้ ตัวอย่างจะเพิ่มคุณสมบัติการเยื้องข้อความที่มีค่าลบ หน้าที่คือย้ายข้อความไปทางซ้ายหนึ่งอักขระ

      ข้าว. 2. เครื่องหมายตามอำเภอใจในรายการ

      อักขระไม่จำเป็นต้องอยู่ในรูปแบบเลขฐานสิบหก สามารถแทรกลงในข้อความได้โดยตรง สิ่งสำคัญคือการบันทึกเอกสารในการเข้ารหัส UTF-8 และตัวแก้ไขรองรับ สามารถใช้อักขระและรหัสได้เช่นจาก LibreOffice Writer (รูปที่ 3)

      ข้าว. 3. การเลือกสัญลักษณ์ใน LibreOffice

      รายการที่มีเครื่องหมายวาดด้วยมือ

      สไตล์ช่วยให้คุณสามารถตั้งค่ารูปภาพที่เหมาะสมเป็นเครื่องหมายผ่านคุณสมบัติ list-style-image ค่านี้เป็นเส้นทางแบบสัมพัทธ์หรือแบบสัมบูรณ์ ไฟล์กราฟิกดังแสดงในตัวอย่างที่ 3

      ตัวอย่างที่ 3: การใช้รูปภาพเป็นเครื่องหมาย

      รายการ

      • เซปุลกิ
      • Sepulcaria
      • การแยกตัว

      การวาดภาพที่ดีที่สุดคือเลือก ขนาดเล็กเพื่อหลีกเลี่ยงการเปลี่ยนรายการเป็นคำอธิบายภาพ ในรูป รูปที่ 4 แสดงผลลัพธ์ตัวอย่างการใช้รูปภาพขนาดเล็กเป็นเครื่องหมาย

      ข้าว. 4. การวาดภาพเป็นเครื่องหมาย

      การใช้ list-style-image มีข้อเสียบางประการ:

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

    • เราลบเครื่องหมายดั้งเดิมออกและตั้งค่าภาพพื้นหลังโดยไม่ต้องทำซ้ำ และเพื่อไม่ให้ข้อความปรากฏบนรูปภาพ เราจึงเลื่อนไปทางขวาโดยใช้การเติมด้านซ้าย (ตัวอย่างที่ 4)

      ตัวอย่างที่ 4: การใช้พื้นหลัง

      Ul ( ขอบซ้าย: -1em; ) li ( สไตล์รายการ: none; พื้นหลัง: url(images/bullet.png) ไม่ทำซ้ำ 0 2px; padding-left: 20px; )

      ตำแหน่งของข้อความและสัญลักษณ์แสดงหัวข้อย่อย

      มีสองวิธีในการวางมาร์กเกอร์ที่สัมพันธ์กับข้อความ: มาร์กเกอร์ถูกย้ายออกนอกเส้นขอบขององค์ประกอบรายการหรือพันรอบข้อความ (รูปที่ 5)



      ข้างในข้างนอก

      ข้าว. 5. ตำแหน่งของเครื่องหมายที่สัมพันธ์กับข้อความ

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

      ตัวอย่างที่ 5: การเปลี่ยนตำแหน่งของเครื่องหมาย

      รายการ

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

      ผลลัพธ์ของตัวอย่างนี้แสดงไว้ในรูปที่ 1 6.

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

        ด้วยความช่วยเหลือในการจัดระเบียบรายการประเภทนี้ในเอกสาร HTML (UL - รายการที่ไม่เรียงลำดับ, รายการที่ไม่เรียงลำดับ)

        รายการสัญลักษณ์แสดงหัวข้อย่อยใช้ อักขระพิเศษเรียกว่าเครื่องหมายรายการ (มักเรียกว่าสัญลักษณ์แสดงหัวข้อย่อย ซึ่งเป็นการออกเสียงอย่างเป็นทางการของคำศัพท์ภาษาอังกฤษหัวข้อย่อย) ลักษณะของเครื่องหมายรายการจะถูกกำหนดโดยเบราว์เซอร์ และเมื่อสร้างรายการที่ซ้อนกัน เบราว์เซอร์จะกระจายลักษณะที่ปรากฏของเครื่องหมายในระดับการซ้อนต่างๆ โดยอัตโนมัติ

        แท็ก
          และ

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


        .

        องค์ประกอบรายการแต่ละรายการจะต้องเริ่มต้นด้วยแท็ก

      • (LI - รายการองค์ประกอบรายการ) แท็ก
      • ไม่จำเป็นต้องมีแท็กปิดที่เกี่ยวข้อง แม้ว่าโดยหลักการแล้วไม่ได้ห้ามไม่ให้มีแท็กปิดก็ตาม เบราว์เซอร์มักจะเริ่มแต่ละรายการใหม่ในบรรทัดใหม่เมื่อแสดงเอกสาร

        ข้อมูลที่ให้ไว้เพียงพอที่จะสร้างรายการสัญลักษณ์แสดงหัวข้อย่อยพื้นฐาน เรามายกตัวอย่างเอกสาร HTML โดยใช้รายการสัญลักษณ์แสดงหัวข้อย่อยซึ่งเบราว์เซอร์จะแสดงในรูป 2.1.

        ตัวอย่างรายการสัญลักษณ์แสดงหัวข้อย่อย

        สัญญาณของราศี:

        • ราศีเมษ

        • ราศีพฤษภ

        • ฝาแฝด

        • ราศีกันย์

        • ตาชั่ง

        • แมงป่อง

        • ราศีธนู

        • ราศีมังกร

        • ราศีกุมภ์

        • ปลา

        ข้าว. 2.1.เบราว์เซอร์แสดงรายการสัญลักษณ์แสดงหัวข้อย่อย

        โปรดทราบว่านอกเหนือจากองค์ประกอบรายการที่ทำเครื่องหมายด้วยแท็ก

      • อาจมีองค์ประกอบ HTML อื่นๆ ปรากฏอยู่ ในตัวอย่างข้างต้น หนึ่งในองค์ประกอบเหล่านี้คือข้อความธรรมดา ซึ่งไม่ใช่รายการ แต่ทำหน้าที่เป็นชื่อ

        บันทึก

        หนังสือเรียนบางเล่มในภาษา HTML ระบุว่าควรใช้คอนเทนเนอร์แท็กเพื่อตั้งชื่อรายการ (LH - ส่วนหัวของรายการ, ส่วนหัวของรายการ) ขณะนี้เบราว์เซอร์ทั่วไปไม่รู้จักแท็กนี้ และไม่ได้เป็นส่วนหนึ่งของข้อกำหนด HTML ดังนั้นการใช้งานจึงไร้จุดหมายแม้ว่าจะไม่ทำให้เกิดข้อผิดพลาดก็ตาม

        ในแท็ก

          สามารถระบุพารามิเตอร์ได้สองตัว: COMPACT และ TYPE

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

          บันทึก

          ปัจจุบันมีพารามิเตอร์ COMPACT ในแท็ก

            ไม่ส่งผลกระทบต่อการแสดงรายการในเบราว์เซอร์ชั้นนำ แต่อย่างใด ดังนั้นการสมัคร พารามิเตอร์นี้ไม่มีความหมาย โดยเฉพาะอย่างยิ่งเนื่องจากไม่แนะนำให้ใช้โดยข้อกำหนด HTML 4.0

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

            TYPE = แผ่นดิสก์ - เครื่องหมายจะแสดงเป็นวงกลมที่เต็มไป TYPE = วงกลม - เครื่องหมายจะแสดงเป็นวงกลมเปิด TYPE = สี่เหลี่ยม - เครื่องหมายจะแสดงเป็นสี่เหลี่ยมจัตุรัสที่เต็มไป รายการตัวอย่าง:

              .

              ค่าเริ่มต้นคือ TYPE = ดิสก์ สำหรับรายการสัญลักษณ์แสดงหัวข้อย่อยที่ซ้อนกัน ค่าเริ่มต้นคือดิสก์ที่ระดับแรก วงกลมที่ระดับที่สอง สี่เหลี่ยมที่ระดับที่สามและเลยไป นี่คือสิ่งที่ทำใน เวอร์ชันล่าสุดเบราว์เซอร์ Netscape และ อินเทอร์เน็ตเอ็กซ์พลอเรอร์- โปรดทราบว่าเบราว์เซอร์อื่นอาจแสดงเครื่องหมายแตกต่างออกไป ตัวอย่างเช่น ในข้อกำหนด HTML 4.0 ประเภทของมาร์กเกอร์ที่แสดงเมื่อระบุ TYPE = สี่เหลี่ยมจัตุรัสเป็นโครงร่างสี่เหลี่ยมจัตุรัส

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

            • .

              รายการตัวอย่าง:

            • .

              บันทึก

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

              เครื่องหมายรายการกราฟิก

              คุณสามารถใช้รูปภาพกราฟิกเป็นรายการหัวข้อย่อย ซึ่งใช้กันอย่างแพร่หลายในการสร้างเอกสาร HTML ที่สวยงามและออกแบบมาอย่างดี จริงๆ แล้ว โอกาสดังกล่าวไม่ได้มอบให้โดยตรง ภาษา HTMLแต่มีการดำเนินการค่อนข้างเทียม นี่ไม่ได้หมายความว่าไม่แนะนำหรือตำหนิการกระทำดังกล่าว แต่เพียงแต่จะไม่มีการใช้โครงสร้างภาษา HTML พิเศษที่นี่

              เพื่อให้เข้าใจแนวคิดนี้ คุณต้องเข้าใจกลไกในการใช้งานรายการบนหน้า HTML ปรากฎว่าแท็กรายการ

                (ตามจริงแล้ว แท็กรายการประเภทอื่นๆ ที่กล่าวถึงด้านล่าง) ทำหน้าที่เดียว - โดยจะบอกเบราว์เซอร์ว่าข้อมูลทั้งหมดที่อยู่หลังแท็กนี้ควรแสดงถูกเลื่อนไปทางขวา (เยื้อง) ตามจำนวนที่กำหนด แท็ก
              • บ่งบอกถึง แต่ละองค์ประกอบรายการ ให้ผลลัพธ์ของเครื่องหมายองค์ประกอบรายการมาตรฐาน

                หากเราจำเป็นต้องสร้างรายการที่มีเครื่องหมายกราฟิก เราก็สามารถทำได้โดยไม่ต้องใช้แท็กเลย

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

                หรือบังคับให้ป้อนบรรทัด
                - ตัวอย่างของการใช้รายการที่มีเครื่องหมายกราฟิกซึ่งการแสดงผลจะแสดงในรูป 2.2 แสดงไว้ด้านล่าง:

                ซึ่งจะถูกส่งเพียงครั้งเดียว ขนาดไฟล์ของรูปภาพขนาดเล็กก็เล็กมากเช่นกัน

                บันทึก

                วิธีการสร้างรายการด้วยสัญลักษณ์แสดงหัวข้อย่อยกราฟิกจะกล่าวถึงในบทที่ 8

                รายการที่เรียงลำดับเลขคือชุดของรายการที่มีรายการเหล่านั้น หมายเลขซีเรียล- ประเภทและประเภทของการกำหนดหมายเลขขึ้นอยู่กับพารามิเตอร์องค์ประกอบ

                  ซึ่งใช้ในการสร้างรายการ ค่าต่อไปนี้สามารถใช้เป็นองค์ประกอบการกำหนดหมายเลขได้:

                  • เลขอารบิค (1, 2, 3, ...);
                  • เลขอารบิกที่มีศูนย์นำหน้าสำหรับตัวเลขที่น้อยกว่าสิบ (01, 02, 03, ...,10)
                  • ตัวอักษรละตินตัวพิมพ์ใหญ่ (A, B, C, ... );
                  • ตัวอักษรละตินตัวพิมพ์เล็ก (a, b, c, ...);
                  • เลขโรมันตัวพิมพ์ใหญ่ (I, II, III, ...);
                  • เลขโรมันตัวพิมพ์เล็ก (i, ii, iii, ...);
                  • การนับเลขอาร์เมเนีย
                  • การนับเลขแบบจอร์เจีย

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

                  รายการลำดับเลข

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

                    หรือมูลค่าขององค์ประกอบ
                  1. - ค่าเป็นจำนวนเต็มบวกใดๆ ไม่ว่าจะกำหนดหมายเลขประเภทใด แม้ว่าจะใช้ตัวอักษรละตินเป็นรายการก็ตาม หากใช้ทั้งแอตทริบิวต์ start และ value กับรายการพร้อมกัน คุณลักษณะหลังจะมีความสำคัญกว่าและหมายเลขจะแสดงจากตัวเลขที่ระบุโดย value ดังที่แสดงในตัวอย่างที่ 1

                    ตัวอย่างที่ 1: การเปลี่ยนลำดับเลขรายการ

                    รายการ

                    1. คุณควรดูแลสถานที่ทำงานของคุณให้ดี
                    2. ปรับแสงสว่างในห้องโดยให้แหล่งกำเนิดแสงอยู่ด้านข้างหรือด้านหลังผู้ปฏิบัติงาน
                    3. เพื่อหลีกเลี่ยงภาวะแทรกซ้อนทางการแพทย์ แนะนำให้เลือกเก้าอี้ที่มีเบาะนั่งแบบนุ่ม

                    องค์ประกอบแรกของรายการในตัวอย่างนี้จะเริ่มต้นด้วยเลขโรมัน IV เนื่องจากมีการระบุแอตทริบิวต์ start="4" จากนั้นจะเป็นหมายเลข V และองค์ประกอบสุดท้ายจะไม่เรียงลำดับและถูกกำหนดเป็นหมายเลข X (รูป 1).

                    ข้าว. 1. เลขโรมันในรายการ

                    การเขียนตัวเลข

                    ตามค่าเริ่มต้น รายการที่มีลำดับเลขจะมีลักษณะบางอย่าง: ขั้นแรกจะมีตัวเลข ตามด้วยจุด และหลังจากนั้นข้อความจะแสดงโดยคั่นด้วยช่องว่าง การเขียนรูปแบบนี้มองเห็นได้สะดวกและสะดวก แต่นักพัฒนาบางคนชอบที่จะเห็นวิธีอื่นในการออกแบบการกำหนดหมายเลขรายการ กล่าวคือ แทนที่จะเป็นจุด จะมีวงเล็บปิด ดังแสดงในรูป 2 หรืออะไรที่คล้ายกัน

                    ข้าว. 2. มุมมองรายการลำดับเลขพร้อมวงเล็บ

                    สไตล์ช่วยให้คุณสามารถเปลี่ยนประเภทของการกำหนดหมายเลขรายการโดยใช้เนื้อหาและคุณสมบัติตัวนับการเพิ่ม ขั้นแรก ต้องตั้งค่าตัวเลือก ol เป็น counter-reset : item ซึ่งจำเป็นเพื่อให้การกำหนดหมายเลขในแต่ละรายการใหม่เริ่มต้นใหม่อีกครั้ง มิฉะนั้นการนับจะดำเนินต่อไปและแทนที่จะเป็น 1,2,3 คุณจะเห็น 5,6,7 ค่ารายการเป็นตัวระบุที่ไม่ซ้ำกันสำหรับตัวนับที่เราเลือกเอง ถัดไป คุณต้องซ่อนเครื่องหมายดั้งเดิมผ่านคุณสมบัติ style list-style-type ที่มีค่า none

                    โดยทั่วไปคุณสมบัติเนื้อหาจะทำงานร่วมกับองค์ประกอบหลอก ::after และ ::before ดังนั้น li::before การก่อสร้างบอกว่าเนื้อหาบางส่วนต้องถูกเพิ่มก่อนแต่ละองค์ประกอบของรายการ (ตัวอย่างที่ 2)

                    ตัวอย่างที่ 2 การสร้างหมายเลขของคุณเอง

                    Li::before ( content: counter(item) ") "; /* เพิ่มวงเล็บให้กับตัวเลข */ counter-increation: item; /* ตั้งชื่อตัวนับ */ )

                    คุณสมบัติเนื้อหาที่มีตัวนับค่า (รายการ) จะแสดงตัวเลข โดยการเพิ่มวงเล็บตามที่แสดงในตัวอย่างนี้ เราจะได้ประเภทการกำหนดหมายเลขที่ต้องการ จำเป็นต้องเพิ่มตัวนับเพื่อเพิ่มหมายเลขรายการทีละรายการ โปรดทราบว่ามีการใช้ตัวระบุเดียวกันซึ่งมีชื่อว่า item ตลอดรายการ รหัสสุดท้ายจะแสดงในตัวอย่างที่ 3

                    ตัวอย่างที่ 3: การเปลี่ยนมุมมองรายการ

                    รายการ

                    1. อันดับแรก
                    2. ที่สอง
                    3. ที่สาม
                    4. ที่สี่

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

                    เนื้อหา: "[" ตัวนับ (รายการ) "] ";

                    รายการด้วยตัวอักษรรัสเซีย

                    มีรายการที่มีหมายเลขกำกับด้วยตัวอักษรละติน แต่ไม่มีตัวอักษรรัสเซียอยู่ในรายการ สามารถเพิ่มได้โดยใช้เทคนิคข้างต้น เนื่องจากการกำหนดหมายเลขเสร็จสิ้นผ่านสไตล์ รายการจึงยังคงเป็นต้นฉบับ มีเพียงคลาสที่เลือกเท่านั้นที่ถูกเพิ่มเข้าไป เรียกมันว่าซีริลิก (ตัวอย่างที่ 4)

                    ตัวอย่างที่ 4: รหัสเพื่อสร้างรายการ

                    1. หนึ่ง
                    2. สอง
                    3. สาม

                    การเพิ่มตัวอักษรทำได้โดยใช้ ::before pseudo-element และคุณสมบัติ content เนื่องจากแต่ละบรรทัดต้องมีตัวอักษรของตัวเอง เราจะใช้คลาสหลอก :nth-child(1) โดยมีหมายเลขตัวอักษรเขียนอยู่ในวงเล็บ แน่นอนว่าตัวอักษรตัวแรกคือ A ตัวที่สองคือ B ตัวที่สามคือ C เป็นต้น ทั้งชุดนี้จะถูกเพิ่มเข้าไปในตัวเลือก li ดังต่อไปนี้ (ตัวอย่างที่ 5)

                    ตัวอย่างที่ 5: การใช้คลาสหลอก: nth-child

                    Cyrilic li:nth-child(1)::before ( เนื้อหา: "a)"; ) .cyrilic li:nth-child(2)::before ( เนื้อหา: "b)"; ) .cyrilic li:nth-child(3)::before ( เนื้อหา: "at)"; -

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

                    ในที่สุดเราก็ปรับการจัดตำแหน่งและตำแหน่งของตัวอักษร โดยระบุขนาดตัวอักษร สี และพารามิเตอร์อื่นๆ ก็ได้ (ตัวอย่างที่ 6)

                    ตัวอย่างที่ 6. รายการด้วยตัวอักษรรัสเซีย

                    รายการ

                    1. บอร์ช
                    2. หอกทอด
                    3. คูเลเบียกา
                    4. เห็ดในครีม
                    5. แพนเค้กกับคาเวียร์
                    6. ควาส

                    ผลลัพธ์ของตัวอย่างนี้แสดงไว้ในรูปที่ 1 3.

                    รายการเป็นส่วนสำคัญของเนื้อหาเนื่องจากช่วยจัดระเบียบข้อมูล ข้อความในรายการจะรับรู้ได้ดีขึ้นและจดจำได้ง่ายกว่า

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

                    ในการสร้างมัน คุณต้องใช้เพียงสองแท็กเท่านั้น:

                      และ
                    • .
                        เป็นคอนเทนเนอร์ที่ประกอบด้วยรายการองค์ประกอบที่ระบุโดยแท็ก
                      • .

                        รายการหัวข้อย่อย

                        • หิน
                        • กรรไกร
                        • กระดาษ

                        ตามค่าเริ่มต้น เครื่องหมายรายการจะเป็นวงกลมสีดำ ( ดิสก์- โดยการเพิ่มแท็ก

                          คุณลักษณะ พิมพ์และมอบหมายมัน ค่าที่สอดคล้องกันสามารถเปลี่ยนเครื่องหมายเป็นวงกลมได้ ( วงกลม) หรือสี่เหลี่ยมสีดำ ( สี่เหลี่ยม).

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

                          แท็กใช้เพื่อสร้างรายการลำดับเลข

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

                                  รายการลำดับเลข

                                  1. หิน
                                  2. กรรไกร
                                  3. กระดาษ

                                  เนื่องจากสิ่งต่าง ๆ ไม่ใช่เรื่องง่ายเสมอไปสำหรับรายการลำดับเลขสำหรับแท็ก

                                    สร้างแอตทริบิวต์ต่อไปนี้ (หมายเหตุ: ด้านล่างเป็นเพียงรายการลำดับเลข):

                                    1. พิมพ์- คุณลักษณะนี้ช่วยให้คุณสามารถกำหนดหมายเลขรายการได้ไม่เฉพาะกับอารบิกเท่านั้น แต่ยังรวมถึงเลขโรมันหรือตัวอักษรละตินในกรณีต่างๆ พิมพ์รองรับค่า 1 (ค่าเริ่มต้น), a, A, i, I (ลองทดลองด้วยตัวเอง)

                                    2. เริ่ม- การนับเลขไม่จำเป็นต้องเริ่มต้นด้วยหนึ่งเสมอไป คุณลักษณะนี้ช่วยให้คุณสามารถตั้งค่าได้ ค่าเริ่มต้น- หมายเลของค์ประกอบแรกของรายการ ในนั้น คุณสามารถระบุได้ว่ารายงานจะเริ่มต้น เช่น ด้วยหมายเลข 100 หรือตัวอักษร K

                                    3. ย้อนกลับ- หากรายการไม่ควรเริ่มจาก 1 ถึง 10 แต่จาก 10 ถึง 1 จะต้องใช้แอตทริบิวต์นี้ หากมีการระบุไว้ ลำดับเลขจะกลับกัน

                                    ในการกำหนดหมายเลขที่กำหนดเองให้กับองค์ประกอบที่อยู่ตรงกลางรายการ คุณต้องใช้ในแท็ก

                                  1. คุณลักษณะ :

                                  2. องค์ประกอบที่สี่สิบห้าหลังจากสามสิบแปด
                                  3. เมื่อเปลี่ยนหมายเลขขององค์ประกอบหนึ่งที่อยู่ตรงกลางรายการ คุณจะเปลี่ยนหมายเลขขององค์ประกอบทั้งหมดที่ตามมา - รายงานจะเริ่มต้นด้วยค่าในแอตทริบิวต์ value ตัวอย่างเช่น หากคุณกำหนดหมายเลข 35 ให้องค์ประกอบ 18 องค์ประกอบที่ตามมาก็จะมีตัวเลขไม่ใช่ 19, 20, 21 แต่เป็น 36, 37, 38

                                    รายการคำจำกัดความ

                                    ประเภทรายการที่ไม่เป็นที่รู้จักเท่าที่กล่าวไว้ข้างต้น ประกอบด้วยคำศัพท์และคำจำกัดความ สร้างโดยใช้แท็ก:

                                    - คอนเทนเนอร์ที่มีรายการ

                                    - แท็กคำ

                                    - แท็กคำจำกัดความ

                                    ขอบเขตของการใช้รายการคำจำกัดความ ได้แก่ อภิธานศัพท์ หนังสืออ้างอิง แบบทดสอบ พจนานุกรม และรายการอื่น ๆ ที่ครอบคลุมประเภท "คำศัพท์ - คำอธิบาย"

                                    นี่คือตัวอย่างรายการคำจำกัดความ:

                                    รายการคำจำกัดความ

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

                                    รายการที่ประกอบด้วยรายการที่ซ้อนกันภายในกัน อาจรวมถึงรายการ ประเภทต่างๆ- ความยากในการสร้างอยู่ที่การรักษาการซ้อนแท็กให้ถูกต้อง เนื่องจากเป็นเรื่องง่ายที่จะสับสนในโครงสร้างหลายระดับ

                                    นี่คือตัวอย่างของรายการหลายระดับ:

                                    รายการหลายระดับ ภาษาการเขียนโปรแกรมแบ่งออกเป็น:

                                    • โครงสร้าง
                                      1. ปาสคาล
                                      2. โอเบรอน
                                        1. บริเวณขอบรก
                                    • เชิงวัตถุ
                                      1. ชวา
                                    • มีประโยชน์ใช้สอย
                                      1. เสียงกระเพื่อม
                                      2. หลาม