กฎ CSS สำหรับปรับแต่งลักษณะที่ปรากฏของรายการบนหน้า html คุณสมบัติสไตล์รายการ (ประเภท รูปภาพ ตำแหน่ง) กฎสไตล์รายการ CSS สำเร็จรูป

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

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

รูปแบบรายการ - การออกแบบรายการด้วยโค้ด Html

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

สิ่งที่เรากำลังจะพิจารณาตอนนี้สามารถใช้ได้ทั้งสองอย่าง องค์ประกอบ HTML LI และสำหรับองค์ประกอบ Ul และ Ol (รายการหัวข้อย่อยและลำดับเลข ตามลำดับ) อะไรคือความแตกต่างระหว่างการใช้ list-style สำหรับแท็กเหล่านี้?

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

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

1. ไม่มี - จะไม่มีการทำเครื่องหมายใดๆ เลย (list-style-type:none; นำไปใช้กับรายการนี้ ดังนั้นจึงไม่มีเครื่องหมาย)
2. Disc เป็นวงกลมที่เต็มไปด้วยสี (list-style-type:disc; ใช้สำหรับบรรทัดนี้)
3. วงกลม - วงกลมเป็นเครื่องหมาย
4. Square - สี่เหลี่ยมจัตุรัสเป็นเครื่องหมาย
5. ทศนิยม - เลขอารบิค (list-style-type:decimal;)
6. อัลฟาล่าง - ตัวพิมพ์เล็ก
7. อัลฟาตอนบน - ตัวอักษรละตินตัวพิมพ์ใหญ่
8. โรมันล่าง - เลขโรมันตัวพิมพ์เล็ก
9. upper-roman - เลขโรมันในตัวพิมพ์ใหญ่

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

ในความเป็นจริง Ul และ Ol แตกต่างกันเพียงพฤติกรรมเริ่มต้นเท่านั้น (เครื่องหมาย Ul และหมายเลข Ol) แต่ถ้าคุณต้องการ คุณสามารถเปลี่ยนสไตล์รายการหนึ่งให้เป็นอีกสไตล์หนึ่งได้อย่างง่ายดายโดยใช้ list-style-type แบบอักษรที่ใช้สำหรับทำเครื่องหมายตัวเลขหรือตัวอักษรจะเหมือนกับแบบอักษรที่คุณกำหนดไว้สำหรับเนื้อหาของแท็ก LI ทุกประการ ตัวอย่างเช่นโดยการเปลี่ยนสีตัวอักษรของรายการเราจะเปลี่ยนและ สีเครื่องหมาย:

1. เปลี่ยนสีข้อความ (list-style-type:lower-roman;color:red) และเปลี่ยนสีเครื่องหมาย

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

เหล่านั้น. โดยพื้นฐานแล้ว ในรูปแบบรายการ-ตำแหน่ง เราระบุตำแหน่งที่ควรวางพื้นที่ที่มีเครื่องหมาย - ด้านนอกองค์ประกอบ LI (ด้านนอก) หรือด้านใน (ด้านใน) ตามค่าเริ่มต้น พื้นที่ที่มีเครื่องหมายจะถูกนำออกนอกขอบเขต เช่น จะใช้ค่าภายนอก

เรามาดูสิ่งนี้พร้อมตัวอย่าง ในองค์ประกอบแรกของรายการ ฉันจะเขียน list-style-position:in โดยเฉพาะ และเราจะดูว่าเกิดอะไรขึ้น:

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

รายการสไตล์รูปภาพและกฎ Css สำเร็จรูป

ต่อไปเรามี List-style-image - ให้คุณระบุรูปภาพที่จะใช้เป็นเครื่องหมาย กฎนี้ถูกกำหนดเป็นไม่มีตามค่าเริ่มต้น (เช่น ไม่มีการใช้รูปภาพเป็นเครื่องหมาย) แต่คุณสามารถเขียนฟังก์ชัน Url() ได้โดยการระบุเส้นทางไปยังรูปภาพ ซึ่งจะทำหน้าที่เป็นเครื่องหมายในรายการนี้ในภายหลัง:

