 |
| HTML and CSS tutorial for beginners in Hindi |
हेलो फ्रेंड्स, KTL के HTML और CSS tutorial में फिर स्वागत है। आज हम लेसन ३४ सीखेंगे।
पिछले लेसन में हम ने देखा की box shadow का उपयोग कैसा करते हैं।
आज हम यह देखेंगे की lists को स्टाइल्स कैसे देते हैं।
CSS styling lists
हम ने lesson-11 में ordered lists और unordered lists बनाना सीखा है। वैसे ही lesson-12 में हम ने description lists और nested lists के बारे में सीखा है। आज हम यह देखेंगे की CSS का उपयोग करके lists को स्टाइल कैसे दिया जाता है।CSS में लिस्ट को स्टाइल देने के लिए कुछ प्रॉपर्टीज होती है। वह इस प्रकार है।
CSS list properties
1. list-style-type property
इस का उपयोग लिस्ट के item markers के लिए होता है। इस प्रॉपर्टी की circle, square, upper-alpha, lower-alpha, upper-roman, lower-roman वगैरह values होती है। इस प्रॉपर्टी की और values होती है। इस का syntax ऐसा होता है।
list-style-type: lower-alpha;
2. list-style-image property
हम एक इमेज को item marker के लिए use कर सकते हैं। इस का syntax होता है -
list-style-image: url("image name");
3. list-style-position property
यह प्रॉपर्टी item markers का position बताने के लिए होती है। हम मार्कर्स को list items के अंदर डिस्प्ले कर सकते हैं या list items के बाहर डिस्प्ले कर सकते हैं। इस का syntax ऐसा होता है।
list-style-position: inside, या list-style-position: outside
हम लिस्ट्स के लिए CSS की दूसरी प्रॉपर्टीज use कर सकते हैं, जैसे margin, padding वगैरह। हम background color property से लिस्ट को background color दे सकते हैं। अगर हम properties को <ul> या <ol> में देते हैं तो यह स्टाइल पूरी लिस्ट में आ जाती है। अगर इन को item level पर (<li>) देते हैं तो यह स्टाइल item के level में आ जाती है।
उदाहरण के लिए -
ol {
background: blue,
margin-left: 5vw;
padding: 2vw;
}
अब हम इसके लिए कोड लिखेंगे। एक नयी Notepad फाइल ओपन कीजिये। इस में Lesson-11 का सारा कोड कॉपी कीजिये। लिस्ट के लिए स्टाइल ऐसी लिखिए।
<style>
ol.a {
list-style-type: lower-alpha;
list-style-position: outside;
background: #DAA520;
padding: 2vw;
}
ol li {
background: #FFD700;
margin-left: 8vw;
padding: 1vw;
}
</style>
इस कोड में ol.a में दी हुई स्टाइल पूरी लिस्ट में आ जाती है और ol.li में दी हुई स्टाइल हर एक आइटम में आ जाती है। इन प्रॉपर्टीज को हमने सीखा है। आप ध्यान से पढ़िए और समझ लीजिये।
इस फाइल को "Lesson-34" और "Lesson-34.html" के नाम से save कीजिये। इस source कोड की PDF फाइल देखने के लिए आकृति ३४-१ पर क्लिक कीजिये।
 |
| आकृति ३४-१ CSS style for lists |
HTML document पर डबल क्लिक कीजिये और आउटपुट देखिये।
 |
| आकृति ३४-२ CSS style for lists |
यह आउटपुट नए वेब पेज में देखने के लिए ऊपर डिस्प्ले की हुई आकृति पर क्लिक कीजिये।
हम ने दिया हुआ स्टाइल लिस्ट को आ गया है।
CSS list-style property
यह लिस्ट के लिए ऐसी CSS प्रॉपर्टी है जिस से हम एक ही प्रॉपर्टी का उपयोग करके सारी स्टाइल दे सकते हैं। उदाहरण के लिए
ul {
list-style: square inside;
}
इस में हमने list-style-type और list-style-position दिया है।
Important Points:
१. CSS style प्रॉपर्टीज का उपयोग लिस्ट को स्टाइल देने के लिए होता है।२. इन प्रॉपर्टीज का उपयोग हम item markers के स्टाइल के लिए, item markers में इमेज दिखाने के लिए, item markers के position के लिए करते हैं।
३. हम CSS की दूसरी प्रॉपर्टीज जैसे margin, padding वगैरह लिस्ट्स को apply कर सकते हैं।
४. हम CSS लिस्ट प्रॉपर्टीज को एक ही प्रॉपर्टी में दे सकते है। इस के लिए list-style प्रॉपर्टी का उपयोग किया जाता है।
लेसन ३३ लेसन ३५
