 |
| HTML and CSS tutorial for beginners in Hindi |
हेलो फ्रेंड्स, KTL के HTML और CSS tutorial में फिर स्वागत है। आज हम लेसन ४० सीखेंगे।
पिछले लेसन में हम ने CSS pseudo-classes के बारे में सीखा।
आज हम CSS pseudo-elements सीखेंगे।
CSS pseudo-elements
हमने पिछले लेसन में pseudo-classes के बारे में सीखा है। Pseudo-classes का उपयोग करके elements को special effects देते हैं। Pseudo-elements को उपयोग element के कुछ भाग को स्टाइल दे सकते हैं। Pseudo-elements के syntax pseudo-class के syntax के जैसा ही होता है। वह ऐसा होता है।
selector: pseudo-element {property: value}
जैसे pseudo-classes के साथ classes का उपयोग कर सकते हैं वैसे ही pseudo-elements के साथ भी classes का उपयोग कर सकते हैं। उसका syntax ऐसा होता है।
selector.class: pseudo-element {property: value}
आज हम कुछ pseudo-elements देखेंगे।
First-letter pseudo-element
१. First-letter: इसका उपयोग पहले अक्षर को special effect देने के लिए होता है।First-line pseudo-element
२. First-line: इसका उपयोग पहले लाइन को special effect देने के लिए होता है।Before pseudo-element
३. Before: इस pseudo-element का उपयोग एक element शुरू होने से पहले कुछ डिस्प्ले करने के लिए करते हैं।After pseudo-element
4. After: इस pseudo-element का उपयोग एक element के contents डिस्प्ले करने के बाद कुछ डिस्प्ले करने के लिए करते हैं।दुसरे कुछ pseudo-elements ऐसे हैं।
१. marker, २. place-holder, ३. spelling-error, ४. back-drop, ५. selection.
अब हम pseudo-elements को हमारे स्क्रिप्ट में लिखेंगे। एक नयी Notepad फाइल ओपन कीजिये। इस में lesson-39-2 का कोड कॉपी कीजिये। इस में <style> में लिखा हुआ सब टेक्स्ट डिलीट कीजिए। हमने <p> में कुछ जगह पर <b> और </b> दिए हैं, उनको भी डिलीट कीजिये।
अब style में यह लिखिए।
p:first-letter {
color: red;
font-size: 5vw;
font-family: Blackadder ITC;
}
p:first-line {
color: green;
font-weight: bold;
}
इस फाइल को "Lesson-40-1" और "Lesson-40-1.html" के नाम से save कीजिये।
 |
| आकृति ४०-१. Pseudo-elements - First-letter and First-line |
अब आउटपुट देखिये।
 |
| आकृति ४०-२. Pseudo-elements - First-letter and First-line |
पहले अक्षर को हमने दी हुई स्टाइल आयी है। हर एक paragraph का पहला लाइन ग्रीन और बोल्ड में डिस्प्ले हुआ है।
हम pseudo-elements में font properties, background, color, margin, padding, border वगैरह CSS properties दे सकते हैं।
अब "before" और "after" pseudo-elements के बारे में देखेंगे। इन का उपयोग करके कोई भी content (जैसे टेक्स्ट या इमेज) element के पहले या बाद डिस्प्ले कर सकते हैं।
हम इन pseudo-elements को हमारी स्क्रिप्ट में लिखेंगे। एक Notepad file ओपन कीजिये। इस में lesson-40-1 का सारा कोड कॉपी। कीजिये। इस में <style> में लिखा हुआ कोड डिलीट कीजिये और यह कोड लिखिए
p:before {
content: 'Before Paragraph';
font-weight: bold;
color: red;
border: 0.2vw dotted green;
}
इसी तरह "after" के लिए भी कोड लिखिए।
p:after {
content: 'After Paragraph';
font-weight: bold;
color: green;
border: 0.2vw solid blue;
}
हमने p element के पहले लाल रंग में लिखा है 'Before Paragraph' और इसे एक बॉर्डर दी है। वैसे ही p element के बाद ग्रीन में लिखा है 'After Paragraph' और इसे एक बॉर्डर दी है। ध्यान दीजिये की हमने इस के लिए "content" का उपयोग करना पड़ता है।
हम
content: " "
भी दे सकते हैं।
इस फाइल को "Lesson-40-2" और "Lesson-40-2.html" के नाम से save कीजिये।
 |
| आकृति ४०-३. Pseudo-elements - Before pseudo-element, After pseudo-element |
HTML फाइल पर डबल क्लिक कीजिये। आउटपुट देखिये।
 |
| आकृति ४०-४.. Pseudo-elements - Before pseudo-element, After pseudo-element |
आउटपुट में हमने pseudo-elements में लिखी हुई स्टाइल आयी है।
Important Points:
१. Pseudo-elements का उपयोग करके एक element के कुछ भाग को special effects दे सकते हैं।२. First-letter से पहले अक्षर को स्टाइल दे सकते हैं और first-line का उपयोग करके पहले लाइन को स्टाइल दे सकते हैं।
३. Before का उपयोग element के content के पहले कुछ add करने के लिए होता है और after का उपयोग element के content के बाद कुछ add करने के लिए होता है।
लेसन ३९ लेसन ४१
