लिंक के स्टाइल रंग के लिए कई सीएसएस-नमूने हैं।सीएसएस लिंक रंग शैलियों का सर्वोत्तम अभ्यास
html5boilerplate.com लिंक के लिए इस तरह के सीएसएस कोड प्रदान करता है:
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
यह ज्यादातर मामलों के लिए काफी अच्छा है?
या लिंक के स्टाइल रंग के लिए शायद बेहतर सीएसएस-कोड मौजूद है?
निश्चित रूप से है कि अधिकांश मामलों में पर्याप्त होगा पर क्लिक करें।
बस ध्यान रखें कि लिंक के लिए शैलियों की सही क्रम है:
a:link { color: #c00 } /* unvisited links */
a:visited { color: #0c0 } /* visited links */
a:hover { color: #00c } /* user hovers */
a:active { color: #ccc } /* active links */
outline लग सकता है "बदसूरत" आप के लिए है, लेकिन यह एक बहुत ही महत्वपूर्ण पहुंच-योग्यता सुविधा है। यदि आप इसे हटाते हैं - कृपया वर्तमान तत्व (बड़े/बोल्डर फ़ॉन्ट, उच्च विपरीत पृष्ठभूमि इत्यादि) को सही ढंग से अंतर करने के लिए वैकल्पिक तरीका प्रदान करने का ख्याल रखें
'ए' और 'ए: लिंक' चयनकर्ताओं के बीच अंतर देखें http://stackoverflow.com/questions/2638229/css-alink-vs-just-a-without-the-link-part –
यदि आप यह सुनिश्चित करना चाहते हैं कि आप स्टाइल लिंक (और एंकर जो लिंक नहीं हैं) हैं, तो आपको a के बजाय a:link का उपयोग करना चाहिए।
और आप अंत में a:active जोड़ सकते हैं। यहां आपके पास tutorial है।
मैं लगता है इसकी हमेशा जोड़ने के लिए अच्छा
एक {रूपरेखा: कोई नहीं; }
के बाद से कुछ ब्राउज़रों लिंक करने के लिए कष्टप्रद रूपरेखा जोड़ने जब आप उन्हें
कृपया * बस * ऐसा न करें। अभिगम्यता कारणों के लिए कहां है। यदि आप इसे हटाते हैं, तो इसे किसी और चीज़ से बदलें। Http://www.outlinenone.com/ – SandRock
देखें मेरी आंखें खोलने के लिए धन्यवाद। मैंने डिजाइन डिज़ाइन के लिए हमेशा ऐसा किया। –
मैं हमेशा उन सेटिंग्स को रीसेट करता हूं जो ब्राउज़र के बीच भिन्न हो सकते हैं।
मैं एक छवि जोड़कर (बाहरी विकिपीडिया में से एक के समान) बाहरी वेबसाइटों के लिंक को अलग-अलग टैग करना भी पसंद करता हूं।
a,
a:link,
a:active,
a:visited,
a:hover {
color: #d30;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Links to external websites */
a.external:before {
content: url(./pics/external.png);
}
यदि आप डिफ़ॉल्ट रेखांकन को हटाते हैं रंगीन अंधेरे वाले लोगों द्वारा शेष पाठ से लिंक को अलग करना असंभव हो सकता है, या मोनो-क्रोम डिस्प्ले (जैसे ई इंक डिवाइस) का उपयोग करते समय। – tomasz86
@ tomasz86: अच्छा बिंदु। लेकिन: मुझे ऐसी वेबसाइट नहीं पता जो लिंक को रेखांकित करता है। शायद क्योंकि यह ग्रंथों (कई लिंक के साथ) पढ़ने के लिए मुश्किल बनाता है। जब मुझे अभिगम्यता में अधिक दिलचस्पी थी, तो मैंने पढ़ा कि रंगों में समस्या रखने वाले लोगों को वेबसाइटों पर अपनी स्टाइलशीट लागू होती है। यही कारण है कि मैंने अधिकांश लोगों के लिए वेबसाइटों को सुलभ बनाने का फैसला किया। जिन लोगों को रेखांकित लिंक की आवश्यकता है (संभवतः) अपनी शैली को लागू करेंगे। आपका अनुभव क्या है? –
यूके सरकार की वेबसाइट (https://gov.uk) में रेखांकित लिंक हैं। कस्टम स्टाइलशीट का उपयोग करने के लिए, मुझे लगता है कि यह उपयोगी हो सकता है लेकिन केवल तभी जब आप अपने निजी डेस्कटॉप/लैपटॉप कंप्यूटर का उपयोग कर रहे हों। यदि आपको मोबाइल डिवाइस या पब्लिक कंप्यूटर, आदि पर भरोसा करने की आवश्यकता है तो आपको उन वेबसाइटों को उनकी डिफ़ॉल्ट शैलियों के साथ देखने के लिए मजबूर होना पड़ता है। वैसे, उपरोक्त कोड में 'ए: फोकस' को 'ए: होवर {टेक्स्ट-सजावट: अंडरलाइन;}' जोड़ना कीबोर्ड उपयोगकर्ताओं के लिए सहायक होगा। – tomasz86
उस रूपरेखा को कभी भी न हटाएं, या कम से कम इसे केवल सक्रिय के लिए हटा दें: सक्रिय। यदि आप इसे सभी एंकरों के लिए करते हैं तो इसे एक के लिए भी हटा दिया जाएगा: फोकस जिसका उपयोग कीबोर्ड नेविगेशन के लिए किया जाता है। होवर पर भी भरोसा करना बहुत बुरा है क्योंकि होवर टच स्क्रीन पर मौजूद नहीं है।
मुझे लगता है कि सभी लिंक आसानी से शेष सामग्री से अलग-अलग हैं।
2016 संस्करण
/* The order is important! Do not use fixed values like px! Always check contrast between text and background for accessibility! */
a { border-bottom: thin solid;
color: rgb(0,0,192);
font-weight: bolder;
text-decoration: none;
}
a:visited { color: rgb(160,0,160); }
a:active { color: rgb(192,0,0); }
a:active, a:focus, a:hover { border-bottom-width: medium; }
2015 संस्करण
a { border-bottom: thin solid;
color: rgb(0,0,192);
font-weight: 700;
text-decoration: none;
}
a:visited { color: rgb(128,0,128); }
a:active { color: rgb(192,0,0); } /* :active MUST come after :visited */
a:active, a:focus, a:hover { border-bottom-width: medium; }
2014 संस्करण
a { border-bottom: 1px solid;
color: rgb(0,0,166);
font-weight: 700;
text-decoration: none;
}
a:visited { color: rgb(122,0,122); }
a:active { color: rgb(166,0,0); } /* :active MUST come after :visited */
a:active, a:focus, a:hover { border-bottom: 3px solid; }
2013 संस्करण
a { color: rgb(0,0,166);
font-weight: 700;
border-bottom: 1px dotted;
text-decoration: none;
}
a:visited { color: rgb(122,0,122); }
a:hover, a:focus, a:active { border-bottom: 2px solid; }
a:focus, a:active { color: rgb(166,0,0); }
प्यार से नफरत है (http://meyerweb.com/eric/css/link-specificity.html) सिफारिश हुआ करता था। – j08691