Skip to main content

सीएसएस टेक्‍स्‍ट (CSS TEXT STYLING)



       सीएसएस कैसे प्रयोग किया जाये यह हम लगभग पूरी तरह से सीख चुके हैं । अब हमें केवल विभिन्‍न ब्‍लाक्‍स को डिजाइन करने के कोड सीखना बाकी है । इन कोड्स को हम क्रम से सीखेंगे । यहाँ एक बात का निवेदन करना चाहता हूँ । क्‍यूँकि हर उदाहरण के लिये पूरे एचटीएमएल पेज की कोडिंग लिखने पर पेज का आकार बहुत बढ जाता है इ‍सलिये अब हम यहाँ पर केवल सीएसएस कोडिंग को ही लिखा करेंगे । इस कोडिंग को आप हेड सेक्‍सन के स्‍टाइल टैग के बीच में रखकर अपने पेज पर अप्‍लाई कर सकेंगे । साथ ही साथ जो आवश्‍यक निर्देश होंगे वे भी अलग से बता दिये जाएँगे । इससे लाभ यह है कि हमारा लेख काफी छोटा हो जाएगा और क्‍यूँकि हमें सीएसएस के प्रयोग के विषय में कोई सन्‍देह नहीं है इसलिये बिना वजह की लम्‍बी कोडिंग बार-बार पढने से भी फुर्सत मिल जाएगी ।
इसलिये अब से हर पोस्‍ट के शुरूआत में पहली कोडिंग को ही पूरा लिखा जाएगा जिससे कि हमारे एचटीएमएल पेज का स्‍वरूप स्‍पष्‍ट हो जाए और यह भी पता लग जाए कि हम क्‍या और किस पर स्‍टाइल करने जा रहे हैं ।
यदि आपको समझने में कठिनाई हो तो कृपया हमें अवश्‍य बताएँ । हम और भी सरल तरीके से समझाने का प्रयत्‍न करेंगे ।

सीएसएस टेक्‍स्‍ट -

        हमारे एचटीएमएल पेज में प्रत्‍येक ब्‍लाक में टेक्‍स्‍ट (अक्षरों) का प्रयोग होता ही है । बिना टेक्‍स्‍ट लिखे कोई पेज अधूरा होता है । अत: टेक्‍स्‍ट को स्‍टाइल करना सबसे महत्‍वपूर्ण कार्यों में से है । आज के प्रोजक्ट में हमारा एचटीएमएल पेज इस तरह से है । -

<!doctype html>
<head>
<title>Learn CSS </title>
<style>
/* Your CSS Code Goes Here */
</style>
</head>

<body>
<h1> This is a Heading </h1>
<p> This is a Paragraph</p><br/>
<p id="longpara"> This is a Long Paragraph. This is a Long
Paragraph. This is a Long Paragraph. This is a Long Paragraph.
This is a Long Paragraph. This is a Long Paragraph. This is a Long
Paragraph. This is a Long Paragraph. This is a Long Paragraph.
</p><br/>
<a href="http://sjweb.in/" > This is A Hyper Link </a><br/>
<span>This is a Span </span><br/>
<div>This is a Div.</div><br/>
<div id="div1">This is a Div. This is a Div. This is a Div. This is a
Div. This is a Div. This is a Div. This is a Div. This is a Div. This is a
Div. This is a Div. This is a Div. This is a Div. This is a Div. This is a
Div. This is a Div. </div>
</body>
</html>

        यह हमारा बेसिक एचटीएमएल पेज है जो बिलकुल ही सादा-सादा दिखाई देगा । टेस्‍ट करने के लिये इस कोड को अपने नोटपैड में कापी करके उसे home.html नाम से रक्षित करें । इसके बाद जहाँ पर सेव किया है उस फोल्‍डर में जाकर home.html पर डबल क्लिक करें । ये आपके ब्राउजर में खुल जाएगा ।
अब हम इसे सीएसएस कोड से डिजाइन करते हैं ।

