รูปแบบรายการเริ่มต้น (CSS) คืออะไร?

91

บนเว็บไซต์ของฉันฉันใช้ reset.css มันเพิ่มสิ่งนี้ให้กับรูปแบบรายการ:

ol, ul {
    list-style: none outside none;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    font-size: 100%;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
}

ปัญหาคือสไตล์รายการทั้งหมดถูกตั้งค่าNONEด้วยสิ่งนี้ ฉันต้องการเปลี่ยนกลับรูปแบบรายการดั้งเดิม (ค่าเริ่มต้น) สำหรับรายการทั้งหมดในหน้าย่อยของเว็บไซต์เท่านั้น (รายการทั้งหมดใน.my_container)

เมื่อฉันลองตั้งค่าสิ่งที่ต้องการlist-style-typeจะinheritไม่สืบทอดสไตล์เริ่มต้นของเบราว์เซอร์สำหรับคุณสมบัติ CSS นี้เท่านั้น

มีวิธีใดบ้างในการสืบทอดสไตล์เบราว์เซอร์ดั้งเดิมสำหรับคุณสมบัติบางอย่างโดยไม่ต้องแก้ไข reset.css

html css html-lists

— Atadj
แหล่งที่มา

4

reset.css เป็นหนึ่งในรูปแบบการต่อต้านที่เลวร้ายที่สุดในการออกแบบเว็บ

— ᆼᆺᆼ

9

แทนที่จะใช้สไตล์ชีตการรีเซ็ตแบบเต็มรูปแบบให้พิจารณาบางอย่างเช่นgithub.com/necolas/normalize.cssซึ่งตั้งค่าเริ่มต้นที่เหมาะสมสำหรับองค์ประกอบทั้งหมด ด้วยวิธีนี้คุณจะเริ่มต้นด้วยพื้นฐานในทุกเบราว์เซอร์และสามารถสร้างจากที่นั่นได้ นอกจากนี้คุณไม่ต้องเพิ่มรหัสพิเศษเพื่อกลับสู่การตั้งค่าเริ่มต้น!

— Olly Hodgson

1

@OllyHodgson ใช่ แต่ฉันมีเหตุผลเฉพาะว่าทำไมฉันถึงต้องการใช้ reset.css ฉันต้องการล้างสไตล์ให้มากที่สุดเท่าที่จะเป็นไปได้และฉันต้องการเขียนใหม่ - ไม่ใช่วิธีอื่น :)

— Atadj

1

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

— BoltClock

1

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

— Atadj

149

ฉันเคยตั้งค่า CSS นี้เพื่อลบการรีเซ็ต:

ul { 
   list-style-type: disc; 
   list-style-position: inside; 
}
ol { 
   list-style-type: decimal; 
   list-style-position: inside; 
}
ul ul, ol ul { 
   list-style-type: circle; 
   list-style-position: inside; 
   margin-left: 15px; 
}
ol ol, ul ol { 
   list-style-type: lower-latin; 
   list-style-position: inside; 
   margin-left: 15px; 
}

แก้ไข: มีคลาสเฉพาะแน่นอน ...

— zessx
แหล่งที่มา

จนถึงตอนนี้มันใช้งานได้อย่างที่ควรจะเป็น :) ฉันคิดว่าสิ่งนี้ช่วยแก้ปัญหาของฉันได้ ฉันจะทดสอบเพิ่มเติมตอนนี้ด้วยรายการที่ซ้อนกันเป็นต้น

— Atadj

6

ไม่ "เปลี่ยนกลับรูปแบบรายการเดิม (ค่าเริ่มต้น)" มันกำหนดรูปแบบบางอย่าง

— Jukka K. Korpela

ฉันเห็นด้วย แต่ไม่ว่าจะด้วยวิธีใดเป้าหมายก็แค่กำหนดสไตล์บางอย่าง CSS นี้ให้สไตล์พื้นฐานสวย ๆ ในรายการไม่มีอีกแล้ว

— zessx

3

ไม่มีตัวเลือก "ค่าเริ่มต้น" สำหรับประเภทรายการและฉันพบว่าหลังจากได้รับคำตอบ เบราว์เซอร์เพียงเพิ่มสไตล์บางอย่างซึ่งมักจะไม่สอดคล้องกันระหว่างเบราว์เซอร์

— Atadj

1

