इस Tutorial में हम आपको CSS Link Properties के बारे में पूरी जानकारी देंगे. अध्ययन की सुविधा की दृष्टि से हमने इस Tutorial को कई छोटे-छोटे भागों में विभाजित किया हैं.
Table of Content
CSS Link property Introduction in Hindi
WWW यानि World Wide Web वो शहर हैं जिसमें सभी भाग आपस में Links नामक Highways से जुडे हुए हैं. आप एक भाग से दूसरे भाग में आसानी से आ-जा सकते हैं. ठीक इसी तरह Links के माध्यम से हम भी एक Website से दूसरी Website, एक Page से दूसरे Page तक जाते हैं.
Anchor Element द्वारा Links को Define किया जाता हैं. और CSS Link Properties द्वारा इन Links को Stylish बनाया जाता हैं.
वैसे, CSS द्वारा Links के लिए कोई अलग Properties Define नहीं की गई हैं. Links को Style बनाने के लिए Font और Text Properties का ही इस्तेमाल किया जाता हैं.
Styling Link with CSS in Hindi
HTML Links को Style करने से पहले हमें Links को समझना होगा तभी हम Links को सही ढंग से Style कर पाएंगे.
HTML Link साधारण Text से अलग होती हैं. इसका व्यवहार परिस्थितियों के अनुसार बदलता रहता हैं. Link की Condition के हिसाब से चार Stages होती हैं.
Different Stages of a Link
- Link – ये Link की पहली Condition होती हैं. इस Condition में Link पहली बार ब्राउजर में Open होती हैं. मतलब इस पर एक बार भी क्लिक नही किया गया हैं. इसे a:link Selector द्वारा Style किया जाता हैं.
- Visited Link – जब किसी लिंक पर क्लिक किया जा चुका हो तो उस लिंक को Visited Link कहते हैं. इसे a:visited Selector द्वारा Style किया जाता हैं.
- Hover Link – जब Mouse Pointer को किसी लिंक पर ले जाया जाता हैं, तो उस समय क्रिया को Hover कहते हैं. और जो बदलाव Hover के दौरान लिंक में होता हैं. उसे Hover Effect कहते हैं. इसे a:hover Selector द्वारा Style किया जाता हैं.
- Active Link – वर्तमान में आप जिस लिंक पर होते हैं, उसे Active Link कहा जाता हैं. इसे a:active Selector द्वारा Style किया जाता हैं.
Default Style of Link
Link की Default Style को समझने के लिए हम पहले एक HTML Link Define करते हैं. जिस पर हम कोई भी Style Apply नही करेंगे.
आइए अब ऊपर दी गई Default Link की Style को समझते हैं. और जानते हैं कि यह Default Style कहाँ से आती हैं?
लगभग सभी Browsers में HTML Elements के लिए CSS Style Declare की जाती हैं जो Browser की Built-in-css File में होती हैं. यहीं से HTML Links की Default CSS Style आती हैं. जो कुछ इस प्रकार होती हैं.
- Link का Color Blue है.
- Link Text Underlined हैं. Text के नीचे एक लाईन हैं.
- Visited Link का Color Purple है. अगर आपको नही दिखा है तो एक बार इस लिंक पर क्लिक कीजिए.
- Hover करने पर Mouse Pointer एक हाथ में बदल जाता हैं.
- Active Link का Color Red हैं. देखने के लिए लिंक के ऊपर क्लिक दबाए रखे.
Declare Style Rule for Link
अब हमने Link की विभिन्न Stages के बारे में जान लिया हैं और Link की Default Style से भी परिचित हो गए हैं. आइए, अब HTML Link को CSS द्वारा Stylish बनाते हैं.
इसे Try कीजिए
<html>
<head>
<title>CSS Link Style</title>
<style>
a {
text-decoration: none;
}
a:link {
color: blue;
}
a:visited {
color: red;
}
a:hover {
color: green;
}
a:active {
color: yellow;
}
</style>
</head>
<body>
<a href=”#”>This is Link</a>
</body>
</html>
Note: Link के लिए CSS Rule Declare करने से पहले Link की विभिन्न Stages के क्रम का अवश्य ध्यान रखें. जो इस प्रकार हैं.
Link → Visited Link → Hover Link → Active Link
आपने क्या सीखा?
इस Tutorial में हमने आपको CSS Link Properties के बारे में पूरी जानकारी दी हैं. आपने CSS Link की विभिन्न Stages, Default Link Style और Custom Link Style के बारे में भी सीखा हैं. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.
#BeDigital
