वेबपेजमा लिङ्क रेखांकन कसरी परिवर्तन गर्ने?

लिङ्क अन्डोलहरू हटाउनुहोस् वा ड्यास गरिएका बिन्दुहरू सिर्जना गर्नुहोस्, वा डबल इनलाइन लिङ्कहरू सिर्जना गर्नुहोस्

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

पाठ लिङ्कमा रेखांकन हटाउँदै

रेखांकित पाठ कि गैर-रेखांकित पाठ पढ्न को लागी अधिक चुनौतीपूर्ण हुन सक्छ। थप रूपमा, धेरै डिजाइनरहरू केवल रेखांकित पाठ लिङ्कहरूको हेरविचार गर्दैनन्। यी उदाहरणहरूमा, तपाईं सम्भावित यी रेखांकनहरू सम्पूर्ण रूपमा हटाउन चाहानुहुन्छ।

पाठ लिङ्कबाट रेखाचित्रहरू हटाउन, तपाईंले CSS गुण पाठ सजावट प्रयोग गर्नुहुनेछ। यहाँ यो सीएसएस छ जुन तपाईंले लेख्नुहुन्छ:

a {text-decoration: none; }

सीएसएस को एक एक पंक्ति संग, तपाईं रेखा को सबै पाठ लिङ्कहरु लाई हटाउनुहुनेछ। यद्यपि यो धेरै सामान्य शैली हो (यसले एक तत्व चयनकर्ता प्रयोग गर्दछ), यो अझै पनि पूर्वनिर्धारित ब्राउजर शैलीहरू भन्दा बढी विशिष्टता छ। किनभने तिनीहरू पूर्वनिर्धारित शैलीहरू हुन् जुन कुन सुरूवात सुरु गर्नका लागि रेखांकन सिर्जना गर्दछ, यो तपाईलाई अधिलेखन गर्न आवश्यक छ।

रेखाचित्रहरू हटाउन सावधानी

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

अधिनियम गैर-लिंकहरू नगर्नुहोस्

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

रेखा रेखा वा ड्यासहरूमा परिवर्तन गर्नुहोस्

यदि तपाईं आफ्नो पाठ लिङ्क रेखांकन राख्न चाहनुहुन्छ भने, तर पूर्वनिर्धारित रूपबाट रेखांकनको शैली परिवर्तन गर्नुहोस्, जुन "soldi" लाइन हो, यो पनि यो गर्न सक्नुहुन्छ। त्यस ठोस लाइनको सट्टा, तपाइँ आफ्नो लिङ्क रेखांकन गर्न डटहरू प्रयोग गर्न सक्नुहुनेछ। यो गर्नका लागी, तपाईं अझै रेखांकित हटाउनुहुनेछ, तर तपाईले यसलाई सीमा-तल शैली गुणको साथ बदल्नुहुनेछ:

a {text-decoration: none; border-bottom: 1px dotted; }

तपाईंले मानक रेखा रेखा हटाउनु भएकोले, डटेड एक मात्र देखिन्छ जुन।

तपाईं ड्यासहरू प्राप्त गर्न एउटै कुरा गर्न सक्नुहुन्छ। केवल किनारा-तल शैली ढाँचामा परिवर्तन गर्नुहोस्:

a {text-decoration: none; सीमा-तल: 1px ड्यास गरिएको; }

रेखा रेखा रंग परिवर्तन गर्नुहोस्

तपाईंको लिङ्कहरूमा ध्यान आकर्षित गर्न अर्को तरिका रेखांकनको रंग परिवर्तन गर्न हो। यकीन गर्नुहोस् कि रंग तपाईंको रङ योजनासँग फिट हुन्छ।

a {text-decoration: none; सीमा-तल: 1px ठोस रातो; }

डबल रेखांकन

डबल रेखांकन प्रयोग गर्नको लागि चाल भनेको तपाईंले सीमाको चौडाइ परिवर्तन गर्नुपर्छ। यदि तपाईंले 1px चौडा सीमाना सिर्जना गर्नुभयो भने, तपाइँ एक डबल रेखांकनसँग समाप्त हुनेछ जुन एकल रेखांकन जस्तो देखिन्छ।

a {text-decoration: none; सीमा-तल: 3px डबल; }

तपाईं अवस्थित रेखांकन पनि प्रयोग गर्न सक्नुहुन्छ जुन दुई विशेषताहरु संग दोहोरी रेखांकन गर्न को लागी, जस्तै रेखाहरु को एक बिन्दु को रूप मा:

a {border-bottom: 1px double; }

लिङ्क राज्यहरू बिर्सनु हुँदैन

तपाईं किनारा-तल शैली तपाईंको लिङ्कहरूमा विभिन्न राज्यहरूमा थप्न सक्नुहुन्छ जस्तै: होभर,: सक्रिय, वा: भ्रमण गरिएको। यसले तपाइँलाई "होभर" छद्म वर्गको प्रयोग गर्दा आगन्तुकहरूको लागि राम्रो "रोल्लोवर" शैली अनुभव सिर्जना गर्न सक्छ। दोस्रो लिंक गरिएको रेखांकन प्रकट गर्न जब तपाईं लिंक माथि होभर गर्नुहुन्छ:

a {text-decoration: none; } a: hover {border-bottom: 1px dotted; }

जेनिफर क्रिनिन द्वारा मूल लेख। जेरेमी Girard द्वारा संपादित