सूची-संबंधित CSS गुण

Articles

यह लेख सूची-संबंधित CSS गुणों की व्याख्या करता है।

आप list-style गुण और counter() फ़ंक्शन का उपयोग और लेखन सीख सकते हैं।

YouTube Video

प्रीव्यू के लिए HTML

css-list.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-list.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>List Related CSS Properties</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>List Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>list-style</h3>
 23            <section>
 24                <header><h4>list-style-type: circle; list-style-position: inside;</h4></header>
 25                <section class="sample-view">
 26                    <h5>Unordered List (ul)</h5>
 27                    <ul>
 28                        <li>Item 1</li>
 29                        <li>Item 2</li>
 30                        <li>Item 3</li>
 31                    </ul>
 32                </section>
 33                <header><h4>list-style: upper-roman outside</h4></header>
 34                <section class="sample-view">
 35                    <h5>Ordered List (ol)</h5>
 36                    <ol>
 37                        <li>First</li>
 38                        <li>Second</li>
 39                        <li>Third</li>
 40                    </ol>
 41                </section>
 42                <header><h4>list-style-image: url('custom-bullet.png')</h4></header>
 43                <section class="sample-view">
 44                    <h5>Custom Bullet List</h5>
 45                    <ul class="custom-list">
 46                        <li>Custom Item 1</li>
 47                        <li>Custom Item 2</li>
 48                        <li>Custom Item 3</li>
 49                    </ul>
 50                </section>
 51            </section>
 52        </article>
 53        <article>
 54            <h3>counter()</h3>
 55            <section>
 56                <header><h4>CSS</h4></header>
 57<pre class="sample">
 58dl {
 59    counter-reset: item;
 60}
 61
 62dl dt::before {
 63    counter-increment: item; /* Increment the counter */
 64    content: counter(item) ". "; /* Display the counter */
 65}
 66</pre>
 67                <header><h4>HTML</h4></header>
 68<pre>
 69&lt;dl&gt;
 70    &lt;dt&gt;Term A&lt;/dt&gt;
 71    &lt;dd&gt;Explication for term A&lt;/dd&gt;
 72    &lt;dt&gt;Term B&lt;/dt&gt;
 73    &lt;dd&gt;Explication for term B&lt;/dd&gt;
 74    &lt;dt&gt;Term C&lt;/dt&gt;
 75    &lt;dd&gt;Explication for term C&lt;/dd&gt;
 76&lt;/dl&gt;
 77</pre>
 78                <header><h4>HTML+CSS</h4></header>
 79                <section class="sample-view">
 80                    <dl>
 81                        <dt>Term A</dt>
 82                        <dd>Explication for term A</dd>
 83                        <dt>Term B</dt>
 84                        <dd>Explication for term B</dd>
 85                        <dt>Term C</dt>
 86                        <dd>Explication for term C</dd>
 87                    </dl>
 88                </section>
 89            </section>
 90        </article>
 91        <article>
 92            <h3>counters()</h3>
 93            <section>
 94                <header><h4>CSS</h4></header>
 95<pre class="sample">
 96ol {
 97    list-style: none;
 98    counter-reset: list-counter;
 99}
