 |
| HTML and CSS tutorial for beginners in Hindi |
पिछले लेसन में हम ने देखा की CSS में measurements कैसे देते हैं।
आज हम CSS text properties सीखेंगे।
CSS text properties
CSS text properties का उपयोग करके हम यह बताते हैं की हमारा टेक्स्ट कैसे दिखना चाहिए। हम टेक्स्ट CSS text properties से अक्षरों का रंग बदल सकते हैं (color), टेक्स्ट की alignment दे सकते हैं, अक्षरों में का अंतर तय कर सकते हैं (letter spacing), text decoration कर सकते हैं, text indent दे सकते है, text को shadow दे सकते हैं, दो शब्दों में का अंतर (word spacing), और text transform कर सकते हैं।आप समझ ही गए होंगे की टेक्स्ट प्रॉपर्टीज कितने important हैं। आज हम इन प्रॉपर्टीज में सीखेंगे।
हम Notepad फाइल में कोडिंग करते जाएंगे। इससे एक एक CSS text property समझ में आएगी।
चलिए शुरू करते हैं। Notepad एक नयी फाइल ओपन कीजिये। इस फाइल में lesson-22-2 का पूरा कोड कॉपी कीजिये। यह प्रोग्राम हमने id selector के लिए लिखा है।
१. CSS Color:
इस प्रॉपर्टी का उपयोग टेक्स्ट को कलर देने के लिए होता है। इसे ऐसा लिखते हैं।#header {
color: red;
}
यह style हमने पहले भी लिखी है।
२. CSS text alignment property:
इस प्रॉपर्टी का उपयोग टेक्स्ट alignment specify करने के लिए होता है। टेक्स्ट alignment चार तरह के होते हैं। १. left, २. right, ३. center, ४. justified. इस के लिए CSS ऐसा लिखते हैं:#header {
text-align:center;
}
यह style भी हमने इससे पहले देखी है।
३. CSS letter spacing property:
इस property से हम बताते हैं की अक्षरों के बीच में कितना स्पेस होना चाहिए। इसकी value एक number में दी जाती है। यह नंबर negative भी हो सकता है। Letter spacing के लिए CSS ऐसा लिकते हैं।#header {
letter-spacing 1.6vw;
}
इस कोड को हमारे स्क्रिप्ट में कॉपी कीजिये।
महत्त्वपूर्ण बात: आप हर एक प्रॉपर्टी देने के बाद "Lesson-24" और "Lesson-24.html" के नाम से save कीजिए और आउटपुट देखिये। आपको अच्छी तरह से समझ में आएगा।
४. CSS text decoration property:
इस property की ३ values होती है - overline, line-through और underline. इसे ऐसे लिखा जाता है।#header {
text-decoration underline;
}
Underline हम सब जानते हैं। यह टेक्सट के नीच लाइन draw करता है। इसी तरह overline टेक्स्ट के ऊपर लाइन draw करता है। Line-through टेक्स्ट के ऊपर लाइन draw करता है।
text-decoration: none
का उपयोग के hyperlink से underline remove करने के लिए होता है।
ऊपर दिया हुआ कोड हमारे स्क्रिप्ट में कॉपी कीजिये।
५. CSS text indentation property:
इस property का उपयोग टेक्स्ट को indent करने के लिए होता है। इससे एक paragraph की पहली लाइन margin से कुछ अंतर छोड़ कर शुरू होती है। यह अंतर हम length में या percentage में देते हैं। उदाहरण:#para1 {
text-indent: 8vw;
}
इस में paragraph की पहली लाइन 8 vw का अंतर छोड़ कर शुरू होगी। इस कोड को हमारे प्रोग्राम में कॉपी कीजिये।
६. CSS text shadow property:
इस का उपयोग करके हम टेक्स्ट को शैडो दे shadow दे सकते हैं। इस की ३ values होती हैं। पहली value है horizontal shadow, दूसरी value है vertical shadow, और तीसरी value shadow के कलर के लिए होती है। इस का कोड ऐसा लिखते हैं।#header {
text-shadow: 0.2vw 0.4vw blue;
}
इस में 0.2 vw horizontal shadow और 0.4 vw vertical shadow की पोजीशन बताते हैं। यह दोनों देने ही पड़ते हैं। इस कोड को हमारे प्रोग्राम में कॉपी कीजिये।
७. CSS text transform property:
इस property का उपयोग
१. सारे लेटर्स uppercase (capital letters) में डिस्प्ले करने के लिए होता है या
२. सारे लेटर्स lower case में डिस्प्ले करने के लिए होता है या
३. हर एक शब्द का पहला अक्षर uppercase में डिस्प्ले करने के लिए होता है।
इस की values है - uppercase, lowercase, और capitalize।नीचे दिया हुआ कोड देखिये।
#para3 {
text-transform: uppercase;
color:yellow;
background-color:rgb(0,0,255);
}
इस कोड को हमारे स्क्रिप्ट में इन्सर्ट कीजिये। हमारे दुसरे paragraph के आखिरी दो लाइन्स के लिए तीसरा paragraph बनाइये और <p id="para3"> दीजिये।
८. CSS word spacing property:
इस से हम दो शब्दों के बीच space दे सकते हैं। जैसे -#para3 {
text-transform: uppercase;
color:yellow;
background-color:rgb(0,0,255);
word-spacing: 2vw;
}
हमने यहाँ दो शब्दों के बीच २ vw का स्पेस दिया है। इस कोड को हमारे प्रोग्राम में कॉपी कीजिये।
हमने हमारे स्क्रिप्ट में बहुत सारा इन्सर्ट किया है। नीचे दी हुई आकृति ध्यान से देखिये। आपकी स्क्रिप्ट ऐसी ही होनी चाहिए। Source कोड की PDF फाइल देखने के लिए आकृति २४-१. पर क्लिक कीजिये।
 |
| आकृति २४-१ CSS text properties |
इस फाइल को "Lesson-24". और "Lesson-24.html" के नाम से save कीजिये। HTML document को डबल क्लिक कीजिये। आउटपुट देखिये।
 |
| आकृति २४-२ CSS text properties |
इस में हमने दी हुई सारी प्रॉपर्टीज आयी है। यह आउटपुट नए वेब पेज में देखने के लिए ऊपर डिस्प्ले की हुई आकृति पर क्लिक कीजिये।
महत्वपूर्ण बात: आप हर एक प्रॉपर्टी देने के बाद "Lesson-24" और "Lesson-24.html" के नाम से save कीजिए और आउटपुट देखिये। आपको अच्छी तरह से समझ में आएगा।
इन properties के अलावा और भी टेक्स्ट प्रॉपर्टीज होती है, जैसे text-overflow, white-space, line-height वगैरह। इस लेसन के बाद आप अच्छी तरह से जान गए हैं की टेक्स्ट प्रॉपर्टीज कैसे देते हैं। आप दुसरे प्रॉपर्टीज को भी ऐसे ही दे सकते हैं।
Important Points:
१. CSS टेक्स्ट प्रॉपर्टीज टेक्स्ट को कलर, alignment और दूसरी स्टाइल देती है।२. "color" का उपयोग टेक्स्ट कलर के लिए होता है।
३. "align" का उपयोग टेक्स्ट को left, right, center, या justified करने के लिए होता है।
४. हम यह बता सकते हैं की दो अक्षरों में कितना स्पेस देना चाहिए या दो शब्दों में कितना अंतर चाहिए।
५. हम टेक्स्ट को shadow दे सकते हैं, underline कर सकते हैं, या capitalize कर सकते हैं।
लेसन २३ लेसन २५
