CSS लिंक्स

Link एक चीज़ नहीं है — वह चार है। जिस link पर आपने कभी click नहीं किया वह एक तरह दिखता है, जिस link को आप खोल चुके हैं वह दूसरी तरह, और link फिर बदल जाता है जब आपका mouse उस पर होता है और जब आप उसे दबा रहे होते हैं। CSS इनमें से हर पल को अपना selector देता है, जिसे pseudo-class कहते हैं।

Diagram — देखें, यह सब कैसे जुड़ता है

Link की चार states

• a:link — एक सामान्य, न खोला गया link।
• a:visited — वह link जिसे visitor पहले ही खोल चुका है।
• a:hover — mouse link के ऊपर है।
• a:active — link पर इसी समय click हो रहा है।

क्रम मायने रखता है: हमेशा link, visited, hover, active के क्रम में लिखें। इसे याद रखने का आसान तरीका है "LoVe HAte" — Link, Visited, Hover, Active। अगर hover visited से पहले आ जाए, तो visited का रंग जीत जाता है और hover effect कभी दिखता नहीं।

Links को सजाना

Links नीले रंग में और underline के साथ शुरू होते हैं। उन्हें उन्हीं properties से बदलें जो आप पहले से जानते हैं: color, text-decoration, background-color और font-weight। Underline हटाना आम है — text-decoration: none; — लेकिन तब link को कोई और इशारा चाहिए, जैसे रंग या hover background, नहीं तो visitors को पता ही नहीं चलेगा कि वह clickable है।

Syntax — links काम में

a:link {
  color: #2563eb;
  text-decoration: none;
}
a:visited {
  color: #7c3aed;
}
a:hover {
  color: #ea580c;
  text-decoration: underline;
}
a:active {
  color: #dc2626;
}

Link button — link को button बनाएँ

Link button जैसा दिख सकता है: उसे padding, background colour और गोल कोने दें। तरकीब है display: inline-block; — इसके बिना, link पर ऊपर-नीचे की padding किसी चीज़ को धकेलती नहीं।

.btn:link, .btn:visited {
  display: inline-block;
  background: #16a34a;
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
}
.btn:hover {
  background: #15803d;
}

आम गलतियाँ

• चारों states को गलत क्रम में लिखना — hover link और visited के बाद आना चाहिए, नहीं तो वह दिखेगा नहीं।
• Links से underline हटाना और कोई और इशारा न देना — visitors को पता नहीं चलता कि क्या clickable है।
• Link button पर display: inline-block; भूल जाना — तब padding रंग तो देता है पर दूसरे elements को धकेलता नहीं।
• सिर्फ a को style करना और हैरान होना कि खोले गए links अलग क्यों दिखते हैं — browser का डिफ़ॉल्ट visited रंग (बैंगनी) अब भी लागू होता है।

याद रखें

• चार states, इसी क्रम में: link, visited, hover, active — "LoVe HAte"।
• :hover mouse के लिए है; :focus keyboard के लिए है। दोनों को style करें।
• text-decoration: none; underline हटा देता है।
• Link button को अपनी padding के काम करने के लिए display: inline-block; चाहिए।
• :visited सिर्फ रंग बदल सकता है, privacy के लिए।
• तरकीब: LoVe HAte — Link, Visited, Hover, Active, इसी क्रम में।

उदाहरण समझिए

• a:link { color: #2563eb; text-decoration: none; } — न खोले गए links नीले हैं और बिना underline के, इसलिए menu साफ़ दिखता है।
• a:visited { color: #7c3aed; } — जो पेज आप खोल चुके हैं वह बैंगनी हो जाता है, इसलिए आप देख सकते हैं कि आप कहाँ-कहाँ गए थे।
• a:hover { color: #ea580c; text-decoration: underline; } — जब mouse link पर टिकता है, तो वह नारंगी हो जाता है और underline वापस आ जाता है, बताते हुए कि वह clickable है।
• .btn:link, .btn:visited { display: inline-block; background: #16a34a; } — "Join Now" link को हरे button का रूप मिलता है, और inline-block उसकी padding को ठीक से काम कराता है।
• .btn:hover { background: #15803d; } — hover पर button गहरा हरा हो जाता है, जैसे असली button दबाया जा रहा हो।