हाइपरटेक्स्ट मार्कअप लैंग्वेज, HTML के आविष्कार के बाद से, वेब दस्तावेज़ों के लेआउट और लेआउट की अवधारणा नाटकीय रूप से बदल गई है। CSS और CSS2 के कैस्केडिंग स्टाइल शीट मानकों के लिए लोकप्रिय ब्राउज़रों के लगभग पूर्ण समर्थन के साथ, किसी दस्तावेज़ की दृश्य प्रस्तुति के लगभग किसी भी पहलू को प्रभावित करना संभव हो गया है। उदाहरण के लिए, आप किसी लिंक की पृष्ठभूमि को रंगीन बना सकते हैं, कुछ छवि से भर सकते हैं, और उपयोगकर्ता के कार्यों के आधार पर बदल भी सकते हैं।
ज़रूरी
- - दस्तावेज़ के पाठ या दस्तावेज़ शैली पत्रक के पाठ को संपादित करने की क्षमता;
- - एक टेक्स्ट एडिटर जो आपको दस्तावेज़ को मूल एन्कोडिंग में सहेजने की अनुमति देता है।
निर्देश
चरण 1
ए तत्व में इनलाइन शैली की जानकारी जोड़कर लिंक की पृष्ठभूमि को समान रूप से यादृच्छिक रंग से भरें। उस लिंक से संबंधित ए तत्व की विशेषताओं में शैली जोड़ें जिसकी पृष्ठभूमि आप बदलना चाहते हैं। शैली विशेषता की सामग्री में, पृष्ठभूमि-रंग सीएसएस संपत्ति को दिए गए मान के साथ रखें, जो पृष्ठभूमि रंग के लिए सही पहचानकर्ता है। उदाहरण के लिए, यह इस तरह दिख सकता है:
लिंक पाठ
चरण 2
अपने दस्तावेज़ में बाहरी या एम्बेडेड स्टाइल शीट में लिंक की पृष्ठभूमि को परिभाषित करें। उपयुक्त स्टाइल शीट में, स्वीकार्य स्तर की विशिष्टता के चयनकर्ता द्वारा संबोधित नियमों का एक सेट जोड़ें। नियम में, पिछले चरण की तरह ही पृष्ठभूमि-रंग की संपत्ति दर्ज करें। CSS2 के कैस्केडिंग नियमों और वांछित दायरे के आधार पर चयनकर्ता की विशिष्टता का चयन करें। इसलिए, यदि आपको केवल एक लिंक का रंग सेट करने की आवश्यकता है, तो आईडी चयनकर्ता का उपयोग करना समझ में आता है, यदि ऐसे कई लिंक हैं, तो क्लास वैल्यू के आधार पर एक विशेषता चयनकर्ता का उपयोग करना बेहतर होता है।
उदाहरण के लिए, किसी दस्तावेज़ में किसी विशिष्ट लिंक के लिए हरे रंग की पृष्ठभूमि सेट करने के लिए, आप स्टाइल शीट में नियमों का एक सेट जोड़ सकते हैं:
ए # आईडी_ग्रीन
{
पृष्ठभूमि-रंग: # 00FF00;
}
आपको आईडी_ग्रीन के वांछित लिंक के अनुरूप ए तत्व की आईडी विशेषता भी सेट करनी चाहिए:
लिंक पाठ
चरण 3
एक छवि के साथ लिंक की पृष्ठभूमि भरें। चरण एक और दो में वर्णित विधियों का पालन करें, लेकिन पृष्ठभूमि-रंग सीएसएस संपत्ति के बजाय, पृष्ठभूमि-छवि का उपयोग करें। उदाहरण के लिए:
लिंक पाठ
यदि आवश्यक हो, तो पृष्ठभूमि छवि को क्षैतिज और लंबवत रूप से डुप्लिकेट करने के विकल्पों को परिभाषित करने के लिए सेट किए गए CSS नियमों में एक पृष्ठभूमि-दोहराव गुण जोड़ें।
चरण 4
जब आप लिंक पर होवर करते हैं या जब फोकस चलता है, तो उसकी पृष्ठभूमि को बदल दें। एक बाहरी या एम्बेडेड दस्तावेज़ स्टाइल शीट में नियम सेट जोड़ें जो विभिन्न राज्यों में लिंक या लिंक समूह की पृष्ठभूमि को परिभाषित करता है। गतिशील छद्म-वर्गों के संयोजन के साथ आईडी और विशेषता चयनकर्ताओं का उपयोग करें: होवर,: सक्रिय, और: फोकस। उदाहरण के लिए, ID_DYNAMIC_BACKGROUND के ID विशेषता मान वाले लिंक की पृष्ठभूमि को निष्क्रिय अवस्था में लाल और माउस कर्सर के नीचे होने की स्थिति में हरा होने के लिए, स्टाइल शीट में निम्नलिखित नियमों को जोड़ा जाना चाहिए:
ए # आईडी_DYNAMIC_BACKGROUND
{
पृष्ठभूमि-रंग: # FF0000;
}
A # ID_DYNAMIC_BACKGROUND: होवर
{
पृष्ठभूमि-रंग: # 00FF00;
}
आप गतिशील रूप से बदलती छवि के साथ पृष्ठभूमि बनाने के लिए भी ऐसा ही कर सकते हैं।
