हेल्लो दोस्तों! आज इस article में आपको Styling List in CSS in Hindi के बारे में बताया गया है की ये क्या होता है कैसे काम करता है तो चलिए शुरू करते है
Contents
Introduction to CSS list property
CSS list किसी भी topic से related important पॉइंट को आसानी से present करने के लिए html के द्वारा आप 2 प्रकार की list create कर सकते है जिन्हें ordered lists और unordered lists कहा जाता है
निचे html tag का प्रयोग करते है
- <ol> -ordered list
- <ul> -inordered list
- <li> -list item
उपर दिए गए html tags पर आप css apply करके lists को style कर सकते है list की style करने के 4 important property provide करता है
इनका list निचे दिया जा रहा है
- list-style-type
- list-style-position
- list-style-image
- list-style(short hand)
आप इन सभी के बारे में details से दिया जा रहा है
lists-style-type
list property के द्वार आप list की numbering और bullets को control कर सकते है
यदि आप un-ordered property का प्रयोग करना चाहते है तो आप un-ordered tag<ul> tag का प्रयोग करते है जिसमे 4 value को आप प्रयोग कर सकते है
4 value के बारे में निचे दिया गया है
- none –इस value से कोई भी marker show नही होता है
- disc –इस value के द्वारा आप marker के रूप में एक भरा हुआ dark circle show होता है
- circle – इस value के द्वारा आप empty circle को web page पर show करा सकते है
- square –इस value में भरा हुआ एक dark square को आप web-page में list के रूप में show करा सकते है
यदि आप इस property को order list<ol> tag पर apply करना चाहते है तो आप इनका प्रयोग कर सकते है इसके बारे में निचे दिया जा रहा है
- none –इस value के द्वारा आप किसी भी प्रकार की numbering को show नही होगा
- decimal-इस value के द्वारा आप decimal(1,2,3,4,5,6) आदि numbering होती है
- lower-roman- इस value के द्वारा आप roman numbers को lower-case में दिखा सकते है
- upper-roman- इस value के द्वारा आप roman को upper case में show करा सकते है
- lower-alph- इस value के द्वारा आप alphabets lower case में show होता है
- upper-alpha –इस value के द्वारा आप alphabets upper case में show होता है
इसके अलावा और भी value होती है जिन्हें आप value के स्थान पर प्रयोग कर सकते है
इसका एक example निचे दिया जा रहा है
<html>
<head>
<title>list-style-type property</title>
<style>
ol{
list-style-type:upper-alpha;
}
ul{
list-style-type:circle;
}
</style>
</head>
<body>
<h2>ordered list example</h2>
<ol>
<li>php</li>
<li>java</li.
<li>sql</li>
</ol>
<h2>un-ordered list example</h2>
<ul>
<li>c/c++</li>
<li>html</li>
<li>css</li>
</ul>
</body>
</html>list-style-position
इस property के द्वारा आप numbering और bullets की position define कर सकते है इस property की आप 2 value define कर सकते है
दोनों के वारे में निचे दिया गया है
- Outside –जब आप इस value को define करते है तो bullets/numbering और text के बीच में काफी space रहता है जिससे text अलग से दिखाई देता है
- Inside-इस value के द्वारा web-page पर value को define करने पर bullets/numbers और text के बीच में space कम हो जाता है और दोनों एक साथ दिखाई देता है
इस property की value को आप इस example से समझ सकते है
<html>
<head>
<title>list-style-position</title>
</head>
<body>
<h2>outside example</h2>
<ul style=”list-style-position:inside;”>
<li>11</li>
<li>12</li>
</li>13</li>
</ul>
<h2>inside example</h2>
<ul style=”list-style-position:outside;”>
<li>21</li>
<li>22</li>
<li>23</li>
</ul>
</body>
</html>list-style-image
यदि आप चाहे तो lists में marker के रूप में (bullets/numbers) के स्थान पर आप image का भी प्रयोग कर सकते है जिससे आप इस property के स्वर lists में numbers और bullets के स्थान पर image का प्रयोग कर सकेंगे जिससे आप अपनी इच्छा अनुसार अपनी webpage पर image को show करा सकते है
इसको हम एक example के द्वारा समझ सकते है
<html>
<head>
<title>list-style-image</title>
<style>
ul{
list-style-image:url(‘list-bullet.png’);
}
</style>
</head>
<body>
<h2>example of CSS list image property here </h2>
<ul>
<li>11</li>
<li>12</li>
</ul>
</body>
</html>list-style(shorthand) property
यदि आप सभी property को एक बार में define करना चाहते है तो आप list-style(shorthand) property का प्रयोग कर सकते है इस property में सबसे पहले आप list-style-type property की value देते है इसके बाद आप list style position property के value देते है और इसके बाद आप list-style-image property की value define करते है
इसका जनरल syntax निचे दिया जा रहा है
list-style: <list-style-position: <list-style-image:>
example –: list-style:disc inside url(‘list-bullet.png’);
इसको हम एक example के द्वारा समझ सकते है
<html>
<head>
<title>list-style(shorthand)</title>
<style>
ul{
list-style:disc inside url(‘list-bullet.png’);
}
</style>
</head>
<body>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</body>
</html>
Styling List in CSS in Hindi
referenc-https://www.tutorialspoint.com/css/css_lists.htm
निवेदन:-आप सभी छात्र –छात्रों से निवेदन है की अगर आपको ये Topic अच्छा लगा हो तो कृपया आप इस वेबसाइट के बारे में अपने दोस्तों को जरुर बताये अगर कोई topic से संबधित प्रश्न हो तो कमेंट्स(comments) आपके लिए ही बना है और किसी Subject के लेकर भी कोई प्रश्न हो तो कमेंट करे
“आपका comments हमारे लिए बहुमूल्य है “ *_*धन्यवाद