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

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

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

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

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

- แต่ละรายการในรายการจะถูกทำเครื่องหมายด้วยองค์ประกอบ
• .

  ตามค่าเริ่มต้น เบราว์เซอร์ส่วนใหญ่จะเพิ่มระยะขอบแนวตั้งและช่องว่างด้านซ้ายให้กับองค์ประกอบ

  และก่อนแต่ละองค์ประกอบ
  • ใส่จุดสีเดียว จุดนี้เรียกว่าเครื่องหมายรายการและสามารถเปลี่ยนแปลงได้โดยใช้ CSS
    • ส้ม
    • สีเขียว
    • สีฟ้า

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

    รายการที่เรียงลำดับเลข

    รายการที่มีหมายเลขหรือลำดับของรายการ

    คล้ายกับรายการหัวข้อย่อยมาก โดยแต่ละหัวข้อย่อยจะถูกสร้างขึ้นในลักษณะเดียวกัน ข้อแตกต่างที่สำคัญระหว่างรายการก็คือ สำหรับรายการที่เรียงลำดับ ลำดับที่รายการจะถูกนำเสนอมีความสำคัญ

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

    1. เดินไปตามถนนแอปริคอท
    2. เลี้ยวเข้าสู่วิโนกราดนายา

    การสาธิตรายการลำดับเลข

    รายการที่เรียงลำดับเลขยังมีคุณลักษณะเฉพาะที่พร้อมใช้งาน รวมถึงการเริ่มและการย้อนกลับ

    คุณลักษณะเริ่มต้น

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

    จากนั้นเราจะสามารถกำหนดได้อย่างแม่นยำว่าควรเริ่มนับรายการลำดับเลขจากหมายเลขใด

    คุณลักษณะ start ยอมรับเฉพาะค่าจำนวนเต็ม แม้ว่าจะสามารถใช้ได้ในรายการลำดับเลขก็ตาม ระบบที่แตกต่างกันการนับเลข เช่น เลขโรมัน

    30. เดินไปตามถนนแอปริคอท
    31. เลี้ยวเข้าสู่วิโนกราดนายา
    32. หยุดที่ถนนเชดี้

    การสาธิตแอตทริบิวต์เริ่มต้น

    คุณลักษณะที่กลับรายการ

    แอตทริบิวต์ที่กลับรายการเมื่อเพิ่มให้กับองค์ประกอบ

    อนุญาตให้แสดงรายการได้ ลำดับย้อนกลับ- รายการห้ารายการที่มีหมายเลข 1 ถึง 5 สามารถกลับรายการได้และมีหมายเลข 5 ถึง 1

    แอ็ตทริบิวต์ที่กลับรายการเป็นแอททริบิวต์บูลีน และด้วยเหตุนี้จึงไม่รับค่าใดๆ มันอาจเป็นจริงหรือเท็จก็ได้ False เป็นค่าเริ่มต้น ค่าจะกลายเป็นจริงเมื่อแอตทริบิวต์ที่กลับรายการปรากฏบนองค์ประกอบ

    .
    1. เดินไปตามถนนแอปริคอท
    2. เลี้ยวเข้าสู่วิโนกราดนายา
    3. หยุดที่ถนนเชดี้

    การสาธิตคุณลักษณะที่กลับรายการ

    คุณลักษณะค่า

    คุณลักษณะ value สามารถนำไปใช้กับแต่ละองค์ประกอบได้

    1. ในรายการลำดับเลขเพื่อเปลี่ยนค่าในรายการ จำนวนรายการใด ๆ ที่ปรากฏด้านล่างรายการที่มีแอตทริบิวต์ค่าจะถูกคำนวณใหม่ตามนั้น

       ตามตัวอย่าง หากรายการที่สองมีแอตทริบิวต์ค่าที่ตั้งค่าเป็น 9 จำนวนของรายการนั้นจะถูกส่งออกเหมือนกับว่าเป็นรายการที่เก้า รายการถัดไปทั้งหมดจะมีหมายเลขเริ่มต้นจาก 9

       1. เดินไปตามถนนแอปริคอท
       9. เลี้ยวเข้าสู่วิโนกราดนายา
       10. หยุดที่ถนนเชดี้

       การสาธิตคุณลักษณะคุณค่า

       รายการคำอธิบาย

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

       การสร้างรายการคำอธิบายใน HTML ทำได้โดยใช้องค์ประกอบบล็อก

       - แทนที่จะใช้องค์ประกอบ

       ในการมาร์กอัปรายการ รายการคำอธิบายจำเป็นต้องมีองค์ประกอบบล็อกสองรายการ:

       สำหรับระยะเวลาและ

       สำหรับคำอธิบาย

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

       เมื่อเพิ่มองค์ประกอบรายการคำอธิบาย

       จะต้องไปที่องค์ประกอบ

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

       โดยค่าเริ่มต้น องค์ประกอบ

       รวมถึงช่องว่างภายในแนวตั้ง เช่น องค์ประกอบ

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

             แต่ภายในธาตุนั้น

          2. สามารถเพิ่มชุดองค์ประกอบมาตรฐานได้ รวมถึงองค์ประกอบใดๆ ก็ตาม
             หรือ
             .

             หากต้องการซ้อนรายการ ให้เริ่มรายการใหม่ก่อนที่จะปิดรายการ เมื่อรายการที่ซ้อนกันเสร็จสมบูรณ์และปิดแล้ว ให้ปิดรายการที่แนบมาและดำเนินการต่อด้วยรายการเดิม

             1. พาสุนัขไปเดินเล่น
             2. พับผ้า
             3. ไปที่ร้านและซื้อ:
                • น้ำนม
                • ขนมปัง
                • ชีส
             4. ตัดหญ้า
             5. ทำอาหารเย็น

             การสาธิตรายการที่ซ้อนกัน

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

             และ
             สามารถมีได้เฉพาะองค์ประกอบเท่านั้น
             1. - องค์ประกอบ
             2. สามารถมีองค์ประกอบปกติที่คุณต้องการได้ อย่างไรก็ตามองค์ประกอบ
             3. จะต้องเป็นผู้สืบทอดโดยตรงขององค์ประกอบใดองค์ประกอบหนึ่ง
                , หรือ
                .

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

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

                รายการจัดแต่งทรงผม

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

                คุณสมบัติประเภทรายการสไตล์

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

                ,
                หรือ
                1. .

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

                   • ส้ม
                   • สีเขียว
                   • สีฟ้า

                   Ul ( list-style-type: square; )

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

                   ค่าประเภทรายการสไตล์

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

                   การใช้รูปภาพเป็นเครื่องหมายรายการ

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

                2. .

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

                3. .

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

                   • ส้ม
                   • สีเขียว
                   • สีฟ้า

                   Li ( พื้นหลัง: url("arrow.png") 0 50% ไม่ทำซ้ำ; list-style-type: none; padding-left: 12px; )

                   การแสดงภาพเป็นเครื่องหมาย

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

                   ตามค่าเริ่มต้น รายการหัวข้อย่อยจะอยู่ทางด้านซ้ายของเนื้อหาในองค์ประกอบ

                4. - รูปแบบการวางตำแหน่งนี้อธิบายว่าอยู่ภายนอก ซึ่งหมายความว่าเนื้อหาทั้งหมดจะปรากฏทางด้านขวาโดยตรง นอกเครื่องหมายรายการ ด้วยคุณสมบัติ list-style-position เราสามารถเปลี่ยนค่าเริ่มต้นจากภายนอกเป็นภายในหรือสืบทอดได้

                   ภายนอกวางเครื่องหมายรายการทางด้านซ้ายขององค์ประกอบ

                5. และไม่อนุญาตให้มีเนื้อหาใดไหลต่ำกว่าเครื่องหมายนี้ ค่าภายใน (ซึ่งไม่ค่อยได้ใช้และมองเห็นได้) จะวางเครื่องหมายรายการไว้ที่บรรทัดแรกขององค์ประกอบ
                6. และอนุญาตให้เนื้อหาพันรอบมาร์กเกอร์ได้หากจำเป็น
                   • คัพเค้ก...
                   • กำลังโรย...

                   Ul ( list-style-position: inside; )

                   การสาธิตคุณสมบัติแบบรายการ-ตำแหน่ง

                   รูปแบบรายการคุณสมบัติทั่วไป

                   คุณสมบัติรายการที่เรากล่าวถึงเมื่อเร็วๆ นี้ list-style-type และ list-style-position สามารถรวมกันเป็นคุณสมบัติทั่วไปรายการเดียวได้ list-style ในคุณสมบัตินี้เราสามารถใช้ค่าคุณสมบัติรายการหนึ่งหรือทั้งหมดพร้อมกันได้ ลำดับของค่าเหล่านี้ควรเป็น: list-style-type ตามด้วย list-style-position

                   Ul ( list-style: วงกลมด้านใน; ) ol ( list-style: lower-roman; )

                   การแสดงรายการแนวนอน

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

                7. เช่น inline หรือ inline-block หรือผ่านคุณสมบัติ float

                   แสดงรายการ

                   ที่สุด วิธีที่รวดเร็วแสดงรายการในหนึ่งบรรทัด - นี่คือการตั้งค่าองค์ประกอบ

                8. แสดงคุณสมบัติที่มีค่า inline หรือ inline-block ซึ่งจะใส่องค์ประกอบทั้งหมด
                9. ในหนึ่งบรรทัดโดยมีระยะห่างเท่ากันระหว่างแต่ละรายการ

                   หากมีช่องว่างระหว่างองค์ประกอบ

                10. กำลังก่อให้เกิดปัญหา สามารถลบออกได้โดยใช้เทคนิคเดียวกับที่เราพูดถึงในบทที่ 5 การวางตำแหน่งเนื้อหา

                    บ่อยครั้งที่เราจะใช้ค่า inline-block แทนค่า inline ค่าบล็อกในบรรทัดช่วยให้เพิ่มช่องว่างในแนวตั้งและพื้นที่อื่นๆ ให้กับองค์ประกอบได้อย่างง่ายดาย

                11. ในขณะที่ค่าอินไลน์ไม่มี

                    เมื่อค่าของคุณสมบัติการแสดงผลเปลี่ยนเป็น inline หรือ inline-block เครื่องหมายรายการ ไม่ว่าจะเป็นจุด ตัวเลข หรืออื่นๆ จะถูกลบออก

                    • ส้ม
                    • สีเขียว
                    • สีฟ้า

                    Li ( จอแสดงผล: อินไลน์บล็อก; ระยะขอบ: 0 10px; )

                    การสาธิตรายการแบบอินไลน์บล็อก

                    รายการที่มีโฟลต

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

                12. เป็น ตัวเลือกที่ดีที่สุดกว่าการเปลี่ยนคุณสมบัติการแสดงผล

                    การติดตั้งสำหรับทุกองค์ประกอบ

                13. คุณสมบัติ float เช่น left จะจัดองค์ประกอบทั้งหมดให้อยู่ในแนวนอน
                14. ติดกันโดยไม่มีช่องว่างระหว่างกัน เมื่อเราใช้ float for
                15. เครื่องหมายรายการจะแสดงตามค่าเริ่มต้นและจะอยู่ที่ด้านบนของรายการ
                16. ข้างๆเขา เพื่อป้องกันไม่ให้เครื่องหมายรายการปรากฏบนรายการอื่น
                17. ต้องเพิ่มระยะขอบแนวนอนหรือช่องว่างภายใน
                    • ส้ม
                    • สีเขียว
                    • สีฟ้า

                    Li ( ลอย: ซ้าย; ระยะขอบ: 0 20px; )

                    การสาธิตรายการแบบลอยตัว

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

                    ตัวอย่างรายการการนำทาง

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

                18. จะแสดงเป็น inline-block

                    การนำทาง ul ( แบบอักษร: ตัวหนา 11px "Helvetica Neue", Helvetica, Arial, sans-serif; ระยะขอบ: 0; การขยาย: 0; การแปลงข้อความ: ตัวพิมพ์ใหญ่; ) .navigation li ( จอแสดงผล: inline-block; ) .navigation a ( พื้นหลัง: #395870; พื้นหลัง: การไล่ระดับสีเชิงเส้น (#49708f, #293f50); .navigation a:hover ( พื้นหลัง: #314b60; box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3); ) .navigation li:first-child a ( รัศมีเส้นขอบ: 4px 0 0 4px; ) .navigation li: ลูกคนสุดท้าย a ( border-right: 0; border-radius: 0 4px 4px 0; )

                    การสาธิตรายการการนำทาง

                    ในทางปฏิบัติ

                    ตอนนี้เรารู้วิธีสร้างรายการใน HTML และ CSS แล้ว เรามาดูที่เว็บไซต์ Styles Conference ของเราแล้วดูว่าเราจะใช้รายการได้ที่ไหน

                    ตอนนี้เมนูนำทางในองค์ประกอบ

                    และ