CSS के साथ लिंक्स स्टाइल करना

लिंक स्टेट्स और प्स्यूडो-क्लासेस

CSS से लिंक्स स्टाइल करने के लिए, पहले निम्नलिखित लिंक स्टेट्स जानें: link, visited, hover, active। एंकर एलिमेंट के प्स्यूडो-क्लासेस का उपयोग करें:

a:link      /* अनविजिटेड लिंक */
a:visited   /* विजिटेड लिंक */
a:hover     /* माउस होवर पर लिंक */
a:active    /* क्लिक/सक्रिय लिंक */

सही क्रम (LVHA - LoVe HAte):

a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }

यह क्रम महत्वपूर्ण है क्योंकि बाद के नियम पहले वालों को ओवरराइड कर सकते हैं।

उदाहरण 1: बेसिक लिंक स्टाइलिंग

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  color: orange;
  text-decoration: underline;
}
a:hover {
  color: red;
  text-decoration: underline;
}
a:active {
  color: green;
  text-decoration: underline;
}
</style>
</head>
<body>
<h1>ट्यूटोरियल्स</h1>
<p><a href="https://www.tutorialspoint.com/java">Java</a></p>
<p><a href="https://www.tutorialspoint.com/csharp">C#</a></p>
<p><a href="https://www.tutorialspoint.com/jquery">jQuery</a></p>
<p><a href="https://www.tutorialspoint.com/ruby">Ruby</a></p>
<p><a href="https://www.tutorialspoint.com/pytorch">PyTorch</a></p>
</body>
</html>

उदाहरण 2: बिना अंडरलाइन के लिंक्स

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  color: blue;
  text-decoration: none;
}
a:hover {
  color: blue;
  text-decoration: none;
}
a:active {
  color: blue;
  text-decoration: none;
}
</style>
</head>
<body>
<h1>डेमो हेडिंग</h1>
<div>
  <p>यह <a href="https://tutorialspoint.com">रेफरेंस</a> है</p>
</div>
</body>
</html>

आधुनिक प्स्यूडो-क्लासेस:

• :any-link - :link और :visited दोनों से मेल खाता है
• :focus - कीबोर्ड फोकस (एक्सेसिबिलिटी के लिए महत्वपूर्ण)
• :focus-visible - केवल जब फोकस दृश्यमान हो
• :focus-within - जब बच्चे में फोकस हो

सर्वोत्तम अभ्यास (एक्सेसिबल लिंक्स):

a {
  color: #0066cc;
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:visited { color: #663399; }

a:hover { color: #004499; }

a:active { color: #cc0000; }

/* फोकस स्टाइल - कीबोर्ड नेविगेशन के लिए आवश्यक */
a:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* या मॉडर्न: */
a:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

बटन-जैसे लिंक्स:

.btn-link {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: #0066cc;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}
.btn-link:hover { background: #0052a3; }