सीएसएस के प्रयोग की विधियाँ सीखने के बाद अब हम इस योग्य हो गये हैं कि सीएसएस का प्रयोग करना शुरू करें । इस क्रम में सबसे पहली चीज होती है पृष्ठभूमि, जिसका कि हमें परिवर्तन अपनी इच्छानुसार करना होता है ।
पृष्ठभूमि का इच्छानुसार परिवर्तन, उसमें इच्छित रंग भरना, इच्छित चित्र लगाना आदि अनेक बातें होती हैं जिससे आपका वेबपेज आकर्षक बनता है । दर्शक का पहला परिचय आपके पेज के पृष्ठभूमि के प्रकार से ही होता है अत: पृष्ठभूमि का आकर्षण सर्वाधिक महत्वपूर्ण है । आज हम यहाँ पृष्ठभूमि को अपने अनुरूप बनाना सीखेंगे ।
पृष्ठभूमि परिवर्तन के अन्तर्गत पृष्ठभूमि का रंग व चित्र लगाना व परिवर्तित करना ही मुख्य होता है । इन चित्रों को लगाने के लिये इनके स्थान का चयन, इनकी चौडाई, उँचाई आदि भी महत्वपूर्ण बिन्दु होते हैं । यहाँ पर सीएसएस कोडिंग को एचटीएमएल पेज में हेड सेक्सन के अन्दर स्टाइल टैग में लिखने को वरीयता दी जा रही है । हमारे सीखने की विधि में यह सबसे अभीष्ट और सहायक है ।
पृष्ठभूमि का रंग परिवर्तन -
किसी भी ब्लाक की पृष्ठभूमि का रंग या चित्र बदलने के लिये उसके सेलेक्टर के साथ ही background: कोड का प्रयोग करना पडता है ।उदाहरण -
परिणाम -
इस पेज में आपको बॉडी की पृष्ठभूमि हरी, कन्टेनर की पृष्ठभूमि सफेद, हेडिंग की पृष्ठभूमि पीली तथा पैराग्राफ की पृष्ठभूमि गुलाबी दिखाई दे रही होगी ।
पृष्ठभूमि चित्र लगाना -
अपने पृष्ठभूमि में चित्र लगाने के लिये background:url('image'); कोड का प्रयोग करना पडता है ।उदाहरण -
परिणाम -
अब हमारे पेज के बैकग्राउंड में एक ही इमेज टाइल होकर कई बार आ गया । इमेज टाइल इसलिये हुआ कि हमने इमेज को रिपीट करने के सम्बन्ध में कोई सूचना पेज को नहीं दी ।
बैकग्राउंड रिपीट -
इस कोड के साथ बैकग्राउंड का रिपीट होना या न होना इच्छानुसार चुना जा सकता है ।नो रिपीट -
बैकग्राउंड रिपीट विकल्प से हम बैकग्राउंड के चित्र का रिपीट होना या न होना या कि एक निश्चित प्रकार से होना चुन सकते हैं ।उदाहरण -
परिणाम -
नो रिपीट कर देने पर आपकी पृष्ठभूमि चित्र रिपीट नहीं होता और परिणाम उपर्युक्त की तरह होता है ।
रिपीट डायरेक्शन -
रिपीट एक्स - background-repeat:repeat-x; करने से आपका चित्र पडे में रिपीट होता है ।
उदाहरण -
परिणाम -
रिपीट वाई - background-repeat:repeat-y; कोड से बैकग्राउंड खडे में एक पंक्ति रिपीट करता है ।
उदाहरण -
परिणाम -
पृष्ठभूमि स्थान -
पृष्ठभूमिचित्र का स्थान भी इच्छानुसार निर्धारित किया जा सकता है । इसके लिये background-position: कोड का प्रयोग किया जाता है ।उदाहरण -
परिणाम -
पृष्ठभूमि की चौडाई तथा उँचाई भी अपनी आवश्यकतानुसार सेट की जा सकती है ।
उदाहरण -
परिणाम -
पृष्ठभूमि सजावट के इन कोड्स को संक्षेप में भी लिखा जा सकता है ।
इसे देखें -
उदाहरण -
परिणाम -
इस तरह हम अपने पृष्ठभूमि को अपनी आवश्यकतानुसार बना सकते हैं ।
वेबमास्टर्स के लिए html नमूना कोड स्निपेट
ReplyDeleteपैरा टैग प्रथम-पंक्ति फ़ॉन्ट-आकार कोड नमूना