Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> CSS

CSS का उपयोग करके लिंक का रंग सेट करना

<घंटा/>

CSS हमें लिंक्स को कलर करने की अनुमति देता है। कलर प्रॉपर्टी का इस्तेमाल किसी एलीमेंट में टेक्स्ट का रंग सेट करने के लिए किया जाता है।

छद्म चयनकर्ताओं का क्रम निम्न द्वारा दिया जाता है:- :लिंक, :विजिटेड, :होवर, :सक्रिय।

सिंटैक्स

CSS कलर प्रॉपर्टी का सिंटैक्स इस प्रकार है -

Selector {
   color: /*value*/
}

उदाहरण

निम्नलिखित उदाहरण सीएसएस रंग संपत्ति को दर्शाते हैं -

<!DOCTYPE html>
<html>
<head>
<style>
#demo::after {
   content: " (visited) ";
   font-style: italic;
}
a:link {
   color: lime;
}
a:visited {
   color: green;
}
a:hover {
   color: orange;
}
a:active {
   color: gold;
}
</style>
</head>
<body>
<h2>Demo Links</h2>
<a id="demo" href="">This is demo text 1.</a>
<hr>
<p>
<a href="#">This is demo text 2.</a>
</p>
</body>
</html>

आउटपुट

यह निम्न आउटपुट देता है -

CSS का उपयोग करके लिंक का रंग सेट करना

दूसरी कड़ी को मँडराने पर, हमें निम्नलिखित आउटपुट मिलते हैं -

CSS का उपयोग करके लिंक का रंग सेट करना

दूसरे लिंक पर क्लिक करने पर, हमें निम्न आउटपुट मिलता है -

CSS का उपयोग करके लिंक का रंग सेट करना

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: auto;
   font-size: 1.4em;
   background-color: lightseagreen;
   width: 100px;
   text-align: center;
}
a:link {
   color: rebeccapurple;
}
</style>
</head>
<body>
<div>
<a id="demo" href="">Demo link.</a>
</div>
</body>
</html>

आउटपुट

यह निम्न आउटपुट देता है -

CSS का उपयोग करके लिंक का रंग सेट करना


  1. CSS का उपयोग करके रेडियल ग्रेडिएंट का आकार निर्धारित करना

    रेडियल ग्रेडिएंट का आकार सेट करने के लिए, रेडियल-ग्रेडिएंट () फ़ंक्शन का उपयोग करें। यह फ़ंक्शन पृष्ठभूमि छवि के रूप में एक रेडियल ग्रेडिएंट सेट करता है। फ़ंक्शन में दूसरा पैरामीटर नीचे दिए गए उदाहरण के अनुसार इच्छित आकार के रूप में सेट किया जाना है - background-image: radial-gradient(40% 50px at ce

  1. CSS का उपयोग करके रेडियल ग्रेडिएंट का आकार निर्धारित करना

    रेडियल ग्रेडिएंट का आकार सेट करने के लिए, रेडियल-ग्रेडिएंट () फ़ंक्शन का उपयोग करें। यह फ़ंक्शन पृष्ठभूमि छवि के रूप में एक रेडियल ग्रेडिएंट सेट करता है। फ़ंक्शन में पहला पैरामीटर नीचे दिखाए गए अनुसार इच्छित आकार के रूप में सेट किया जाना है - background-image: radial-gradient(ellipse,rgb(217, 255, 0

  1. CSS का उपयोग करके लोकेशन कलर स्टॉप सेट करना

    रंग स्टॉप पर स्थान को प्रतिशत या पूर्ण लंबाई के रूप में सेट किया जा सकता है। उदाहरण के लिए, रैखिक ढाल के लिए background-image: linear-gradient(    rgb(61, 255, 2) 40%,    rgb(0, 174, 255) 80%,    rgb(255, 29, 29) 20% ); CSS का उपयोग करके रेखीय ग्रेडिएंट में स्थान का रं