पाठ 15, कुल 30 में

CSS लिस्ट्स

4 मिनट पढ़ें · मुफ़्त · बिना लॉगिन

English हिंदी

CSS लिंक्स CSS टेबल्स

HTML आपको दो तरह की lists देता है — <ul> bullets वाली और <ol> नंबरों वाली। CSS तय करता है कि वे bullets और नंबर कैसे दिखें, कहाँ बैठें, और दिखें भी या नहीं। Navigation menu असल में सिर्फ एक list है जिसके bullets हटा दिए गए हैं।

Diagram — देखें, यह सब कैसे जुड़ता है

list-style-type — कौन-सा marker

list-style-type marker चुनता है। Unordered lists के लिए: disc (भरा हुआ गोला, डिफ़ॉल्ट), circle (खाली गोला), square, या none (कोई marker नहीं)। Ordered lists के लिए: decimal (1, 2, 3), lower-alpha (a, b, c), upper-alpha (A, B, C), lower-roman (i, ii, iii) या upper-roman (I, II, III)।

list-style-position — inside या outside

list-style-position: outside; (डिफ़ॉल्ट) marker को text के बाहर रखता है, इसलिए लिपटी हुई लाइनें text के नीचे सीधी रहती हैं, marker के नीचे नहीं। inside marker को text के बहाव में खींच लेता है, इसलिए लिपटी हुई लाइनें marker के नीचे से शुरू होती हैं। ज़्यादातर lists के लिए outside ज़्यादा सुथरा लगता है; inside सँकरे बॉक्सों के लिए काम आता है।

list-style-image — तस्वीर वाला marker

list-style-image: url("tick.png"); bullet की जगह तस्वीर लगा देता है। यह मज़ेदार लगता है, लेकिन तस्वीर का size बदला नहीं जा सकता और उसकी जगह पर नियंत्रण मुश्किल है, इसलिए ज़्यादातर developers background image या ::marker pseudo-element इस्तेमाल करते हैं।

Syntax — lists काम में

ul.tasks {
  list-style-type: square;
  list-style-position: inside;
}
ol.toppers {
  list-style-type: upper-roman;
}
ul.menu {
  list-style: none;
  padding: 0;
}

आखिरी rule shorthand है: list-style type, position और image को एक लाइन में तय करता है — list-style: square inside url("tick.png");। जो मान आप छोड़ देते हैं वह अपने डिफ़ॉल्ट पर रहता है।

Counters — अपने नंबर खुद

CSS counters आपको चीज़ों को अपनी शैली में खुद नंबर देने देते हैं। List पर counter reset करें, हर item पर एक जोड़ें, और content से उसे छापें:

ol.steps {
  list-style: none;
  counter-reset: step;
}
ol.steps li::before {
  counter-increment: step;
  content: "Step " counter(step) ": ";
  font-weight: bold;
}

अब हर item "Step 1:", "Step 2:" से शुरू होता है — और अगर आप items का क्रम बदल दें, तो नंबर अपने आप साथ चलते हैं।

Note: list-style-type को <ul> या <ol> पर लगाएँ, <li> पर नहीं। यह दोनों पर काम करता है, लेकिन सूची पर एक बार लगाने से पूरी list एक जैसी रहती है।

Tip: Navigation menu एक <ul> है जिस पर list-style: none; और padding: 0; लगा है — bullets हटाएँ और डिफ़ॉल्ट बाईं padding हटाएँ, और list links की साफ़ पंक्ति बन जाती है।

आम गलतियाँ

list-style: none; से bullets हटाना पर डिफ़ॉल्ट बाईं padding भूल जाना — list अब भी अंदर धँसी रहती है। padding: 0; जोड़ें।
list-style-type को सूची पर एक बार लगाने की जगह हर <li> पर लगाना।
list-style-image के रूप में बड़ी तस्वीर इस्तेमाल करना — उसका size बदला नहीं जा सकता और वह text के बगल में अक्सर बहुत बड़ी दिखती है।
Ordered list तब इस्तेमाल करना जब क्रम मायने ही नहीं रखता — अगर क्रम का कोई मतलब नहीं है, तो <ul> इस्तेमाल करें।

याद रखें

list-style-type marker चुनता है: disc, circle, square, none, decimal, lower-alpha, upper-roman।
outside (डिफ़ॉल्ट) लिपटी हुई लाइनों को text के नीचे सीधा रखता है; inside marker को अंदर खींच लेता है।
list-style: none; padding: 0; list को साफ़ menu में बदल देता है।
list-style shorthand है type, position, image — किसी भी क्रम में।
CSS counters (counter-reset, counter-increment, content) आपके अपने नंबर छापते हैं।
तरकीब: बुलेट हटाओ, padding शून्य करो — मेनू तैयार।

उदाहरण समझिए

ul.tasks { list-style-type: square; } — आज के कामों को गोल bullets की जगह चौकोर bullets मिलते हैं, इसलिए वे checklist जैसे दिखते हैं।
ul.tasks { list-style-position: inside; } — चौकोर bullets text के बहाव के अंदर बैठते हैं, इसलिए जो लंबा काम दूसरी लाइन पर लिपटता है वह square के नीचे से शुरू होता है।
ol.toppers { list-style-type: upper-roman; } — तीन toppers को रोमन अंकों I, II, III में नंबर मिलते हैं, जो merit list के लिए जँचता है।
ul.menu { list-style: none; padding: 0; } — menu list अपने bullets और डिफ़ॉल्ट बाईं padding खो देती है, जिससे links की साफ़ पंक्ति बचती है।
.tasks li { padding: 6px; } — हर task item के अंदर थोड़ी जगह, ताकि list भरी-भरी न लगे।
.menu li { display: inline; } — हर menu item अगले item के साथ एक ही लाइन पर बैठता है, जिससे खड़ी list आड़ी menu में बदल जाती है।

उदाहरण

Example

<!DOCTYPE html>
<html>
<head>
<title>Lists - School Day</title>
<style>
ul.tasks { list-style-type: square; list-style-position: inside; }
ol.toppers { list-style-type: upper-roman; }
ul.menu { list-style: none; padding: 0; }
.tasks li { padding: 6px; }
.menu li { display: inline; margin-right: 12px; }
</style>
</head>
<body>

<h2>Today's Tasks</h2>
<ul class="tasks">
<li>Revise CSS padding</li>
<li>Finish the timetable project</li>
<li>Submit the maths homework</li>
</ul>
<h2>Class Toppers</h2>
<ol class="toppers">
<li>Ananya Sharma</li>
<li>Rohan Verma</li>
<li>Priya Singh</li>
</ol>
<ul class="menu">
<li>Home</li>
<li>Courses</li>
<li>Contact</li>
</ul>

</body>
</html>

परिणाम

परिणाम — ब्राउज़र में यह कैसा दिखता है

खुद करके देखें — लाइव एडिटर

नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।

पूरे एडिटर में खोलें

परिणाम

खुद क्यों सीखें — AI से पूछने के बजाय?

AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।