डिफ़ॉल्ट सूची स्टाइल (CSS) क्या है?


90

अपनी वेबसाइट पर मैं 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 को संशोधित किए बिना कुछ गुणों के लिए मूल ब्राउज़र की शैलियों को इनहेरिट करने का कोई तरीका है?


4
reset.css वेब डिज़ाइन में सबसे खराब प्रतिमानों में से एक है।
9: ᆼ

9
फुल-ऑन रीसेट स्टाइलशीट के बजाय, github.com/necolas/normalize.css जैसा कुछ विचार करें जो सभी तत्वों के लिए समझदार चूक निर्धारित करता है। इस तरह, आप सभी ब्राउज़रों के बीच एक आधार रेखा से शुरू करते हैं और वहां से निर्माण कर सकते हैं। साथ ही, आपको डिफ़ॉल्ट सेटिंग्स पर वापस जाने के लिए अतिरिक्त कोड नहीं जोड़ना होगा!
Olly Hodgson

1
@OllyHodgson हां, लेकिन मुझे विशिष्ट कारण मिले हैं कि मैं रीसेट का उपयोग क्यों करना चाहता हूं। मुझे वास्तव में जितना संभव हो उतना स्टाइल को स्पष्ट करने की आवश्यकता है और मैं इसे फिर से लिखना चाहता हूं - अन्य तरीके से नहीं :) :)
Atadj

1
यदि आप उन्हें मिटाना चाहते हैं और उन्हें फिर से लिखना चाहते हैं, तो इस सवाल का क्या मतलब है? जहां तक ​​मैं देख सकता हूं कि आपके पास दो विकल्प हैं: 1) विशेष रूप से सूची शैलियों को रीसेट करने से बचें ताकि आप चूक 2 रखें) उन्हें रीसेट करें, और अपनी सूची शैलियों के साथ आएं।
BoltClock

1
@BoltClock - बस स्पष्ट करने के लिए - मैं उपयोगकर्ताओं को अपनी सूची को खरोंच से बनाने का अवसर देना चाहता हूं (मैंने प्रत्येक संभव शैली के लिए वर्ग जोड़ा) - मैं केवल सोच रहा था कि "डिफ़ॉल्ट" सेटिंग जैसी कोई चीज है लेकिन चूंकि कोई भी नहीं है डिफ़ॉल्ट स्टाइल - मैं बस एक बनाऊंगा।
अत्जज

जवाबों:


148

मैं रीसेट को हटाने के लिए इस 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; 
}

संपादित करें: पाठ्यक्रम के एक विशिष्ट वर्ग के साथ ...


अब तक यह काम करता है जैसे यह होना चाहिए :) मुझे लगता है कि यह मेरा सवाल हल करता है। मैं अब इसे नेस्टेड सूचियों आदि के साथ परीक्षण करने जा रहा हूं
एतादज

5
यह "मूल सूची शैलियों (डिफ़ॉल्ट) को वापस नहीं करता है"। यह सिर्फ कुछ शैलियों को निर्धारित करता है ।
जुका के। कोरपेला

मैं सहमत हूं, लेकिन जो भी हो, लक्ष्य सिर्फ कुछ शैली निर्धारित करना था। यह सीएसएस सूचियों के लिए एक बहुत ही मूल शैली देता है, और नहीं।
14:31 पर zessx

2
सूची-शैली-प्रकार के लिए कोई "डिफ़ॉल्ट" विकल्प नहीं है और मुझे जवाब मिलने के बाद पता चला। ब्राउज़र केवल कुछ शैलियों को जोड़ते हैं जो अक्सर ब्राउज़रों के बीच संगत नहीं होती हैं।
अत्जज

1
मेरे पास कोई सेट डिस्प्ले भी था: इनलाइन-ब्लॉक; और ऐसा प्रतीत होता है कि गोलियों को फिर से दिखाने के लिए इसे सूची-आइटम की आवश्यकता है।
मार्क

32

मुझे लगता है कि यह वास्तव में आप क्या देख रहे हैं:

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

.my_container li
{
    display: list-item;
}

हां, मुझे लगता है कि यह उत्तर कुछ महत्वपूर्ण भी है। inheritमूल कंटेनर से शैलियों को विरासत में मिला है और यह उन्हें डिफ़ॉल्ट ब्राउज़र मानों पर सेट नहीं करता है। initialक्या यह (मुझे इसके अस्तित्व के बारे में बाद में पता चला) लेकिन क्या आपको यकीन है कि ul { list-style: initial; }और ol { list-style: initial; }एक वैध परिणाम देगा? list-styleजिस तत्व पर इसे लागू किया गया है, उसकी परवाह किए बिना क्या यह अपने प्रारंभिक मूल्य पर सेट नहीं है? क्या initialमूल्य disc outside noneदोनों प्रकार की सूचियों के लिए नहीं होगा ?
अत्तज

1
कमाल है, initialमुझे कभी नहीं हुआ!
बेंजामिन


12

प्रलेखन के अनुसार, अधिकांश ब्राउज़र को प्रदर्शित करेगा <ul>, <ol>और <li>निम्न मूलभूत मूल्यों के साथ तत्वों:

UL या OL टैग के लिए डिफ़ॉल्ट सीएसएस सेटिंग्स :

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

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; 
}

नोट: यदि हम उपरोक्त शैलियों का उपयोग किसी वर्ग के साथ करते हैं तो परिणाम सही होगा। विभिन्न सूची-आइटम मार्कर भी देखें ।


यदि ऐसा होता, तो नेस्टेड सूची में किसी नए स्तर के साथ एक शीर्ष और निचला मार्जिन जोड़ा जाता।
वर्गनहेज़

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;
}

1
धन्यवाद ने मेरी जान बचाई, सोच रहा था कि मेरे सबमेनू में नरक क्यों था।
असुर

यह किसी भी नेस्टेड सूची पर वर्टिकल.मर्गिज जोड़ देगा।
वर्गनहेज़

4

आप नहीं कर सकते। जब भी कोई शैली पत्रक लागू किया जा रहा है जो किसी तत्व को एक संपत्ति प्रदान करता है, तो तत्व के किसी भी उदाहरण के लिए ब्राउज़र डिफॉल्ट्स को प्राप्त करने का कोई तरीका नहीं है।

Reset.css का (विवादित) विचार ब्राउज़र की चूक से छुटकारा पाने के लिए है, ताकि आप एक साफ डेस्क से अपनी स्टाइल शुरू कर सकें। Reset.css का कोई भी संस्करण पूरी तरह से नहीं करता है, लेकिन वे जिस हद तक करते हैं, रीसेट का उपयोग करने वाला लेखक पूरी तरह से रेंडरिंग को परिभाषित करने वाला है।


2

आप दूसरी सीएसएस ब्लॉक में सभी तत्वों पर मार्जिन को रीसेट कर रहे हैं। डिफ़ॉल्ट मार्जिन 40px है - इस समस्या को हल करना चाहिए:

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

1

भविष्य के लिए एक उत्तर: CSS 4 में संभवत: रिवर्ट कीवर्ड होगा, जो उपयोगकर्ता या उपयोगकर्ता-एजेंट स्टाइलशीट [ स्रोत ] से अपने मूल्य के लिए एक संपत्ति देता है । इसे लिखने के रूप में, केवल सफारी इस का समर्थन करता है - ब्राउज़र समर्थन पर अपडेट के लिए यहां देखें

आपके मामले में आप उपयोग करेंगे:

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

कुछ अन्य विवरणों के साथ यह अन्य उत्तर भी देखें।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.