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

CSS का उपयोग करके हाइपरलिंक में विभिन्न शैलियों को जोड़ें

<घंटा/>

हाइपरलिंक के लिए विभिन्न शैलियों को सेट करने के लिए, जैसे कि फ़ॉन्ट-आकार, पृष्ठभूमि का रंग, आदि, आप निम्न कोड को चलाने का प्रयास कर सकते हैं:

उदाहरण

<!DOCTYPE html>
<html>
   <head>
      <style>
         a.first:link {color:#ff0000;}
         a.first:visited {color:#0000ff;}
         a.first:hover {color:#ffcc00;}
         a.second:link {color:#ff0000;}
         a.second:visited {color:#0000ff;}
         a.second:hover {font-size:150%;}
         a.third:link {color:#ff0000;}
         a.third:visited {color:#0000ff;}
         a.third:hover {background:#66ff66;}
      </style>
   </head>
   <body>
      <p>Mouse over the below given links:</p>
      <p><b><a class = "first" href = "demo1.html" target = "_blank">Link changes color</a></b></p>
      <p><b><a class = "second" href = "demo2.html" target = "_blank">Link changes font-size</a></b></p>
      <p><b><a class = "third" href = "demo3.html" target = "_blank">Link changes background-color</a></b></p>
   </body>
</html>

  1. आरजीबीए का उपयोग कर सीएसएस पारदर्शिता

    CSS पारदर्शिता के लिए RGBA () मानों का उपयोग करें। रंग की अस्पष्टता निर्दिष्ट करने के लिए अल्फा चैनल पैरामीटर सेट करें। RGBA का उपयोग करके CSS पारदर्शिता को लागू करने के लिए कोड निम्नलिखित है - उदाहरण <!DOCTYPE html> <html> <head> <style> body {    font-family: &qu

  1. सीएसएस का उपयोग करना:प्लेसहोल्डर-खाली टेक्स्ट इनपुट के लिए शैलियों को अनुकूलित करने के लिए दिखाया गया है

    प्लेसहोल्डर वाले इनपुट टेक्स्टबॉक्स की शैली को अनुकूलित करने के लिए, हम सीएसएस के :प्लेसहोल्डर-दिखाए गए छद्म वर्ग का उपयोग करते हैं। उदाहरण निम्नलिखित उदाहरण CSS का वर्णन करते हैं:प्लेसहोल्डर द्वारा दिखाया गया छद्म वर्ग। इनपुट:प्लेसहोल्डर-दिखाया गया {बॉर्डर-रंग:डोजरब्लू;} इनपुट:nth-of-type (ईवन

  1. CSS में Data-Attributes (data-*) का उपयोग करना

    हम data-* विशेषता का उपयोग करके तत्वों के बारे में अतिरिक्त जानकारी संग्रहीत कर सकते हैं। निम्नलिखित उदाहरण CSS डेटा-* विशेषता को दर्शाते हैं। उदाहरण <!DOCTYPE html> <html> <head> <style> dl {    margin: 2%; } p {    width: 60%;    background-col