CSS Links
Introduction to CSS Links
World Wide Web एक links के collection के अलावा कुछ नहीं है। Links के माध्यम से ही आप एक page से दूसरे page तक travel करते है। CSS के माध्यम से आप links को design कर सकते है और अपने page के according customize कर सकते है। Links पर आप सभी basic properties apply कर सकते है। लेकिन इसके लिए आपको selectors different यूज़ करने पड़ते है। Links की हर condition के लिए एक अलग selector provide किया गया है। इन selectors की list निचे दी गयी है।
- a : link - इस selector को link की normal state को design करने के लिए use किया जाता है। ये वो state होती है जब link को एक बार भी visit नहीं किया गया है।
- a : visited - इस selector को link की visited state को design करने के लिए यूज़ किया जाता है। ये वो state होती जब link visit की जा चुकी है।
- a : hover - इस selector को links की hover state को design करने के लिए यूज़ किया जाता है। ये वो state होती है जब link पर mouse ले जाया जाता है।
- a : active - इस selector से links की active state को design करने के लिए यूज़ किया जाता है। ये वो state होती है जब link active होती है।
इन selectors को यूज़ करके आप links की advanced designing कर सकते है। आइये इन selectors के बारे में detail से जानने का प्रयास करते है।
a : link
जैसा की मैने आपको ऊपर बताया इस selector के द्वारा आप link की normal state के लिए rules define करते है। ये वो state होती है जब links को आप किसी webpage पर पहली बार देखते है और अभी तक उस link को visit नहीं किया गया है। आइये देखते है की इस selector को आप किस प्रकार यूज़ कर सकते है। इसे निचे एक उदाहरण के माध्यम से समझाया जा रहा है।
<html>
<head>
<title> a : link demo</title>
<style>
a:link {
color:red;
}
</style>
</head>
<body>
<a href="http://www.yahoo.com">Yahoo</a>
</body>
</html>
ऊपर दिए गए उदाहरण में link की normal state का color red define किया गया है। ये उदाहरण निचे दिया गया output generate करता है।
a : visited
इस selector के द्वारा आप link की उस state के लिये rules define करते है जब link को visit किया जा चूका है। ये एक important selector है। जब आप इसे यूज़ करते है तो users को पता लग जाता है की वे कौनसी links visit कर चुके और कौनसी अभी तक नहीं visit की है। इसे निचे एक उदाहरण के माध्यम से समझाया जा रहा है।
<html>
<head>
<title> a : visited </title>
<style>
a:visited {
color:gold;
}
</style>
</head>
<body>
<a href="http://www.besthinditutorials.com">Best Hindi Tutorials</a>
</body>
</html>
ऊपर दिए गए उदाहरण में जब link एक बार visit की जा चुकी होगी तो उसका color gold show होगा। ये उदाहरण निचे दिया गया output generate करता है।
a : hover
जब user mouse cursor को link पर ले जाये तो उसमे कौनसे changes होने चाहिए, उन्हें define करने के लिए आप a : hover selector यूज़ करते है। उदाहरण के लिए यदि जब user mouse cursor ले जाये तो आप link का color red show करना चाहते है। इस selector के use करने से एक link highlight हो जाती है और वह से अलग दिखती है। इससे simple text में भी आसानी से पता चल जाता है की ये link है। इसे निचे एक उदाहरण के माध्यम से समझाया गया है।
<html>
<head>
<title> a : hover demo</title>
<style>
a:hover {
color:purple;
}
</style>
</head>
<body>
<a href="http://www.besthinditutorials.com">Best Hindi Tutorials</a>
</body>
</html>
ऊपर दिए गए उदाहरण में जब visitor mouse cursor को link पर लेकर जाता है तो उस link का color purple हो जाता है। ये उदाहरण निचे दिया गया output generate करता है।
a : active
इस selector के द्वारा आप link को उस state के लिए design करते है जब link को click किया जा रहा होता है। इस state में आप link का color change कर सकते है या फिर और भी दूसरे rules apply कर सकते है। इसे निचे एक उदाहरण के माध्यम से समझाया जा रहा है।
<html>
<head>
<title>a : active demo</title>
<style>
a:active {
color:hot-pink;
}
</style>
</head>
<body>
<a href="http://www.besthinditutorials.com">Best Hindi Tutorials</a>
</body>
</html>
ऊपर दिए गए उदाहरण में जब user link पर click करता है तो उसको color hot pink हो जाता है। ये उदाहरण निचे दिया गया output generate करता है।
Removing underline from links
यदि आप links के निचे by default आने वाली line को remove करना चाहते है तो इसके लिए आप CSS की text-decoration property यूज़ कर सकते है। इसी property के द्वारा आप वापस underline show भी कर सकते है। इस property की आप 2 values दे सकते है। एक तो none और दूसरी underline होती है। इसे निचे एक उदाहरण के माध्यम से समझाया जा रहा है।
<html>
<head>
<title>text-decoration demo</title>
<style>
a{
text-decoration : none;
}
</style>
</head>
<body>
<a href="http://www.besthinditutorials.com">Best Hindi Tutorials</a>
</body>
</html>
ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।
