CSS link Properties in hindi-css लिंक प्रॉपर्टीज क्या है?

by

हेल्लो दोस्तों आज के इस पोस्ट में आपको CSS link Properties in hindi के बारे में बताया गया है की क्या होता है कैसे काम करता है तो चलिए शुरू करते है

Introduction to CSS Link Properties

World Wide Web एक links के collection के अलावा कुछ नहीं है। Links के माध्यम से ही आप एक page से दूसरे page तक travel करते है। links को design करने के लिए आप css के माध्यम से कर सकते है और अपने 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 होती है।   

इसे भी पढ़े –CSS in Hindi-CSS क्या है ?

इन 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=”https://javahindi.com”>Java Hindi Tutorial</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=”https://javahindi.com”>Java Hindi Tutorial</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=”https://javahindi.com”>Java Hindi Tutorial</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=”https://javahindi.com”>Java Hindi Tutorial</a>
</body>
</html>

ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है। 

reference-https://www.tutorialspoint.com/css/css_links.htm

CSS link Properties in hindi

निवेदन-अगर आपको यह आर्टिकल(CSS link Properties in hindi) अच्छा लगा हो तो आप इस पोस्ट को अपने दोस्तों के साथ जरुर शेयर() करे और आपको जिस टॉपिक(CSS link Properties in hindi) पर आपको पढना या नोट्स चाहिए तो हमें जरुर कमेंट(CSS link Properties in hindi) करे आपका कमेंट्स हमारे लिए बहु मूल्य है धन्यवाद

Leave a Comment