Links in CSS

CSS Links

CSS के द्वारा हम links को विभिन्‍न style दे सकते हैं। जैसे text-color, background-color, border, font-family, इत्‍यादि।

For e.g.

<style>
a{
color: #000000;
text-decoration: none;
border: 1px solid green;
padding: 20px;
}
</style>

<a href=“#”>Click</a>

 

text-decoration:- इस property का इस्‍तेमाल generally links की underline हटाने के लिए किया जाता हैं।

text-decoration की कुछ और values भी हो सकती हैं, जैसे –

text-decoration: overline;

text-decoration: underline;

जब हमें underline या overline हटाना हो तो text-decoration की value ‘none’ देते हैं।

* कोई link किस state में हैं, इस basis पर भी हम उसे style दे सकते हैं।

लिंक के चार states होते हैं –

1. a:link:– Normal लिंक, जो कि visit न की गई हो।
2. a:visited:- ऐसी लिंक जो visit कर ली गई हों।
3. a:hover:- यह लिंक का वह state हैं जब उस पर mouse का cursor होता हैं।
4. a:active:- यह लिंक का वह state हैं जब उसे click किया जाता हैं।

हम किसी link के अलग-अलग state पर style apply कर सकते हैं।

For e.g.

a:link{
color: green;
}

इससे जब तक link visit न की जाए, तब तक उसका color green रहेगा।

a:visited{
color: blue;
}

इससे जब लिंक visit कर ली जाएगी तब उसका color change हो कर blue हो जाएगा।

a:hover{
color: red;
}

इससे जब लिंक पर mouse का cursor ले जाऐंगे तब उसका color red हो जाएगा।

a:active{
color: purple;
text-decoration: overline;
}

इससे जब कोई लिंक active state में होगी तो उसका color purple होगा और उस पर एक overline होगी। नीचे दिए example में हम CSS की विभिन्‍न Properties को एक लिंक पर apply कर रहे हैं।

a:link, a:visited{
color: blue;
background-color: transparent;
border: 1px solid black;
text-align: center;
text-decoration: none;
padding: 12px 20px;
}

a:hover, a:active{
background-color: red;
color: yellow;
}