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

CSS से एक्टिव लिंक को स्टाइल करें

:active सेलेक्टर का उपयोग

:active सेलेक्टर उस लिंक (या बटन) को स्टाइल करता है जब यूजर उस पर **माउस बटन दबाए रखता है** (क्लिक के दौरान)। यह विज़ुअल फीडबैक देता है कि लिंक दबाया गया है।

उदाहरण

<!DOCTYPE html>
<html>
  <head>
    <style>
      a:active {
        background-color: green;
      }
    </style>
  </head>
  <body>
    <a href="https://qries.com">Welcome to Qries</a>
    <p>Click on the above link to see the effect.</p>
  </body>
</html>

क्रम याद रखें: :link → :visited → :hover → :active (LVHA) ताकि स्पेसिफिसिटी सही रहे।

  1. CSS के साथ लिंक्स स्टाइल करना CSS के साथ लिंक्स स्टाइल करना

    लिंक स्टेट्स और प्स्यूडो-क्लासेस CSS से लिंक्स स्टाइल करने के लिए, पहले निम्नलिखित लिंक स्टेट्स जानें: link, visited, hover, active। एंकर एलिमेंट के प्स्यूडो-क्लासेस का उपयोग करें: a:link /* अनविजिटेड लिंक */ a:visited /* विजिटेड लिंक */ a:hover /* माउस होवर पर लिंक */ a:active /* क्

  1. CSS से hr एलिमेंट स्टाइल करना CSS से hr एलिमेंट स्टाइल करना

    hr स्टाइलिंग CSS से <hr> एलिमेंट को स्टाइल करने के लिए निम्न कोड उपयोग करें: उदाहरण <!DOCTYPE html> <html> <meta name=viewport content=width=device-width, initial-scale=1> <head> <style> body{ font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif; margin: 20

  1. CSS से लेबल्स स्टाइल करना CSS से लेबल्स स्टाइल करना

    लेबल स्टाइल्स CSS से लेबल्स स्टाइल करने के लिए निम्न कोड उपयोग करें: उदाहरण <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, initial-scale=1 /> <style> body { font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif; margin: 20px; } span