100
101li {
102    counter-increment: list-counter;
103}
104
105li::before {
106    content: counters(list-counter, ".") " ";
107}
108</pre>
109                <header><h4>HTML</h4></header>
110<pre>
111&lt;ol&gt;
112    &lt;li&gt;Item A
113        &lt;ol&gt;
114            &lt;li&gt;Subitem A-1&lt;/li&gt;
115            &lt;li&gt;Subitem A-2&lt;/li&gt;
116        &lt;/ol&gt;
117    &lt;/li&gt;
118    &lt;li&gt;Item B
119        &lt;ol&gt;
120            &lt;li&gt;Subitem B-1&lt;/li&gt;
121        &lt;/ol&gt;
122    &lt;/li&gt;
123&lt;/ol&gt;
124</pre>
125                <header><h4>HTML+CSS</h4></header>
126                <section class="sample-view">
127                    <ol>
128                        <li>Item A
129                            <ol>
130                                <li>Subitem A-1</li>
131                                <li>Subitem A-2</li>
132                            </ol>
133                        </li>
134                        <li>Item B
135                            <ol>
136                                <li>Subitem B-1</li>
137                            </ol>
138                        </li>
139                    </ol>
140                </section>
141            </section>
142            <section>
143                <header><h4>CSS</h4></header>
144<pre class="sample">
145article {
146    counter-reset: chapter;
147}
148h1.chapter {
149    counter-increment: chapter;
150    counter-reset: section;
151}
152h1.chapter::before {
153    content: counter(chapter) " ";
154}
155h2.section {
156    counter-increment: section;
157    counter-reset: sub-section;
158}
159h2.section::before {
160    content: counters(chapter, ".") "." counter(section) " ";
161}
162h3.sub-section {
163    counter-increment: sub-section;
164}
165h3.sub-section::before {
166    content: counters(chapter, ".") "." counter(section) "." counter(sub-section) " ";
167}
168</pre>
169                <header><h4>HTML</h4></header>
170<pre>
171&lt;h1 class=&quot;chapter&quot;&gt;Chapter A&lt;/h1&gt;
172&lt;h2 class=&quot;section&quot;&gt;Section A-1&lt;/h2&gt;
173&lt;h3 class=&quot;sub-section&quot;&gt;Subsection A-1-1&lt;/h3&gt;
174&lt;h3 class=&quot;sub-section&quot;&gt;Subsection A-1-2&lt;/h3&gt;
175
176&lt;h2 class=&quot;section&quot;&gt;Section A-2&lt;/h2&gt;
177&lt;h3 class=&quot;sub-section&quot;&gt;Subsection A-2-1&lt;/h3&gt;
178
179&lt;h1 class=&quot;chapter&quot;&gt;Chapter B&lt;/h1&gt;
180&lt;h2 class=&quot;section&quot;&gt;Section B-1&lt;/h2&gt;
181&lt;h3 class=&quot;sub-section&quot;&gt;Subsection B-1-1&lt;/h3&gt;
182</pre>
183                <header><h4>HTML+CSS</h4></header>
184                <section class="sample-view">
185                    <h1 class="chapter">Chapter A</h1>
186                    <h2 class="section">Section A-1</h2>
187                    <h3 class="sub-section">Subsection A-1-1</h3>
188                    <h3 class="sub-section">Subsection A-1-2</h3>
189
190                    <h2 class="section">Section A-2</h2>
191                    <h3 class="sub-section">Subsection A-2-1</h3>
192
193                    <h1 class="chapter">Chapter B</h1>
194                    <h2 class="section">Section B-1</h2>
195                    <h3 class="sub-section">Subsection B-1-1</h3>
196                </section>
197            </section>
198        </article>
199    </main>
200</body>
201</html>

सूची-संबंधित

`list-style` गुण

 1ul {
 2    list-style-type: circle; /* Empty circle bullets */
 3    list-style-position: inside; /* Position bullets inside the content area */
 4}
 5
 6ol {
 7    /* Uppercase Roman numerals with bullets positioned outside */
 8    list-style: upper-roman outside;
 9}
10
11.custom-list {
12    list-style-image: url('custom-bullet.png'); /* Custom image bullets */
13}

list-style गुण एक CSS गुण है जिसका उपयोग HTML सूची तत्वों जैसे <ul> और <ol> के लिए सूची मार्करों (बुलेट) या संख्याओं की शैली निर्दिष्ट करने के लिए किया जाता है। यह गुण आपको सूची की समग्र शैली को नियंत्रित करने की अनुमति देता है, जिससे सूचियों के स्वरूप को अनुकूलित करना उपयोगी हो जाता है।

