आज इस आर्टिकल में हम आपको CSS Link Tutorials in Hindi – Part 13 के बारे में बताने जा रहे है.
Link को हम clickable text भी कह सकते है और इस पर हम वो सभी property अप्लाई कर सकते है जो हम एक नार्मल text पर अप्लाई करना चाहते है. जैसे उदाहरण के तौर पर
a {
color: yellow;
}
हर लिंक की 4 state होती है जिससे हम उनकी अलग अलग property सेट कर सकते है.
a:link-यह नार्मल लिंक होता है जब हमने किसी लिंक पर क्लिक ना किया हो.a:visited-इसका मतलब उस लिंक का style देना जिस पर हम क्लिक कर चुके है.a:hover-जब हम mouse को किसी लिंक पर लेकर जाते है उसको हम hover पोजीशन कहते है.a:active-इस मूवमेंट को हम क्लिक करने और क्लिक कर चुके है के बीच का मान सकते है.
Example के तौर पर हम आपको नीचे इनका color सेट करके बता रहे है.
Link का color से करने के लिए
a:link {
color: green;
}
किसी भी लिंक पर क्लिक करने के बाद में उसके color को सेट करने के लिए
a:visited {
color: red;
}
किसी भी लिंक पर mouse cursor ले जाने पर उसके color में बदलाव करने के लिए
a:hover {
color: hotpink;
}
जब किसी लिंक पर क्लिक किया हुआ हो तो उस दौरान उसके color को सेट करने के लिए
a:active {
color: blue;
}
अब आपको 2 बातों का हमेशा ध्यान रखना है की hover आपको link और visited के बाद में define करना है और active आपको hover के बाद में.
How to remove underline in Link text?
अगर आप अपने डॉक्यूमेंट में दिए गए लिंक के underline को remove करना चाहते है तो आप हमारे CSS Text Tutorials in Hindi – Part 11 को चेक करे और इसमें text decoration सेक्शन को read out करे.
How to Set Background Color of Link text?
किसी भी लिंक के background color को सेट करने के लिए आप CSS Background Tutorials in Hindi – Part 4 को चेक करे और इसमें आप background-color property सेक्शन को पढ़े.
How to Make Advance Link Button Using CSS?
Link Button बनाने के लिए आपको कुछ एक property का इस्तेमाल करना हो
जिनके बारे में हम पिछले tutorials में पढ़ चुके है.
यहाँ पर हम आपको Internal CSS method के द्वारा ही एक button बना कर बता रहे है.
इसको आप external CSS फाइल में इसी तरह से इस्तेमाल कर सकते है.
<!DOCTYPE html>
<html>
<head>
<title>Advance Link Button</title>
<style type="text/css">
a:link, a:visited{
background-color: #42f4e2;
color: black;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active{
background-color: #0cad4c;
}
</style>
</head>
<body>
<a href="https://hindialerts.com/">Click Here</a>
</body>
</html>
Output
इस प्रकार हम कोई button बना सकते है जिस पर क्लिक करने पर user किसी दुसरे डॉक्यूमेंट पर jump कर सके.
CSS List Tutorial in Hindi – Part 14>>>>>>>>>>>
इसे भी पढ़े – FAT और NTFS क्या है?
