वेबपेजों पर हाइपरलिंक्स स्टाइल के लिए सीएसएस का उपयोग कैसे करें

मई 1, 2024

यदि आप HTML से परिचित हैं, तो आप जानते हैं कि आप वेबपेज पर टेक्स्ट के रंग और हाइपरलिंक को नियंत्रित कर सकते हैं। लेकिन कैस्केडिंग स्टाइल शीट्स के साथ आप बहुत अधिक कर सकते हैं। हाइपरलिंक एंकर टैग जैसे कुछ टैगों में टैग के विभिन्न राज्यों से जुड़े छद्म वर्ग कहलाते हैं। उदाहरण के लिए, हाइपरलिंक टैग में चार राज्य हैं; लिंक, दौरा किया, मंडराना और सक्रिय।

जब एक लिंक का उपयोग नहीं किया जा रहा है (चयनित नहीं), तो वह है संपर्क छद्म वर्ग या अवस्था। का दौरा किया लिंक का उपयोग किए जाने के बाद स्थिति है। मंडराना स्थिति तब होती है जब माउस लिंक पर से गुजरता है और सक्रिय स्थिति तब होती है जब आप लिंक पर क्लिक करते हैं। CSS का जादू यह है कि लिंक की प्रत्येक स्थिति को छद्म वर्गों के माध्यम से स्वतंत्र रूप से नियंत्रित किया जाता है। तो आप प्रत्येक राज्य के लिए अलग-अलग गुण सेट कर सकते हैं। आप CSS में हाइपरलिंक एंकर टैग से जुड़ी किसी भी संपत्ति का उपयोग कर सकते हैं।

नीचे दिए गए उदाहरण में, हम लिंक स्थिति को लाल करने के लिए सेट करेंगे, बैंगनी (# 400040) पर जाने वाले राज्य, होवर और सक्रिय राज्यों को लाल, रेखांकित और इटैलिक करने के लिए।

ध्यान दें--तीर

इंगित करता है कि कोड एक दूसरी पंक्ति से लिपटा है और वास्तव में एक पंक्ति में होना चाहिए।

जैसा कि आप देख सकते हैं, हमने विज़िट किए गए राज्य को छोड़कर सभी राज्यों के लिए लाल रंग की संपत्ति सेट की है, जिसे हमने बैंगनी पर सेट किया है। क्योंकि हम केवल हाइपरलिंक को होवर और सक्रिय राज्यों के लिए रेखांकित करना चाहते हैं, इसलिए हमने टेक्स्ट-डेकोरेशन प्रॉपर्टी को अन्य दो राज्यों के लिए सेट नहीं किया है। अंत में, हमने होवर और सक्रिय राज्यों के लिए इटैलिक के लिए फ़ॉन्ट-शैली निर्धारित की है, जिसके कारण जब आप लिंक पर क्लिक करते हैं या लिंक पर क्लिक करते हैं, तो टेक्स्ट इटैलिक हो जाएगा, और हमने टेक्स्ट-डेकोरेशन को फिर से रेखांकित करने के लिए सेट किया है। यह केवल एक सरल उदाहरण है। आप अपनी शैलियों को अपनी इच्छानुसार सरल या आकर्षक बना सकते हैं। हालाँकि, याद करने के लिए कुछ चीजें हैं।

वेब ब्राउज़र इस बात से अलग हैं कि वे इसे कैसे संभालते हैं। आमतौर पर, यदि आप एक निश्चित मूल्य के लिए एक संपत्ति निर्धारित करते हैं, तो इसे उसके बाद सूचीबद्ध किसी भी राज्य द्वारा विरासत में प्राप्त किया जाएगा। ऊपर हमारे उदाहरण में, हमारे कोड में सूचीबद्ध पहला राज्य लिंक राज्य था और हमने रंग संपत्ति को लाल करने के लिए सेट किया था। अधिकांश समय, इसे अन्य तीन राज्यों में तब तक निस्तारित कर दिया जाएगा जब तक कि हम इसे कोड के साथ नहीं बदल देते, जैसा कि हमने दौरा किए गए राज्य के लिए किया था। इसके अलावा, अगर हमने टेक्स्ट-डेकोरेशन को वापस रेखांकित करने के लिए सेट नहीं किया है, तो होवर और सक्रिय राज्यों के लिए टेक्स्ट को रेखांकित नहीं किया जाएगा क्योंकि हमने इसे पहले राज्य में बंद कर दिया था। लेकिन आप ऐसा करने के लिए सभी ब्राउज़रों पर भरोसा नहीं कर सकते। इसलिए, प्रत्येक राज्य के लिए सभी संपत्तियों को व्यक्तिगत रूप से सेट करना सबसे अच्छा है।

जब आप फैंसी लिंक डिजाइन कर रहे हों, तो राज्यों के बीच बड़े बदलाव न करें जैसे कि टेक्स्ट का आकार नाटकीय रूप से बढ़ाना। इससे वेब ब्राउज़र पृष्ठ को फिर से लोड करेगा और आपके आगंतुक आपसे बहुत परेशान होंगे।

जिस क्रम में आप इन छद्म वर्गों के लिए कोड सूचीबद्ध करते हैं, वह कैस्केड क्रम से प्रभावित होता है। हम बाद के ट्यूटोरियल में कैस्केड ऑर्डर पर चर्चा करेंगे। अभी के लिए बस याद रखें कि संघर्षों को रोकने के लिए, राज्यों को उस क्रम में कोड करें, जिसका हमने ऊपर उपयोग किया था; लिंक, दौरा किया, मंडराना और सक्रिय।

वीडियो निर्देश: Section 7 (मई 2024).

वेबपेजों पर HTML स्टाइल हाइपरलिंक सीएसएस का उपयोग कैसे करें, HTML, छद्म वर्ग टैग के विभिन्न राज्यों से जुड़े, छद्म वर्ग, हाइपरलिंक, CSS में हाइपरलिंक कोडिंग, सीएसएस छद्म वर्ग, CSS राज्यों, एक टैग की स्थिति, फैंसी लिंक CSS के साथ एक वेबपेज पर, फैंसी लिंक

पिछला लेख

अगला लेख

MacProVideo द्वारा एनिमेटेड मोशन 5 105

मई 2024

जब मोशन की बात आती हैआर, एनीमेशन यह सब क्या है। इसमें एनिमेटेड प्रभाव macProVideo द्वारा वीडियो प्रशिक्षण पाठ्यक्रम का खंड, माइकल वोहल एनिमेशन बनाने के कई तरीके शामिल करता है। Wohl की शुरुआत Apple...

कंप्यूटर

सेगा ड्रीमकास्ट के लिए वेट्रिक्स

मई 2024

वेट्रिक्स एक तीन आयामी मोड़ के साथ एक शांत टेट्रिस की तरह गूढ़ खेल है - आप पूल बनाने के लिए आकृतियों को ढेर कर रहे हैं, पानी में रखने के लिए! इतने सारे खेल के साथ हाथापाई और कत्लेआम शामिल है, यह...