कसरी सीएसएससँग लिङ्कहरू लिङ्क गर्नुहोस्

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

धेरै वेब डिजाइनर "a" ट्यागमा शैली को परिभाषित गरेर बाहिर सुरू हुन्छ:

a {color: red; }

यसले लिङ्कको सबै पक्षहरू शैली (होभर, भ्रमण, र सक्रिय) शैली गर्नेछ। प्रत्येक भागलाई अलग देखिने शैलीमा, तपाईंले लिंक छद्म-क्लासहरू प्रयोग गर्नुपर्दछ।

लिङ्क Pseudo-Classes

त्यहाँ चार आधारभूत लिंकहरू छद्म-वर्गहरू छन् जो तपाईं परिभाषित गर्न सक्नुहुन्छ:

• : लिंक - यो लिङ्कको लागि पूर्वनिर्धारित शैली हो
• : भ्रमण गरिएको - एक लिङ्क पछि क्लिक गरिएको छ
• : होभर - माउसको रूपमा लिङ्कमा प्रिन्ट गरिएको छ (पूर्व-क्लिक)
• : सक्रिय - दायाँको रूपमा दायाँ क्लिक गरिएको छ

लिङ्क पेसो-क्लास परिभाषित गर्नको लागि, तपाईंको CSS चयनकर्तामा ट्यागको साथ प्रयोग गर्नुहोस्। त्यसोभए, तपाइँका सबै लिङ्कहरूको ग्रेट गर्न भ्रमण गरिएको रङ परिवर्तन गर्न, लेख्नुहोस्:

a: भ्रमण गरिएको {रंग: ग्रे; }

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

a: लिंक, एक: होवर, a: active {color: black; } a: भ्रमण गरिएको {रंग: ग्रे; }

लिंक रङ परिवर्तन गर्नुहोस्

सबै भन्दा लोकप्रिय तरिका शैली लिङ्कमा माउस परिवर्तन हुँदा रङ परिवर्तन हुन्छ:

a {color: # 00f; } a: होवर {रंग: # 0f0; }

तर नबिर्सनुहोस् कि तपाईं कसरी प्रभावित गर्न सक्नुहुन्छ कि लिङ्क हेर्दा तिनीहरूसँग यो क्लिक गरी सक्रिय गुण:

a {color: # 00f; } a: active {color: # f00; }

वा यो लिङ्कले तपाइँलाई भ्रमण गर्नुभएको छ जस्तो देखिन्छ: भ्रमण गरिएको सम्पत्ति:

a {color: # 00f; } a: भ्रमण गरिएको {रंग: # f0f; }

सबै सँगै राख्नु:

a {color: # 00f; } a: भ्रमण गरिएको {रंग: # f0f; } a: होवर {रंग: # 0f0; } a: active {color: # f00; }

प्रतीकहरू वा बुलेटहरू थप्न लिङ्कहरूमा पृष्ठभूमि राख्नुहोस्

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

a {padding: 0 2px 1px 15px; पृष्ठभूमि: #fff url (ball.gif) बायाँ केन्द्र नो-दोहोर्याइएको; रंग: # c00; }

एकपटक तपाईंले आफ्नो प्रतिमा प्राप्त गर्नुभएको बेला, तपाइँले फरक छवि सेट गर्न सक्नुहुन्छ तपाईंको होभर, सक्रिय, र भ्रमण गरिएका आइकनहरूको रूपमा लिङ्क परिवर्तन गर्नको लागि:

a {padding: 0 2px 1px 15px; पृष्ठभूमि: #fff url (ball.gif) बायाँ केन्द्र नो-दोहोर्याइएको; रंग: # c00; } a: होवर {पृष्ठभूमि: #fff url (ball2.gif) बायाँ केन्द्र नो-दोहोर्याइएको; } a: active {पृष्ठभूमि: #fff url (ball3.gif) बायाँ केन्द्र नदोहोर्याउनुहोस्; }

तपाईंको लिंकहरू बटनहरू जस्तै हेर्नुहोस्

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

a {border: 4px outset; padding: 2px; पाठ सजावट: कुनै पनि होइन; } a: active {border: 4px inset; }

नोट, जब तपाईं सुरुवात र रङहरू ढाँचामा रंगहरू राख्नुहुन्छ, ब्राउजरले तिनीहरूलाई आशा गर्न सक्नु भएको बेला तिनीहरूलाई प्रस्तुत गर्न सम्भव छैन। त्यसोभए, यहाँ रंगीन सिमानाहरु संग एक फैंसीयर बटन हो:

a {border-style: solid; सीमा चौडाइ: 1px 4px 4px 1px; पाठ सजावट: कुनै पनि होइन; padding: 4px; सीमा-रंग: # 69f # 00f # 00f # 69f; }

र तपाइँले एक बटनको होभर र सक्रिय शैलियोंलाई पनि लिंक गर्न सक्नुहुन्छ, साथै ती पोजो-क्लासहरू प्रयोग गर्नुहोस्:

a: link {border style: solid; सीमा चौडाइ: 1px 4px 4px 1px; पाठ सजावट: कुनै पनि होइन; padding: 4px; सीमा-रंग: # 69f # 00f # 00f # 69f; } a: होवर {सीमा - रंग: #ccc; }