Best Hindi Tutorials

CSS in Hindi : Links

CSS Links

  • Introduction to CSS links in Hindi
  • CSS :link property in Hindi 
  • CSS :visited property in Hindi 
  • CSS :hover property in Hindi
  • CSS :active property in Hindi 
  • Removing underline from links using CSS 

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 की designing करने के लिए 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:blue;
}
</style>

</head>

<body>

<a href="http://www.besthinditutorials.com">Best Hindi Tutorials</a>

</body>

</html> 
         
ऊपर दिए गए उदाहरण में link की normal state का color blue define किया गया है। 

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:yellow;
}
</style>

</head>

<body>
<a href="http://www.besthinditutorials.com">Best Hindi Tutorials</a>
</body>

</html> 

ऊपर दिए गए उदाहरण में जब list एक बार visit की जा चुकी होगी तो उसको color yellow show होगा।       

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:red;
}
</style>

</head>

<body>
<a href="http://www.besthinditutorials.com>Best Hindi Tutorials</a>
</body>

</html>

ऊपर दिए गए उदाहरण में जब visitor mouse cursor को link पर लेकर जाता है तो उस link का color red हो जाता है।

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:green;
}
</style>
</head>

<body>
<a href="http://www.besthinditutorials.com">Best Hindi Tutorials</a>
</body>

</html> 
   
ऊपर दिए गए उदाहरण में जब user link पर click करता है तो उसको color green हो जाता है।

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>
     

      DMCA.com Protection Status

 Leave a comment