सीएसएस लिंक

CSS के द्वारा, लिंक की शैली को विभिन्न तरीकों से सेट किया जा सकता है。

पाठ लिंक पाठ लिंक लिंक बटन लिंक बटन

लिंक शैली सेट करना

लिंक को किसी भी CSS गुण (उदाहरण के लिए color、font-family、background आदि) के द्वारा शैली सेट करें。

उदाहरण

a {
  color: hotpink;
}

खुद से प्रयास करें

इसके अलावा, लिंक की स्थिति के अनुसार लिंक के विभिन्न शैली निर्धारित की जा सकती है。

चार लिंक स्थितियां हैं:

  • a:link - सामान्य, देखा नहीं गया लिंक
  • a:visited - उपयोगकर्ता ने देखा गया लिंक
  • a:hover - उपयोगकर्ता लिंक पर माउस लगाए हुए है
  • a:active - लिंक पर क्लिक करने पर

उदाहरण

/* देखा नहीं गया लिंक */
a:link {
  color: red;
}
/* पहले से देखा गया लिंक */
a:visited {
  color: green;
}
/* लिंक पर माउस लगाए जाने पर */
a:hover {
  color: hotpink;
}
/* चयनित लिंक */
a:active {
  color: blue;
}

खुद से प्रयास करें

अगर कई लिंक स्थितियों के लिए शैली सेट करना है, तो निम्नलिखित क्रम में अनुसरण करें:

  • a:hover अवश्य a:link और a:visited के बाद होना चाहिए
  • a:active अवश्य a:hover के बाद होना चाहिए

पाठ सजावट

text-decoration गुण का उपयोग मुख्य रूप से लिंक से नीचे लीन को हटाने के लिए किया जाता है:

उदाहरण

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}

खुद से प्रयास करें

पृष्ठभूमि रंग

background-color गुण का उपयोग लिंक के पृष्ठभूमि रंग को निर्दिष्ट करने के लिए किया जा सकता है:

उदाहरण

a:link {
  background-color: yellow;
}
a:visited {
  background-color: cyan;
}
a:hover {
  background-color: lightgreen;
}
a:active {
  background-color: hotpink;
}

खुद से प्रयास करें

लिंक बटन

इस उदाहरण में हमने एक उच्च स्तरीय उदाहरण दिखाया है, जिसमें हमने कई CSS गुणों को संयोजित किया है, जिससे लिंक को बॉक्स/बटन के रूप में दिखाया जाता है:

उदाहरण

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center; 
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active {
  background-color: red;
}

खुद से प्रयास करें

और इंस्टेंस

सुपरवायेंस करने के लिए विभिन्न शैली योजना जोड़ें
इस उदाहरण में, अधिक शैली योजना को सुपरवायेंस किया जाता है।
एडवांस - बॉर्डर वाले लिंक बटन को बनाना
लिंक बॉक्स/बटन को बनाने के लिए इसका एक और उदाहरण है।
कर्सर बदलना
cursor एट्रिब्यूट द्वारा दिखाने होने वाले कर्सर क़िस्म निर्धारित करता है।इस उदाहरण में विभिन्न कर्सर क़िस्मों को दिखाया गया है (लिंक के लिए उपयोगी है)।