लिंक को रेखांकित करें या डैश किए गए डॉट किए गए, या डबल रेखांकित लिंक बनाएं
डिफ़ॉल्ट रूप से, वेब ब्राउज़र कुछ सीएसएस शैलियों को सहेजते हैं जो वे विशिष्ट HTML तत्वों पर लागू होते हैं। यदि आप अपनी साइट की अपनी स्टाइल शीट्स के साथ इन डिफ़ॉल्ट को ओवरराइट नहीं करते हैं, तो डिफ़ॉल्ट लागू होंगे। हाइपरलिंक्स के लिए, डिफ़ॉल्ट डिस्प्ले शैली यह है कि कोई भी लिंक किया गया टेक्स्ट नीला और रेखांकित होगा। ब्राउज़र ऐसा करता है ताकि साइट के विज़िटर आसानी से देख सकें कि कौन सा टेक्स्ट लिंक है। कई वेब डिज़ाइनर इन डिफ़ॉल्ट शैलियों की परवाह नहीं करते हैं, खासकर उन रेखांकित करते हैं। शुक्र है, सीएसएस उन रेखांकितों को देखने या उन्हें पूरी तरह से हटाने में आसान बनाता है।
टेक्स्ट लिंक पर अंडरलाइन को हटा रहा है
रेखांकित पाठ गैर-रेखांकित पाठ को पढ़ने के लिए और अधिक चुनौतीपूर्ण हो सकता है। इसके अतिरिक्त, कई डिज़ाइनर बस रेखांकित टेक्स्ट लिंक के रूप में परवाह नहीं करते हैं। इन उदाहरणों में, आप इन अंडरलाइनों को पूरी तरह से हटाना चाहते हैं।
टेक्स्ट लिंक से अंडरलाइन को हटाने के लिए, आप सीएसएस प्रॉपर्टी टेक्स्ट-सजावट का उपयोग करेंगे। यहां वह सीएसएस है जिसे आप ऐसा करने के लिए लिखेंगे:
एक {पाठ-सजावट: कोई नहीं; }
सीएसएस की एक पंक्ति के साथ, आप सभी टेक्स्ट लिंक से अंडरलाइन हटा देंगे। भले ही यह एक बहुत ही सामान्य शैली है (यह एक तत्व चयनकर्ता का उपयोग करता है), फिर भी यह डिफ़ॉल्ट ब्राउज़र शैलियों की तुलना में अधिक विशिष्टता है। चूंकि उन डिफ़ॉल्ट शैलियों के साथ शुरुआत करने के लिए अंडरलाइन तैयार होती है, यही वह है जिसे आपको ओवरराइट करने की आवश्यकता होती है।
अंडरलाइन को हटाने पर सावधानी बरतें
दृश्यमान रूप से, अंडरलाइन को हटाना ठीक वही हो सकता है जो आप पूरा करना चाहते हैं, लेकिन जब आप इसे भी करते हैं तो आपको सतर्क रहना चाहिए। चाहे आप रेखांकित लिंक देखें या नहीं, आप तर्क नहीं दे सकते कि वे यह स्पष्ट करते हैं कि कौन सा टेक्स्ट जुड़ा हुआ है और कौन सा नहीं है। यदि आप उस डिफ़ॉल्ट नीले लिंक रंग को रेखांकित करते हैं या बदलते हैं, तो आपको यह सुनिश्चित करना चाहिए कि आप उन शैलियों के साथ प्रतिस्थापित करें जो अभी भी लिंक किए गए टेक्स्ट को खड़े होने की अनुमति दें। यह आपकी साइट के आगंतुकों के लिए एक अधिक सहज अनुभव के लिए तैयार होगा।
गैर-लिंक को रेखांकित न करें
लिंक और अंडरलाइन पर एक और सावधानी, टेक्स्ट को रेखांकित न करें जो कि इस पर जोर देने के तरीके के रूप में एक लिंक नहीं है। लोगों को रेखांकित पाठ की एक लिंक होने की उम्मीद है, इसलिए यदि आप जोर जोड़ने के लिए सामग्री को रेखांकित करते हैं (इसे बोल्ड करने या इसे इटैलिक करने के बजाए), तो आप गलत संदेश भेजते हैं और साइट उपयोगकर्ताओं को भ्रमित कर देंगे।
अंडरलाइन को डॉट्स या डैश में बदलें
यदि आप अपना टेक्स्ट लिंक अंडरलाइन रखना चाहते हैं, लेकिन डिफ़ॉल्ट रूप से उस अंडरलाइन की शैली को बदलें, जो "सोली" लाइन है, तो आप यह भी कर सकते हैं। उस ठोस रेखा के बजाय, आप अपने लिंक को रेखांकित करने के लिए बिंदुओं का उपयोग कर सकते हैं। ऐसा करने के लिए, आप अभी भी अंडरलाइन को हटा देंगे, लेकिन आप इसे सीमा-नीचे शैली की संपत्ति के साथ बदल देंगे:
एक {पाठ-सजावट: कोई नहीं; सीमा-तल: 1 पीएक्स बिंदीदार; }चूंकि आपने मानक रेखांकन हटा दिया है, इसलिए बिंदीदार एकमात्र ऐसा दिखाई देता है।
आप डैश प्राप्त करने के लिए एक ही काम कर सकते हैं। बस सीमा-नीचे शैली को धराशायी में बदलें:
एक {पाठ-सजावट: कोई नहीं; सीमा-तल: 1 पीएक्स डैश किया गया; }अंडरलाइन रंग बदलें
अपने लिंक पर ध्यान आकर्षित करने का एक और तरीका अंडरलाइन के रंग को बदलना है। बस सुनिश्चित करें कि रंग आपकी रंग योजना के साथ फिट बैठता है।
एक {पाठ-सजावट: कोई नहीं; सीमा-तल: 1 पीएक्स ठोस लाल; }डबल अंडरलाइन
डबल अंडरलाइन का उपयोग करने की चाल यह है कि आपको सीमा की चौड़ाई बदलनी है। यदि आप 1px चौड़ी सीमा बनाते हैं, तो आप एक डबल अंडरलाइन के साथ समाप्त हो जाएंगे जो एक ही रेखांकन की तरह दिखता है।
एक {पाठ-सजावट: कोई नहीं; सीमा-तल: 3 पीएक्स डबल; }आप अन्य सुविधाओं के साथ एक डबल अंडरलाइन बनाने के लिए मौजूदा अंडरलाइन का भी उपयोग कर सकते हैं, जैसे बिंदीदार रेखाओं में से एक:
एक {सीमा-तल: 1 पीएक्स डबल; }लिंक राज्यों को मत भूलना
आप अलग-अलग राज्यों पर अपने लिंक पर सीमा-नीचे शैली जोड़ सकते हैं जैसे: होवर, सक्रिय, या: विज़िट किया गया। जब आप उस "होवर" छद्म वर्ग का उपयोग करते हैं तो यह आगंतुकों के लिए एक अच्छा "रोलओवर" शैली अनुभव बना सकता है। जब आप लिंक पर होवर करते हैं तो दूसरी डॉटेड अंडरलाइन बनाने के लिए:
एक {पाठ-सजावट: कोई नहीं; } ए: होवर {सीमा-तल: 1 पीएक्स बिंदीदार; }जेनिफर क्रिनिन द्वारा मूल लेख। जेरेमी गिरार्ड द्वारा संपादित