सीएसएस कैसे प्रयोग किया जाये यह हम लगभग पूरी तरह से सीख चुके हैं । अब हमें केवल विभिन्न ब्लाक्स को डिजाइन करने के कोड सीखना बाकी है । इन कोड्स को हम क्रम से सीखेंगे । यहाँ एक बात का निवेदन करना चाहता हूँ । क्यूँकि हर उदाहरण के लिये पूरे एचटीएमएल पेज की कोडिंग लिखने पर पेज का आकार बहुत बढ जाता है इसलिये अब हम यहाँ पर केवल सीएसएस कोडिंग को ही लिखा करेंगे । इस कोडिंग को आप हेड सेक्सन के स्टाइल टैग के बीच में रखकर अपने पेज पर अप्लाई कर सकेंगे । साथ ही साथ जो आवश्यक निर्देश होंगे वे भी अलग से बता दिये जाएँगे । इससे लाभ यह है कि हमारा लेख काफी छोटा हो जाएगा और क्यूँकि हमें सीएसएस के प्रयोग के विषय में कोई सन्देह नहीं है इसलिये बिना वजह की लम्बी कोडिंग बार-बार पढने से भी फुर्सत मिल जाएगी ।
इसलिये अब से हर पोस्ट के शुरूआत में पहली कोडिंग को ही पूरा लिखा जाएगा जिससे कि हमारे एचटीएमएल पेज का स्वरूप स्पष्ट हो जाए और यह भी पता लग जाए कि हम क्या और किस पर स्टाइल करने जा रहे हैं ।
यदि आपको समझने में कठिनाई हो तो कृपया हमें अवश्य बताएँ । हम और भी सरल तरीके से समझाने का प्रयत्न करेंगे ।
सीएसएस टेक्स्ट -
हमारे एचटीएमएल पेज में प्रत्येक ब्लाक में टेक्स्ट (अक्षरों) का प्रयोग होता ही है । बिना टेक्स्ट लिखे कोई पेज अधूरा होता है । अत: टेक्स्ट को स्टाइल करना सबसे महत्वपूर्ण कार्यों में से है । आज के प्रोजक्ट में हमारा एचटीएमएल पेज इस तरह से है । -<!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;}परिणाम -
html css नमूना कोड
ReplyDeleteछवि टैग src तत्व द्वारा लोड किए जाने वाले URL को निर्दिष्ट करता है