อาจมีลักษณะเช่นนี้:

รายการสไตล์รูปภาพ: url (https://site/images/list_star.png);

1. ทุกอย่างเป็นค่าเริ่มต้นที่นี่
2. การใช้รูปภาพเป็นเครื่องหมายอาจมีลักษณะเช่นนี้ เห็นได้ชัดว่าคุณสามารถเลือกภาพที่เหมาะสมกว่าเพื่อจุดประสงค์นี้ได้
3. ตัวอย่างเช่นที่นี่

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

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

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

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

ฉันจะดูค่าเริ่มต้นได้ที่ไหน ใช่แล้ว ทุกอย่างอยู่ที่นั่นแล้ว - ในข้อกำหนด CSS เครื่องมือตรวจสอบ W3C ในคอลัมน์ "ค่าเริ่มต้น" ตรงข้ามคุณสมบัติที่คุณสนใจ:

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

ในทางปฏิบัติอาจมีลักษณะดังนี้:

รายการสไตล์: ภายใน URL โรมันตอนบน (https://site/images/list_star.png);

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

รายการสไตล์ประเภท: ไม่มี;

รายการสไตล์:ไม่มี;

ขอให้โชคดี! พบกันเร็ว ๆ นี้ในหน้าของเว็บไซต์บล็อก

คุณอาจจะสนใจ

แสดงผล (บล็อก ไม่มี อินไลน์) ใน CSS - ตั้งค่าประเภทการแสดงผลขององค์ประกอบ Html บนหน้าเว็บ วิธีกำหนดค่าสีพื้นหลังสลับของแถวของตาราง รายการ และองค์ประกอบ Html อื่น ๆ บนไซต์โดยใช้คลาสหลอกที่ nth-child
ลอยและชัดเจนใน CSS - เครื่องมือเค้าโครงบล็อก
การจัดตำแหน่งโดยใช้กฎ Z-index และ CSS Cursor เพื่อเปลี่ยนเคอร์เซอร์ของเมาส์
ตำแหน่ง (สัมบูรณ์ สัมพันธ์ และคงที่) - วิธีจัดตำแหน่งองค์ประกอบ Html ใน CSS (กฎด้านซ้าย ขวา บน และล่าง)
CSS มีไว้ทำอะไร วิธีเชื่อมต่อสไตล์ชีทแบบเรียงซ้อน เอกสาร HTMLและไวยากรณ์พื้นฐานของภาษานี้
คุณสมบัติซีเอสเอสตกแต่งข้อความ, จัดแนวตั้ง, จัดข้อความ, เยื้องข้อความสำหรับการตกแต่งข้อความในรูปแบบ Html
กฎแบบอักษร (น้ำหนัก ตระกูล ขนาด สไตล์) และความสูงของบรรทัดสำหรับการจัดรูปแบบแบบอักษรใน CSS
พื้นหลังใน CSS (สี ตำแหน่ง รูปภาพ ซ้ำ ไฟล์แนบ) - ทุกอย่างสำหรับการตั้งค่าสีพื้นหลังหรือรูปภาพพื้นหลังขององค์ประกอบ Html
CSS - มันคืออะไร สไตล์ชีทแบบเรียงซ้อนเชื่อมต่อกันอย่างไร รหัส HTMLใช้สไตล์และลิงค์
ลำดับความสำคัญใน Css และการเพิ่มขึ้นเนื่องจากความสำคัญ การผสมผสานและการจัดกลุ่มตัวเลือก สไตล์ผู้ใช้และผู้แต่ง

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

ข้อมูลโดยย่อ

ไวยากรณ์

รายการสไตล์ภาพ: ไม่มี | URL(<адрес>)

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

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

ตัวเลือกเอาต์พุตข้อความ

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

แอตทริบิวต์สไตล์การจัดข้อความระบุการจัดตำแหน่งแนวนอนของข้อความ:

การจัดแนวข้อความ: ซ้าย|ขวา|กึ่งกลาง|จัดชิดขอบ|สืบทอด

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

ตัวอย่าง:

P (จัดข้อความ: จัดชิดขอบ)
H1 (จัดข้อความ: กึ่งกลาง)

แอตทริบิวต์สไตล์ข้อความเยื้องระบุการเยื้องสำหรับ "เส้นสีแดง":

เยื้องข้อความ:<отступ "красной строки">

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

ตัวอย่าง:

P (เยื้องข้อความ: 5 มม.)

ตอนนี้ย่อหน้าจะมี "เส้นสีแดง"

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

แอตทริบิวต์ list-style-type style ระบุประเภทของสัญลักษณ์แสดงหัวข้อย่อยหรือหมายเลขสำหรับรายการ:

รายการสไตล์ประเภท: ดิสก์ | วงกลม | สี่เหลี่ยม | ทศนิยม | ทศนิยมนำศูนย์ |

โรมันตอนล่าง|โรมันตอนบน|กรีกตอนล่าง|อัลฟาตอนล่าง|ละตินตอนล่าง|

อัลฟาตอนบน|ละตินตอนบน|อาร์เมเนีย|จอร์เจีย|ไม่มี|สืบทอด

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

ดิสก์มาร์กเกอร์ในรูปแบบของวงกลมสีดำ (ลักษณะการทำงานปกติสำหรับรายการสัญลักษณ์แสดงหัวข้อย่อย)

วงกลม - เครื่องหมายในรูปแบบของวงกลมแสง

สี่เหลี่ยม - เครื่องหมายในรูปแบบของสี่เหลี่ยมจัตุรัส อาจสว่างหรือมืดขึ้นอยู่กับเว็บเบราว์เซอร์

ทศนิยม - การนับเลขด้วยเลขอารบิค (พฤติกรรมปกติสำหรับรายการลำดับเลข)

Decimal-leading-zero - ตัวเลขในเลขอารบิคตั้งแต่ 01 ถึง 99 โดยมีศูนย์นำหน้า

โรมันตอนล่าง - ตัวเลขโรมันตัวเล็ก

โรมันตอนบน - เลขโรมันขนาดใหญ่

กรีกตอนล่าง - กำหนดหมายเลขด้วยตัวอักษรกรีกตัวเล็ก

อัลฟาล่างและละตินล่าง - กำหนดหมายเลขด้วยตัวอักษรละตินตัวเล็ก

Upper-alpha และ upper-latin - กำหนดหมายเลขด้วยตัวอักษรละตินตัวพิมพ์ใหญ่

อาร์เมเนีย - การกำหนดหมายเลขโดยใช้ตัวเลขอาร์เมเนียแบบดั้งเดิม

จอร์เจีย - การกำหนดหมายเลขโดยใช้ตัวเลขจอร์เจียดั้งเดิม

ไม่มี - ไม่มีเครื่องหมายหรือลำดับเลข (ลักษณะการทำงานปกติสำหรับผู้ที่ไม่ใช่รายการ)

บันทึก

เราได้ดูเฉพาะค่าแอตทริบิวต์ประเภทรายการสไตล์ที่จัดทำโดย CSS 3 อย่างไรก็ตาม CSS 2 จัดเตรียมค่าเพิ่มเติมอีกหลายค่าที่เว็บเบราว์เซอร์ยังคงรองรับ คุณสามารถค้นหาได้บนหน้าเว็บ https://developer.mozilla.org/en/CSS/list-style-type

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

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

UL (ประเภทรายการสไตล์: สี่เหลี่ยมจัตุรัส)

และในรายการ 9.1 เราได้ตั้งค่าเครื่องหมายเดียวกันสำหรับรายการหัวข้อย่อยรายการใดรายการหนึ่ง

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

รายการสไตล์ภาพ: none|<интернет-адрес файла изображения>|สืบทอด

ที่อยู่อินเทอร์เน็ตของไฟล์มาร์กเกอร์กราฟิกถูกระบุในรูปแบบเดียวกับที่อยู่อินเทอร์เน็ตของไฟล์รูปภาพพื้นหลัง (ดูบทที่ 8):

UL ( รายการสไตล์รูปภาพ: url(/markers/dot.gif) )

ค่า none จะลบเครื่องหมายกราฟิกออกและส่งกลับค่าธรรมดาที่ไม่ใช่กราฟิก นี่เป็นพฤติกรรมปกติ

list-style-image style แอตทริบิวต์สามารถตั้งค่าได้ทั้งสำหรับรายการและสำหรับแต่ละรายการ

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

รายการสไตล์ตำแหน่ง: ภายใน | ภายนอก | สืบทอด

มีสองค่าที่ใช้ได้:

ข้างใน - เครื่องหมายหรือลำดับเลขเป็นส่วนหนึ่งของรายการ

ภายนอก - เครื่องหมายหรือหมายเลขถูกย้ายออกไปด้านนอกรายการ รายการ(นี่เป็นพฤติกรรมปกติ)

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

ตัวอย่าง:

OL ( รายการสไตล์ตำแหน่ง: ภายใน )

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

ข้อมูลโดยย่อ

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

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

ขอบเขตการใช้งาน*: รายการองค์ประกอบและอื่น ๆ ที่มีมูลค่าทรัพย์สิน แสดงเป็น รายการสินค้า.

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

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

ค่า:

ดิสก์- เครื่องหมายจุด
วงกลม- เครื่องหมายวงกลม
สี่เหลี่ยม— เครื่องหมายสี่เหลี่ยม
ทศนิยม— ตัวเลขอารบิก: 1, 2, 3….
ทศนิยมนำหน้าศูนย์- ตัวเลขอารบิกเริ่มต้นจากศูนย์: 01, 02, 03 ... 09
lowel-โรแมนติก- เลขโรมันเป็นตัวพิมพ์เล็ก
นวนิยายบน- เลขโรมันเป็นตัวพิมพ์ใหญ่
lowel-ละติน— ตัวอักษรละตินตัวพิมพ์เล็ก: a, b, c….
ละตินตอนบน— ตัวอักษรละตินตัวพิมพ์ใหญ่: A, B, C….
อาร์เมเนีย- การนับเลขอาร์เมเนีย
จอร์เจีย- การนับเลขแบบจอร์เจีย
ไม่มี- การยกเลิก
สืบทอด

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

รายการสไตล์ตำแหน่ง

คุณสมบัติระบุตำแหน่งของเครื่องหมายขององค์ประกอบ เครื่องหมายอยู่ภายในองค์ประกอบหรือภายนอกองค์ประกอบ

ค่า:

ข้างใน— เครื่องหมายตั้งอยู่ภายในองค์ประกอบรายการ
ข้างนอก— เครื่องหมายถูกย้ายออกไปนอกบล็อกข้อความ
สืบทอด- การสืบทอดจากองค์ประกอบหลัก

ตัวอย่างแสดงให้เห็นความแตกต่างระหว่างค่าต่างๆ อย่างชัดเจน ข้างในและ ข้างนอกคุณสมบัติ รายการสไตล์ตำแหน่ง:

รายการสไตล์รูปภาพ

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

ค่า:

URL- เส้นทางสู่ ไฟล์กราฟิก.
ไม่มี— ยกเลิกภาพเครื่องหมาย เช่น สำหรับองค์ประกอบหลัก
สืบทอด- การสืบทอดจากองค์ประกอบหลัก

Ul (รายการสไตล์รูปภาพ: url(papka/find.png); list-style-position:inside;)

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