Introduction of CSS Link Property in Hindi
इस tutorial मे हम CSS Link property के बारे मे detail मे जानेंगे। Link के माध्यम से हम एक website से दूसरी website या एक page से दूसरे page तक जा सकते है।
Link को anchor element के द्वारा define किया जाता है और CSS Link Property की मदद से Link को Style दी जाती है।
Styling Link with CSS in Hindi
वैसे तो Links को style करने के लिए CSS द्वारा कोई अलग property define नहीं की गई है। Link को Style करने के लिए Font, Color, Background और Text property का ही इस्तेमाल किया जाता है।
Link के साथ कुछ selectors use होते है।
Link की Condition के हिसाब सेर उसमे चार stages होती है।
- a:link – इसके द्वारा normal और unvisited Link को design किया जाता है।
- a:visited – जब किसी link पर क्लिक हो चुका है तो उसे Visited Link कहते है। इसे a:visited selector द्वारा design किया जाता है।
- a:hover – जब Mouse का pointer किसी link पर ले जाते है तो उसे Hover कहते है। और Hover के समय link मे बदलाव होता है तो उसे hover effect कहते है। इसे a:hover selector द्वारा style किया जाता है।
- a:active – वर्तमान मे आप जिस लिंक पर active होते है उसे active link कहा जाता है। इसे a:active selector द्वारा style किया जाता है।
उदाहरण
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: orange;
}
/* mouse over link */
a:hover {
color: pink;
}
/* selected link */
a:active {
color: blue;
}
</style>
</head>
<body>
<h2>CSS Link Property in Hindi</h2>
<p><b><a href="https://www.megatechbook.com/" target="_blank">This is a link</a></b></p>
</body>
</html>
यहा Link को Style करने के लिए कुछ order rules को follow करना पड़ता है।
a:link और a:visited के बाद ही a:hover को define किया जाता है।
a:hover के बाद ही a:active को define किया जाता है।
Text Decoration in Hindi
link के नीचे से underlines को remove करने के लिए text-decoration property का इस्तेमाल किया जाता है।
उदाहरण
<html>
<head>
<style>
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
</style>
</head>
<body>
<h4>CSS Link Property in Hindi</h4>
<p><b><a href="https://www.megatechbook.com/" target="_blank">This is a link</a></b></p>
</body>
</html>
Background Color in Hindi
Link को Background color देने के लिए Background-color property का इस्तेमाल किया जाता है।
उदाहरण
<html>
<head>
<style>
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightblue;
}
a:active {
background-color: pink;
}
</style>
</head>
<body>
<h4>CSS Link Property in Hindi</h4>
<p><b><a href="https://www.megatechbook.com/" target="_blank">This is a link</a></b></p>
</body>
</html>
Link Buttons in Hindi
Link को Box या Button मे Style करने के लिए कुछ CSS Property का इस्तेमाल किया जाता है।
उदाहरण
<html>
<head>
<style>
a:link, a:visited {
background-color: red;
color: white;
padding: 15px 28px;
text-align: center;
text-decoration: none;
}
a:hover, a:active {
background-color: lightblue;
}
</style>
</head>
<body>
<h4>CSS Link Property in Hindi</h4>
<p><b><a href="https://www.megatechbook.com/" target="_blank">This is a link</a></b></p>
</body>
</html>