टेक्‍स्‍ट कलर -

        जिस भी सेक्‍सन का रंग बदलना हो उसके सेलेक्‍टर के साथ सीएसएस कलर कोडिंग एचटीएमएल पेज के हेड सेक्‍शन के स्‍टाइल टैग के अन्‍दर रखेंगे । आपके टेक्‍स्‍ट का रंग बदलने के लिये निम्‍न कोड अप्‍लाई करते हैं -

h1{color:red;}
p{color:blue;}
#longpara{color:pink;}
a{color:blue;}
span{color:gray;}
div{color:yellow;}
#div1{color:purple;}


परिणाम -


टेक्‍स्‍ट डेकोरेशन -

        टेक्‍स्‍ट डेकोरेशन का प्रयोग टेक्‍स्‍ट की सजावट का प्रकार बदलने के लिये किया जाता है । इसके लिये निम्‍न कोडिंग प्रयोग होती हैं ।

overline, line-through, underline, none, blink

उदाहरण -

h1{text-decoration:overline;}
p{text-decoration:line-through;}
#longpara{text-decoration:underline;}
a{text-decoration:none;
span{text-decoration:blink;}


परिणाम -


टेक्‍स्‍ट एलाइन -

        टेक्‍स्‍ट एलाइनमेन्‍ट अर्थात् टेक्‍स्‍ट का किसी भी एक दिशा में होना । टेक्‍स्‍ट एलाइनमेण्‍ट के निम्‍न प्रकार होते हैं ।

left, right, center, justify

उदाहरण -

#longpara{text-align:left;}
#div1{text-align:right}
#longpara{text-align:center;}
#div1{text-align:justify}


परिणाम -


 

टेक्‍स्‍ट ट्रान्‍सफार्म -

        इस कोडिंग के प्रयोग से आपके पेज का टेक्‍स्‍ट स्‍माल, कैपिटल आदि तरीके का हो जाता है । यह मात्र रोमन भाषा पर काम करता है । इसके अन्‍तर्गत निम्‍न प्रकार आते हैं -

uppercase, lowercase, capitalize

उदाहरण -

#div1{text-transform:uppercase;}
#div1{text-transform:lowercase;}
#div1{text-transform:capitalize;}

परिणाम -

टेक्‍स्‍ट इन्‍डेन्‍ट -

        टेक्‍स्‍ट इन्‍डेन्‍ट से तात्‍पर्य प्रत्‍येक पैराग्राफ के प्रारम्‍भ में पहली पंक्ति की शुरूआत से है । अर्थात् लिखते समय हम पैराग्राफ की पहली पंक्ति को थोडा सा जगह छोड कर शुरू करते हैं। इसे ही इन्‍डेन्‍ट कहते हैं ।

उदाहरण -

#longpara{text-indent:50px;}

परिणाम - 

आगे कुछ और टेक्‍स्‍ट स्‍टाइलिंग सीखेंगे ।

Comments

Post a Comment

Popular posts from this blog

एचटीएमएल संरचना ।

पिछले पाठ में हमने एचटीएमएल का एक प्रारूप देखा । यहाँ पर उस प्रारूप की व्‍याख्‍या की जायेगी । इस अध्‍याय को लिखते समय हम यह मानकर चल रहे हैं कि वेबडिजाइनिंग सीखने की इच्‍छा रखने वाले को सामान्‍य कम्‍प्‍यूटर ज्ञान जैसे कि कम्‍प्‍यूटर की कोई फाइल या फोल्‍डर खोलना, बन्‍द करना, किसी प्रोग्राम को खोलना, नया फोल्‍डर बनाना, किसी फाइल को खोलना, उसपर काम करना, उसे सेव करना तथा डिलीट करना आदि । इसलिये हम इन सभी बातों को बताने की अपेक्षा सीधे एचटीएमएल की तरफ चलते हैं । एचटीएमएल का फुलफार्म - HTML = Hyper Text Markup Language एचटीएमएल संरचना - पिछले पाठ में हमने निम्‍न कोडिंग का प्रयोग किया था । <!DOCTYPE HTML> <html> <head> <title>My First Html Page</title> </head> <body> Hello World </body> </html> अब इस कोडिंग की पूरी व्‍याख्‍या यहाँ प्रस्‍तुत की जा रही है ताकि आप एचटीएमएल को पूरी तरह समझ सकें । यह ध्‍यान रखें कि एचटीएमएल वेबपेज बनाने का सर्वप्रथम सोपान है, बिना इसके सीखे आप वेबपेज नही बना सकते हैं । <!DOCTYPE

एचटीएमएल सीखें - हिन्‍दी में ।।

मित्रों       वेबसाइट डिजाइनिंग सीखने के शुरुआती दिनों में ज्‍यादा तकलीफ इसी लिये हुई कि कई सारी चीजें अंग्रेजी में समझ में आती ही नही थीं । फिर घर से दूर जाकर सीखने के लिये समय का अभाव भी था । इन्‍ही बातों को ध्‍यान में रखते हुए मेरे जैसे बाकी लोगों को ये समस्‍या न आने पाये, इसके लिये ही हिन्‍दी में में यह ट्यूटोरियल ब्‍लाग प्रारम्‍भ किया जा रहा है ।      इस ब्लाग पर सबसे पहले एचटीएमएल जो कि वेबसाइट बनाने के लिये सर्वप्रथम व अनिवार्य डिजाइनिंग भाषा है को सिखाया जायेगा । जिससे कि आप सभी कुछ सामान्‍य व आवश्‍यक चीजों को जान सकें । आवश्‍यकता -  एचटीएमएल सीखने के लिये प्राथमिक आवश्‍यकता मात्र एक कम्‍प्‍यूटर सिस्‍टम जिसमें कि एक इण्‍टरनेट ब्राउजर तथा एक टेक्‍स्‍ट एडिटर (उदा. नोटपैड) हो की है । यदि आपके पास विन्‍डोज सिस्‍टम है तो इसमें इण्‍टरनेट एक्‍सप्‍लोरर इण्‍टरनेट ब्राउजर   तथा नोटपैड पहले से ही होता है । अन्‍य इण्‍टरनेट ब्राउजर्स में मोजिला का फायरफॉक्‍स, गूगल क्रोम, सफारी आदि कई हैं । इनमें से जो भी चाहें प्रयोग कर सकते हैं । यदि फायरफाक्‍स का प्रयोग करें तो अधिक आसानी

एचटीएमएल हेड सेक्‍सन (शीर्ष विभाग) ।।

     पिछले पाठ में हमने एचटीएमएल पृृष्‍ठ की सामान्‍य संरचना पढी । इस पाठ में हम वेब पेज के निर्माण में लगने वाली मूलभूत कोडिंग के विषय में जानेंगे ।      प्राय: सभी एचटीएमएल शिक्षक एक एक विषय को पकडकर एचटीएमएल कोडिंग सिखाते हैं जो निश्‍चय ही एक अत्‍यन्‍त महत्‍वपूर्ण व बेहतर तरीका है । किन्‍तु यह तरीका उन लोगों के लिये कम कारगर है जो कम समय में ज्‍यादा सीखना चाहते हैं । इसलिये यहाँ पर सिखाने का तरीका '' सरल से जटिल '' की आेर पर आधारित है  ।     आज के पाठ में हम एचटीएमएल के हेड सेक्‍सन में की जाने वाली महत्‍वपूर्ण कोडिंग सीखेंगे । एचटीएमएल हेड सेक्‍सन (शीर्ष विभाग) -      एचटीएमएल का हेड सेक्‍सन वह विभाग है जो हमें वेबपेज के रूप में तो नहीं दिखता है किन्‍तु वेबपेज के दिखने में जिसकी महत्‍वपूर्ण भूमिका रहती है  । इस सेक्‍सन के अन्‍तर्गत की गई कोडिंग्‍स आपके वेबपेज को स्‍टाइल करने के‍ लिये, वेब पेज में स्क्रिप्‍ट डालने के लिये,वेबसाइट की डिसक्रिप्‍शन तथा भाषा आदि बताने के लिये प्रयुक्‍त होती है । हेड सेक्‍सन के अन्‍तर्गत निम्‍न टैग प्रयुक्‍त किये जाते हैं  ।