इस उदाहरण में, निम्नलिखित शैलियाँ लागू की जाती हैं।

ul: खोखले वृत्त चिह्न (बुलेट) अंदर दिखाए गए हैं।
ol: ऊपरी केस रोमन संख्याओं के साथ क्रमांकित किया गया है और संख्याएँ बाहर दिख रही हैं।
custom-list वर्ग: निर्दिष्ट छवि बुलेट के रूप में प्रदर्शित होती है।

`list-style` संरचना

list-style निम्नलिखित तीन गुणों का संक्षेप है:

list-style-type: सूची के आइटमों के लिए मार्कर का प्रकार (बुलेट या संख्या) निर्दिष्ट करता है।
list-style-position: निर्दिष्ट करता है कि मार्कर सूची आइटम के अंदर (inside) या बाहर (outside) रखा गया है।
list-style-image: सूची मार्कर के रूप में उपयोग की जाने वाली छवि को निर्दिष्ट करता है।

मूल उपयोग

1ul {
2    list-style: square inside url('path/to/image.png');
3}

यह कोड इस प्रकार कार्य करता है:

list-style-type: square: मार्कर के प्रकार को वर्गाकार रूप में सेट करता है।
list-style-position: inside: मार्कर सूची आइटम के अंदर प्रदर्शित होता है।
list-style-image: url('path/to/image.png'): मार्कर के रूप में छवि का उपयोग करता है।

व्यक्तिगत गुणों की व्याख्या

`list-style-type`

list-style-type सूची के लिए संकेतक के प्रकार को निर्दिष्ट करता है। उपलब्ध शैलियाँ सूची के प्रकार पर निर्भर करती हैं।

मूल्य का उदाहरण

 1ul {
 2    /* Change list bullets to empty circles */
 3    list-style-type: circle;
 4}
 5
 6ol {
 7    /* Number list items with lowercase letters (a, b, c, ...) */
 8    list-style-type: lower-alpha;
 9}
10
11ol.roman-list {
12    /* Number list items with uppercase roman numerals (I, II, III, ...) */
13    list-style-type: upper-roman;
14}