ฉันยังมีคนตั้งค่า display: inline-block; และดูเหมือนว่าจะต้องเป็น list-item เพื่อให้สัญลักษณ์แสดงหัวข้อย่อยแสดงอีกครั้ง

— มาร์ค

33

ฉันคิดว่านี่คือสิ่งที่คุณกำลังมองหา:

.my_container ul
{
    list-style: initial;
    margin: initial;
    padding: 0 0 0 40px;
}

.my_container li
{
    display: list-item;
}

— ColdCold
แหล่งที่มา

ใช่ฉันคิดว่าคำตอบนี้ก็สำคัญเช่นกัน inheritสืบทอดสไตล์จากคอนเทนเนอร์หลักและไม่ได้ตั้งค่าเป็นค่าเริ่มต้นของเบราว์เซอร์ initialสิ่งนี้หรือไม่ (ฉันค้นพบเกี่ยวกับการมีอยู่ของมันในภายหลัง) แต่คุณแน่ใจหรือไม่ว่าul { list-style: initial; }และol { list-style: initial; }จะให้ผลลัพธ์ที่ถูกต้อง? ไม่ได้ตั้งค่าlist-styleเป็นค่าเริ่มต้นโดยไม่คำนึงถึงองค์ประกอบที่จะนำไปใช้? ค่านี้จะไม่initialเป็นdisc outside noneของทั้งสองประเภทหรือไม่?

— Atadj

1

น่าทึ่งinitialไม่เคยเกิดขึ้นกับฉัน!

— BenjaminRH

9

initialไม่รองรับ IE msdn.microsoft.com/en-us/library/…

— lulalala

12

ตามเอกสาร, เบราว์เซอร์ส่วนใหญ่จะแสดง<ul>, <ol>และ<li>องค์ประกอบที่มีค่าเริ่มต้นต่อไปนี้:

การตั้งค่า CSS เริ่มต้นสำหรับแท็กULหรือOL :

ul, ol { 
    display: block;
    list-style: disc outside none;
    margin: 1em 0;
    padding: 0 0 0 40px;
}
ol { 
    list-style-type: decimal;
}

การตั้งค่า CSS เริ่มต้นสำหรับแท็กLI :

li { 
    display: list-item;
}

สไตล์รายการที่ซ้อนกันเช่นกัน:

ul ul, ol ul {
    list-style-type: circle;
    margin-left: 15px; 
}
ol ol, ul ol { 
    list-style-type: lower-latin;
    margin-left: 15px; 
}

หมายเหตุ:ผลลัพธ์จะสมบูรณ์แบบถ้าเราใช้สไตล์ข้างต้นกับคลาส ดูเครื่องหมายรายการ - รายการที่แตกต่างกัน

— เรซ่ามามุน
แหล่งที่มา

หากเป็นกรณีนี้รายการที่ซ้อนกันจะมีการเพิ่มขอบบนและล่างพร้อมกับระดับใหม่ใด ๆ

— VorganHaze

10

http://www.w3schools.com/tags/tag_ul.asp

ul { 
    display: block;
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

— jerrygarciuh
แหล่งที่มา

1

ขอบคุณช่วยชีวิตฉันสงสัยว่าทำไมมีช่องว่างในเมนูย่อยของฉัน

— Asura

สิ่งนี้จะเพิ่ม vertical.margij ในรายการที่ซ้อนกัน

— VorganHaze

4

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

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

— จั๊กกะ.. ก.. เปล่า
แหล่งที่มา

2

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

.my_container ul {list-style:disc outside none; margin-left:40px;}

— OmidAntiLong
แหล่งที่มา

1

คำตอบสำหรับอนาคต: CSS 4 อาจมีคีย์เวิร์ด revert ซึ่งเปลี่ยนคุณสมบัติเป็นค่าจาก user หรือ user-agent stylesheet [ source ] ในขณะที่เขียนสิ่งนี้มีเพียง Safari เท่านั้นที่สนับสนุนสิ่งนี้โปรดตรวจสอบการอัปเดตเกี่ยวกับการรองรับเบราว์เซอร์ที่นี่

ในกรณีของคุณคุณจะใช้:

.my_container ol, .my_container ul {
    list-style: revert;
}

ดูคำตอบอื่น ๆพร้อมรายละเอียดเพิ่มเติม

— ทาเนียส
แหล่งที่มา