लिंक वेब पृष्ठों पर बहुत आम हैं, लेकिन कई वेब डिज़ाइनरों को उनके लिंक को प्रभावी ढंग से प्रबंधित करने और प्रबंधित करने के लिए सीएसएस के साथ होने वाली शक्ति का एहसास नहीं होता है। आप विज़िट, होवर और सक्रिय राज्यों के साथ लिंक परिभाषित कर सकते हैं। आप अपने लिंक को अधिक पिज्जा देने या उन्हें बटन या यहां तक कि छवियों की तरह दिखने के लिए सीमाओं और पृष्ठभूमि के साथ भी काम कर सकते हैं।
अधिकांश वेब डिज़ाइनर "ए" टैग पर एक शैली को परिभाषित करके शुरू करते हैं:
एक {रंग: लाल; }यह लिंक के सभी पहलुओं को स्टाइल करेगा (होवर, विज़िट और सक्रिय)। प्रत्येक भाग को अलग से स्टाइल करने के लिए, आपको लिंक छद्म-वर्गों का उपयोग करना होगा।
लिंक छद्म-वर्ग
चार बुनियादी प्रकार के लिंक छद्म-वर्ग हैं जिन्हें आप परिभाषित कर सकते हैं:
- : लिंक - यह लिंक के लिए डिफ़ॉल्ट शैली है
- : दौरा किया - एक लिंक के बाद क्लिक किया गया है
- : होवर - एक माउस के रूप में एक लिंक पर preised है (प्री-क्लिक)
- : सक्रिय - जैसे ही लिंक क्लिक किया जा रहा है
एक लिंक छद्म वर्ग को परिभाषित करने के लिए, इसे अपने सीएसएस चयनकर्ता में एक टैग के साथ प्रयोग करें। तो, अपने सभी लिंक के भूरे रंग के रंग का रंग बदलने के लिए, लिखें:
ए: विज़िट {रंग: ग्रे; }यदि आप एक लिंक छद्म वर्ग की शैली बनाते हैं, तो उन्हें सभी को स्टाइल करना एक अच्छा विचार है। इस तरह आप अपर्याप्त परिणामों से आश्चर्यचकित नहीं होंगे। इसलिए यदि आप सिर्फ रंगों को भूरे रंग में बदलना चाहते हैं, जबकि आपके लिंक के अन्य सभी छद्म गुण काले रंग में रहते हैं, तो आप लिखेंगे:
ए: लिंक, ए: होवर, ए: सक्रिय {रंग: काला; } ए: विज़िट {रंग: ग्रे; }लिंक रंग बदलें
शैली लिंक के लिए सबसे लोकप्रिय तरीका रंग बदलना है जब माउस उस पर होवर करता है:
एक {रंग: # 00 एफ; } ए: होवर {रंग: # 0 एफ 0; }लेकिन यह न भूलें कि आप इस बात पर असर डाल सकते हैं कि लिंक इस तरह से क्लिक कर रहा है: सक्रिय संपत्ति:
एक {रंग: # 00 एफ; } ए: सक्रिय {रंग: # एफ 00; }या जब आप इसका दौरा करने के बाद लिंक देख रहे हैं: विज़िट की गई संपत्ति:
एक {रंग: # 00 एफ; } ए: विज़िट {रंग: # एफ 0 एफ; }इसे सब एक साथ रखने के लिए:
एक {रंग: # 00 एफ; } ए: विज़िट {रंग: # एफ 0 एफ; } ए: होवर {रंग: # 0 एफ 0; } ए: सक्रिय {रंग: # एफ 00; }आइकन या बुलेट जोड़ने के लिए लिंक पर पृष्ठभूमि रखें
आप स्टाइलिश पृष्ठभूमि लेख के रूप में एक लिंक पर पृष्ठभूमि डाल सकते हैं, लेकिन पृष्ठभूमि के साथ थोड़ा सा खेलकर, आप एक लिंक बना सकते हैं जिसमें एक संबद्ध आइकन है। एक छोटा आइकन चुनें, लगभग 15px 15px तक, जब तक आपका टेक्स्ट बड़ा न हो। पृष्ठभूमि को लिंक के एक तरफ रखें और दोहराना विकल्प दोहराने के लिए सेट करें। फिर, लिंक को पैड करें ताकि लिंक के भीतर टेक्स्ट आइकन को देखने के लिए बाएं या दाएं तक पर्याप्त स्थान पर ले जाया जा सके।
एक {पैडिंग: 0 2 पीएक्स 1 पीएक्स 15 पीएक्स; पृष्ठभूमि: # एफएफ यूआरएल (ball.gif) बाएं केंद्र नो-दोहराना; रंग: # सी 00; }एक बार आपको अपना आइकन मिल जाने के बाद, आप लिंक बदलने के लिए अपने होवर, सक्रिय और विज़िट किए गए आइकन के रूप में एक अलग छवि सेट कर सकते हैं:
एक {पैडिंग: 0 2 पीएक्स 1 पीएक्स 15 पीएक्स; पृष्ठभूमि: # एफएफ यूआरएल (ball.gif) बाएं केंद्र नो-दोहराना; रंग: # सी 00; } ए: होवर {पृष्ठभूमि: # एफएफ यूआरएल (ball2.gif) बाएं केंद्र नो-दोहराना; } ए: सक्रिय {पृष्ठभूमि: # एफएफ यूआरएल (ball3.gif) बाएं केंद्र नो-दोहराना; }अपने लिंक बटन की तरह देखो
बटन बहुत लोकप्रिय हैं, लेकिन सीएसएस के साथ आने तक, आपको छवियों का उपयोग करके बटन बनाना था, जिससे आपके पृष्ठों को लोड होने में अधिक समय लगता है। सौभाग्य से, एक सीमा शैली है जो आपको सीएसएस के साथ आसानी से बटन-जैसी प्रभाव बनाने में मदद कर सकती है।
एक {सीमा: 4 पीएक्स शुरुआत; पैडिंग: 2 पीएक्स; पाठ-सजावट: कोई नहीं; } ए: सक्रिय {सीमा: 4 पीएक्स इन्सेट; }ध्यान दें, जब आप स्टार्ट और स्टाइल को इन्सेट करते हैं, तो ब्राउज़र उनको प्रस्तुत करने की संभावना नहीं है जैसा आप उम्मीद कर सकते हैं। तो, यहां रंगीन सीमाओं के साथ एक प्रशंसक बटन है:
एक {सीमा-शैली: ठोस; सीमा-चौड़ाई: 1 पीएक्स 4 पीएक्स 4 पीएक्स 1 पीएक्स; पाठ-सजावट: कोई नहीं; पैडिंग: 4 पीएक्स; सीमा-रंग: # 69 एफ # 00 एफ # 00 एफ # 69 एफ; }और आप बटन बटन की होवर और सक्रिय शैलियों को भी प्रभावित कर सकते हैं, बस उन छद्म-वर्गों का उपयोग करें:
ए: लिंक {सीमा-शैली: ठोस; सीमा-चौड़ाई: 1 पीएक्स 4 पीएक्स 4 पीएक्स 1 पीएक्स; पाठ-सजावट: कोई नहीं; पैडिंग: 4 पीएक्स; सीमा-रंग: # 69 एफ # 00 एफ # 00 एफ # 69 एफ; } ए: होवर {सीमा-रंग: # सीसीसी; }