none: कोई संकेतक प्रदर्शित नहीं होता।
disc (डिफ़ॉल्ट): एक छोटा काला वृत्त।
circle: एक छोटा खाली वृत्त (घेरा)।
square: एक छोटा वर्ग।
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`

1ul {
2    list-style-position: inside;
3}

list-style-position गुण निर्दिष्ट करता है कि संकेतक (बुलेट) सूची आइटम के बाहर या अंदर रखा गया है। list-style-position में निम्नलिखित मान हो सकते हैं:।

outside: संकेतक सूची आइटम के बाहर रखे जाते हैं, और आइटम संकेतक के बाद शुरू होता है। यह डिफ़ॉल्ट मान है।
inside: संकेतक सूची आइटम के अंदर रखे जाते हैं और पाठ का हिस्सा बनकर प्रदर्शित होते हैं।

`list-style-image`

1ul {
2    list-style-image: url('bullet.png'); /* Use an image as the list marker */
3}

list-style-image गुण सूची संकेतक के रूप में छवि का उपयोग करने पर सेट किया जाता है। छवि को url() का उपयोग करके निर्दिष्ट किया जाता है, और यदि छवि लोड नहीं हो पाती है, तो list-style-type द्वारा निर्दिष्ट संकेतक प्रदर्शित होता है।

`list-style` शॉर्टहैंड गुण

1ul {
2    list-style: square inside url('bullet.png');
3}

list-style गुण एक शॉर्टहैंड गुण है जो एक बार में list-style-type, list-style-position, और list-style-image सेट कर सकता है। क्रम लचीला है, लेकिन इसे आम तौर पर इस उदाहरण की तरह लिखा जाता है। इस मामले में, एक वर्गाकार बुलेट सूची आइटम के अंदर प्रदर्शित होता है, और एक छवि को संकेतक के रूप में प्रदर्शित किया जाता है।

सारांश

list-style एक शॉर्टहैंड गुण है जो आपको एक बार में सूची की उपस्थिति (संकेतक प्रकार, स्थिति, कस्टम छवि) निर्दिष्ट करने देता है।
यह list-style-type, list-style-position, list-style-image को अलग-अलग सेट करना भी संभव है।
आप लेआउट और डिज़ाइन के अनुसार सूची मार्करों को लचीले ढंग से अनुकूलित कर सकते हैं।

CSS काउंटर (`counter()`)

 1/* Reset the counter */
 2dl {
 3    counter-reset: item;
 4}
 5
 6/* Apply the counter to list items */
 7dl dt::before {
 8    counter-increment: item; /* Increment the counter */
 9    content: counter(item) ". "; /* Display the counter */
10}

आप सूची आइटम्स या विशिष्ट तत्वों को स्वचालित रूप से संख्या प्रदान करने के लिए CSS काउंटर्स का उपयोग कर सकते हैं।

काउंटर्स बनाना और प्रारंभ करना

1/* Create and initialize the counter */
2ol {
3  counter-reset: section; /* Set the counter name to 'section' */
4}

आप counter-reset प्रॉपर्टी के साथ काउंटर बना सकते हैं और रीसेट कर सकते हैं।

काउंटर्स को बढ़ाना

1/* Increment the counter and display it */
2li::before {
3  counter-increment: section; /* Increment the counter by 1 */
4  content: counter(section) ". "; /* Display the counter value */
5}

आप counter-increment प्रॉपर्टी से काउंटर को बढ़ा सकते हैं और counter फ़ंक्शन के साथ काउंटर मान प्रदर्शित कर सकते हैं।

`counters()`

CSS में counters फ़ंक्शन कस्टम काउंटर्स, जैसे सूची आइटम्स को नंबर देने या पैराग्राफ को क्रम में रखने, के प्रबंधन के लिए बहुत उपयोगी है। यह फ़ंक्शन कई काउंटर मानों को एक स्ट्रिंग के साथ जोड़ सकता है और इसे CSS सामग्री में प्रदर्शित कर सकता है। यहां, हम counters फ़ंक्शन के मूल उपयोग से लेकर व्यावहारिक अनुप्रयोग उदाहरणों तक का बारीकी से वर्णन करेंगे।

`counter` और `counters` के बीच का अंतर

counter और counters दोनों फ़ंक्शंस काउंटर मान प्रदर्शित करने के लिए उपयोग किए जाते हैं, लेकिन इनमें निम्नलिखित अंतर होते हैं।

counter: एकल काउंटर का मान प्राप्त करता है।
counters: निर्दिष्ट सेपरेटर के साथ कई काउंटर मानों को जोड़ता है और प्रदर्शित करता है।

उदाहरण के लिए, यदि आप नेस्टेड सूची आइटम्स के साथ काउंटर्स का उपयोग करना चाहते हैं, तो आप पैरेंट और चाइल्ड काउंटर्स को जोड़कर उन्हें प्रदर्शित करने के लिए counters फ़ंक्शन का उपयोग कर सकते हैं।

`counters` फ़ंक्शन का सिंटैक्स

counters(<counter-name>, <string>);

counters फ़ंक्शन का उपयोग निम्नलिखित सिंटैक्स के साथ किया जाता है।

<counter-name>: उपयोग किए जाने वाले काउंटर का नाम निर्दिष्ट करता है।
<string>: प्रत्येक काउंटर के बीच में इंसर्ट की जाने वाली स्ट्रिंग को निर्दिष्ट करता है (आमतौर पर एक सेपरेटर जैसे . या -)।

`counters` फ़ंक्शन के उपयोग का उदाहरण

अगले चरण में, आइए counters फ़ंक्शन का एक उदाहरण देखें।

 1ol {
 2    list-style: none;
 3    counter-reset: list-counter;
 4}
 5
 6li {
 7    counter-increment: list-counter;
 8}
 9
10li::before {
11    content: counters(list-counter, ".") " ";
12}

इस उदाहरण में, दो-स्तरीय नेस्टेड सूची के लिए पैरेंट और चाइल्ड काउंटर्स को जोड़ा गया है।
- list-counter काउंटर को परिभाषित किया जा रहा है।
- counters फ़ंक्शन का उपयोग मूल सूची काउंटर और उप-सूची काउंटर को जोड़ने और प्रदर्शित करने के लिए किया जाता है।

मल्टी-लेवल काउंटरों का उपयोग करते हुए उन्नत उदाहरण

counters फ़ंक्शन का उपयोग करके, आप कस्टम नंबरिंग या पैराग्राफ नंबरिंग जैसे मल्टी-लेवल काउंटरों को लचीले ढंग से प्रबंधित कर सकते हैं। उदाहरण के लिए, यह चैप्टर और सेक्शन वाले दस्तावेज़ बनाते समय उपयोगी होता है।

 1article {
 2    counter-reset: chapter;
 3}
 4
 5h1.chapter {
 6    font-size: 1.2rem;
 7    counter-increment: chapter;
 8    counter-reset: section;
 9}
10
11h1.chapter::before {
12    content: counter(chapter) " ";
13}
14
15h2.section {
16    font-size: 1.1rem;
17    counter-increment: section;
18    counter-reset: sub-section;
19}
20
21h2.section::before {
22    content: counters(chapter, ".") "." counter(section) " ";
23}
24
25h3.sub-section {
26    font-size: 1rem;
27    counter-increment: sub-section;
28}
29
30h3.sub-section::before {
31    content: counters(chapter, ".") "." counter(section) "." counter(sub-section) " ";
32}

इस कोड में, चैप्टर (h1), सेक्शन (h2), और सबसेक्शन (h3) के लिए काउंटर को रीसेट किया गया है, और प्रत्येक स्तर को संयोजित करने के लिए counters फ़ंक्शन का उपयोग किया गया है।

सारांश

counters फ़ंक्शन तब बहुत उपयोगी होता है जब आप मल्टीपल काउंटरों को क्रमिक रूप से अनुकूलित और प्रदर्शित करना चाहते हैं। CSS काउंटरों का उपयोग करके, आप लिस्ट और हेडिंग की नंबरिंग को स्वतंत्र रूप से अनुकूलित कर सकते हैं, जिससे वेब पेजों को एक उन्नत सूचना संरचना मिलती है।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video

बॉक्स मॉडल सजावट से संबंधित CSS गुण टेबल-संबंधी CSS गुण

सूची-संबंधित CSS गुण

YouTube Video

प्रीव्यू के लिए HTML

सूची-संबंधित

list-style गुण

list-style संरचना

मूल उपयोग

व्यक्तिगत गुणों की व्याख्या

list-style-type

मूल्य का उदाहरण

list-style-position

list-style-image

list-style शॉर्टहैंड गुण

सारांश

CSS काउंटर (counter())

काउंटर्स बनाना और प्रारंभ करना

काउंटर्स को बढ़ाना

counters()

counter और counters के बीच का अंतर

counters फ़ंक्शन का सिंटैक्स

counters फ़ंक्शन के उपयोग का उदाहरण

मल्टी-लेवल काउंटरों का उपयोग करते हुए उन्नत उदाहरण

सारांश

YouTube Video

`list-style` गुण

`list-style` संरचना

`list-style-type`

`list-style-position`

`list-style-image`

`list-style` शॉर्टहैंड गुण

CSS काउंटर (`counter()`)

`counters()`

`counter` और `counters` के बीच का अंतर

`counters` फ़ंक्शन का सिंटैक्स

`counters` फ़ंक्शन के उपयोग का उदाहरण