CSS सूचियाँ
HTML आपको ul और ol देता है। CSS तय करता है वे सूचियाँ कैसी दिखें — गोल बुलेट, वर्ग, संख्याएँ, अक्षर, या नेव मेनू बनाते समय बिल्कुल बिना मार्कर।
list-style टूलकिट
📊 एक नज़र में सूची शैलियाँ
| प्रॉपर्टी | रोज़ का काम |
|---|---|
list-style-type |
मार्कर आकार या क्रमांकन शैली (disc, square, decimal…) |
list-style-position |
मार्कर कंटेंट बॉक्स के अंदर या बाहर |
list-style-image |
मार्कर के रूप में छवि |
list-style |
type, position और image का shorthand |
list-style: none |
मार्कर हटाना (नेव मेनू के लिए आम) |
मार्कर सूची आइटम के हैं, पर आप आमतौर पर ul या ol पर स्टाइल लगाते हैं ताकि हर li वही रूप ले।
बुलेट प्रकार
अव्यवस्थित सूचियाँ अक्सर disc से शुरू होती हैं। डिज़ाइन शांत या तेज़ मार्कर चाहे तो circle या square पर जाएँ।
बुलेट मार्कर प्रकार
cssul.features {
list-style-type: square;
}
ul.notes {
list-style-type: circle;
}क्रमांकित और अक्षरीय सूचियाँ
व्यवस्थित सूचियाँ क्रमांकन शैलियाँ उपयोग करती हैं। decimal रोज़ का विकल्प है; lower-alpha या upper-roman रूपरेखा और औपचारिक चरणों के लिए ठीक।
व्यवस्थित सूची प्रकार
cssol.steps {
list-style-type: decimal;
}
ol.outline {
list-style-type: lower-alpha;
}मार्कर स्थान — अंदर या बाहर
list-style-position: outside (आम डिफ़ॉल्ट) मार्कर को मार्जिन में रखता है। inside उसे टेक्स्ट प्रवाह में खींचता है — तंग कार्ड में उपयोगी।
प्रवाह में मार्कर
cssul.card-list {
list-style-position: inside;
padding-left: 0;
}मेनू के लिए मार्कर हटाएँ
नेविगेशन सूचियाँ शायद ही बुलेट चाहती हैं। list-style: none उन्हें साफ़ करता है — फिर padding/margin से अपना अंतराल दें।
साफ़ नेव सूची
cssnav ul {
list-style: none;
margin: 0;
padding: 0;
}छवि मार्कर और shorthand
छोटी छवि बुलेट की जगह ले सकती है। छोटे एसेट रखें। list-style shorthand एक पंक्ति में type, position और image सेट कर सकता है।
छवि मार्कर + shorthand
cssul.custom {
list-style: square outside none;
}
ul.icons {
list-style-image: url("/icons/check.svg");
}शांत सूची आदत
प्रति सूची एक साफ़ मार्कर शैली चुनें, छवि मार्कर छोटे रखें, और मेनू के लिए none के बाद padding रीसेट करें ताकि आइटम साफ़ संरेखित हों।
पठनीय लेख सूची
cssarticle ul {
list-style-type: disc;
list-style-position: outside;
padding-left: 1.25rem;
line-height: 1.6;
}खुद आज़माएँ
- एक
ulकोlist-style-type: squareकरें। - एक
olकोlower-alphaसे स्टाइल करें। - छोटे कार्ड सूची पर
list-style-position: insideलगाएँ। nav ulसेlist-style: noneऔर शून्य padding से बुलेट हटाएँ।- छोटा
list-style-imageआज़माएँ; छवि फेल हो तो type पर लौटें।
आम गलतियाँ
- सोचना कि केवल
liपरcolorहर जगह कस्टम मार्कर बदल देगा list-style: noneलगाना पर बड़ा डिफ़ॉल्ट padding छोड़ना जो टूटा लगे- विशाल
list-style-imageफ़ाइलें जो पंक्ति पर हावी हों - क्रम मायने रखे तो CSS से
ulक्रमांकित करना बजाय अर्थपूर्णol - इस पाठ को लिंक hover/visited से मिलाना (पिछला सत्र)
सारांश
list-style-typeबुलेट या क्रमांकन शैली चुनता हैlist-style-positionमार्कर अंदर या बाहर रखता हैlist-style: noneमेनू के लिए मार्कर साफ़ करता हैlist-style-imageऔरlist-styleshorthand अतिरिक्त विकल्प देते हैं- मार्कर शांत रखें और बुलेट हटाने के बाद padding जानबूझकर सेट करें
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी