Css Notes

CSS Links Styling

by

HTML लिंक को CSS की मदद से अधिक आकर्षक बनाया जा सकता है, जो देखने मे अच्छा और सुंदर लग सकता है। CSS Links Styling के लिए विभिन्न प्रॉपर्टी का इस्तेमाल किया जा सकता है, जैसे – color, text-decoration, background-color, font-size, font-weight, font-family, border-radius, hover इत्यादि।

Below is simple HTML link

Click here to go Home Page

This is button link customized with CSS

Click here to go Home Page

जब किसी लिंक पर क्लिक किया जाता है, या माउस लिंक के ऊपर ले जाया जाता है, तो लिंक के विभिन्न रंग प्रभाव देखने को मिलते हैं। किसी लिंक की स्टाइल इस बात पर निर्भर करती है कि वे किस स्थिति में हैं। यहाँ लिंक की चार स्तिथियाँ हैं –

  • :link – एक सामान्य लिंक जिसपर क्लिक नहीं किया गया है।
  • :visited – लिंक जिसे यूजर ने क्लिक करके विज़िट कर लिया है।
  • :hover – लिंक के ऊपर माउस ले जाने पर दिखाई देने वाला इफेक्ट।
  • :active – जब लिंक पर क्लिक किया जाता है उस समय की स्तिथि।
Syntax
Style links according to link state:

/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}

लिंक स्थिति के लिए स्टाइल निर्धारित करते समय कुछ नियम भी होते हैं, जो इस प्रकार हैं-

  • :hover must come after :link and :visited
  • :active must come after :hover
CSS Code
Style links according to link state:

a:link {
  color: red;
}
a:visited {
  color: green;
}
a:hover {
  color: purple;
}
a:active {
  color: blue;
}

HTML Code

<body>
  <a href="https://www.google.com">Click to Open Google Home Page</a><br>
  <a href="https://www.facebook.com">Click to Open Facebook Home Page</a>
</body>

CSS Links – Text Decoration

यहाँ text-decoration प्रॉपर्टी का उपयोग लिंक से अन्डरलाइन हटाने के लिए किया जाता है। आप चाहे तो इसे विभिन्न स्तिथियों के अनुसार सेट कर सकते है। डिफ़ॉल्ट रूप से लिंक अन्डरलाइन होते हैं।

CSS Code
Set link underline according to different state:

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}

HTML Code

<body>
  <a href="https://www.google.com">Click to Open Google Home Page</a><br>
  <a href="https://www.facebook.com">Click to Open Facebook Home Page</a>
</body>

यहाँ background-color प्रॉपर्टी का उपयोग लिंक का बैकग्राउंड सेट करने के लिए कर सकते है। आप चाहे तो इसे विभिन्न स्तिथियों के अनुसार सेट कर सकते है। डिफ़ॉल्ट रूप से लिंक मे कोई बैकग्राउंड नहीं होता है।

CSS Code

a:link {
  background-color: yellow;
}

a:visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

a:active {
  background-color: pink;
}

HTML Code

<body>
  <a href="https://www.google.com">Click to Open Google Home Page</a><br>
  <a href="https://www.facebook.com">Click to Open Facebook Home Page</a>
</body>

CSS का इस्तेमाल करके किसी टेक्सट लिंक को बटन मे परिवर्तित किया जा सकता है। इसके लिए निम्न उदाहरण देखें –

Example
Combine several CSS properties to display links as boxes/buttons

a:link, a:visited {
  background-color: blue;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 10px;
}

a:hover, a:active {
  background-color: orange;
  color: blue;
}

HTML Code

<body>
  <a href="https://www.google.com">Click to Open Google Home Page</a>
</body>

CSS Cursor Styles

CSS मे जब किसी लिंक पर माउस पॉइन्टर ले जाया जाता है, तो पॉइन्टर का आकार हाथ (Hand) के आकार मे बदल जाता है। ऐसे ही अनेकों कर्सर पॉइन्टर को निम्न उदाहरण मे बताया गया है, जिन्हे किसी भी लिंक के लिए सेट किया जा सकता है।

Example
This example demonstrates the different types of cursors (can be useful for links):

HTML Code

<body>
<span style="cursor: auto">auto</span><br>
<span style="cursor: crosshair">crosshair</span><br>
<span style="cursor: default">default</span><br>
<span style="cursor: e-resize">e-resize</span><br>
<span style="cursor: help">help</span><br>
<span style="cursor: move">move</span><br>
<span style="cursor: n-resize">n-resize</span><br>
<span style="cursor: ne-resize">ne-resize</span><br>
<span style="cursor: nw-resize">nw-resize</span><br>
<span style="cursor: pointer">pointer</span><br>
<span style="cursor: progress">progress</span><br>
<span style="cursor: s-resize">s-resize</span><br>
<span style="cursor: se-resize">se-resize</span><br>
<span style="cursor: sw-resize">sw-resize</span><br>
<span style="cursor: text">text</span><br>
<span style="cursor: w-resize">w-resize</span><br>
<span style="cursor: wait">wait</span>
</body>

उपरोक्त कोड का आउटपुट निम्न प्रकार होगा, एक-एक करके नीचे दिए सभी आइटम पर पॉइन्टर ले जाए और रिजल्ट देखें।

auto
crosshair
default
e-resize
help
move
n-resize
ne-resize
nw-resize
pointer
progress
s-resize
se-resize
sw-resize
text
w-resize
wait
Share This Page

Leave a Comment