वेब पेज पर HTML लिंक अंडरलाइन कैसे बदलें

यह लेख कई तरीकों के बारे में बताता है कि आप अपने वेब पेज पर टेक्स्ट लिंक के डिफ़ॉल्ट रूप को बदलने के लिए रेखांकन को हटाकर, इसे एक बिंदीदार रेखा में बदलकर या इसका रंग बदलकर सीएसएस का उपयोग कर सकते हैं। अंडरलाइन को धराशायी लाइन या डबल अंडरलाइन में बदलने के लिए अतिरिक्त जानकारी शामिल है।

टेक्स्ट लिंक्स पर अंडरलाइन कैसे निकालें

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

टेक्स्ट लिंक से अंडरलाइन को हटाने के लिए, आप CSS प्रॉपर्टी टेक्स्ट-डेकोरेशन का उपयोग करते हैं। ऐसा करने के लिए आप जो सीएसएस लिखते हैं वह यहां है:

ए {पाठ-सजावट: कोई नहीं; }

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

रेखांकन हटाने पर सावधानी

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

गैर-लिंक को रेखांकित न करें

लिंक्स और अंडरलाइन्स पर एक और सावधानी, उस टेक्स्ट को अंडरलाइन न करें जो लिंक नहीं है, इसे जोर देने के तरीके के रूप में। लोग रेखांकित पाठ को एक कड़ी के रूप में देखने की अपेक्षा करने लगे हैं, इसलिए यदि आप जोड़ने के लिए सामग्री को रेखांकित करते हैं जोर (इसे बोल्ड या इटैलिक करने के बजाय), आप गलत संदेश भेजते हैं और साइट को भ्रमित कर देंगे उपयोगकर्ता।

अंडरलाइन को डॉट्स या डैश में कैसे बदलें

यदि आप अपने टेक्स्ट लिंक को रेखांकित रखना चाहते हैं, लेकिन उस रेखांकन की शैली को डिफ़ॉल्ट रूप से बदलना चाहते हैं, जो एक "ठोस" रेखा है, तो आप यह भी कर सकते हैं। उस ठोस रेखा के बजाय, आप अपने लिंक को रेखांकित करने के लिए बिंदुओं का उपयोग कर सकते हैं। ऐसा करने के लिए, आप अभी भी अंडरलाइन को हटा देंगे, लेकिन आप इसे बॉर्डर-बॉटम स्टाइल प्रॉपर्टी से बदल देंगे:

ए {पाठ-सजावट: कोई नहीं; सीमा-नीचे: 1px बिंदीदार; }

चूंकि आपने मानक रेखांकन को हटा दिया है, केवल बिंदीदार एक ही दिखाई देता है।

डैश पाने के लिए आप वही काम कर सकते हैं। बस बॉर्डर-बॉटम स्टाइल को धराशायी में बदलें:

ए {पाठ-सजावट: कोई नहीं; सीमा-नीचे: 1px धराशायी; }

अंडरलाइन रंग कैसे बदलें

अपने लिंक्स पर ध्यान आकर्षित करने का दूसरा तरीका है अंडरलाइन का रंग बदलना। बस सुनिश्चित करें कि रंग आपके साथ फिट बैठता है रंग प्रणाली.

ए {पाठ-सजावट: कोई नहीं; बॉर्डर-बॉटम: 1px सॉलिड रेड; }

डबल रेखांकन

डबल अंडरलाइन का उपयोग करने की ट्रिक यह है कि आपको बॉर्डर की चौड़ाई बदलनी होगी। अगर आप 1px चौड़ा बॉर्डर बनाते हैं, तो आपको एक डबल अंडरलाइन मिलेगी जो सिंगल अंडरलाइन की तरह दिखती है।

ए {पाठ-सजावट: कोई नहीं; बॉर्डर-बॉटम: 3px डबल; }

आप अन्य सुविधाओं के साथ डबल अंडरलाइन बनाने के लिए मौजूदा अंडरलाइन का भी उपयोग कर सकते हैं, जैसे बिंदीदार लाइनों में से एक:

a { बॉर्डर-बॉटम: 1px डबल; }

लिंक राज्यों को मत भूलना

आप विभिन्न राज्यों जैसे :hover, :active, या :vised पर अपने लिंक में बॉर्डर-बॉटम स्टाइल जोड़ सकते हैं। जब आप उस "होवर" छद्म वर्ग का उपयोग करते हैं तो यह आगंतुकों के लिए एक अच्छा "रोलओवर" शैली अनुभव बना सकता है। जब आप लिंक पर होवर करते हैं तो दूसरी बिंदीदार रेखांकन दिखाई देने के लिए:

ए {पाठ-सजावट: कोई नहीं; }
ए: होवर {बॉर्डर-बॉटम: 1 पीएक्स डॉटेड; }