CSS लिंक
लिंक वह रास्ता हैं जिससे लोग आपके पेजों पर घूमते हैं। CSS में आप a तत्व और उसके स्टेट स्टाइल करते हैं — unvisited, visited, hover और active — ताकि लिंक क्लिक-योग्य दिखे, इंटरैक्शन पर बदले, और पठनीय रहे।
एक नज़र में लिंक स्टेट
📊 लिंक स्टेट टूलकिट
| स्टेट | कब लागू होता है |
|---|---|
a / a:link |
डिफ़ॉल्ट / unvisited लिंक |
a:visited |
वह लिंक जो विज़िटर पहले खोल चुका |
a:hover |
पॉइंटर लिंक पर है |
a:active |
लिंक दबाया जा रहा है (mousedown) |
text-decoration |
अंडरलाइन चालू/बंद — आम लिंक नियंत्रण |
ब्राउज़र अक्सर LVHA नामक उपयोगी क्रम याद रखते हैं: :link, :visited, :hover, :active। इसी क्रम में नियम लिखने से बाद के स्टेट अनजम्बूझकर ओवरराइड कम होते हैं।
बेस लिंक स्टाइल करें
रंग और अंडरलाइन से शुरू करें। कई आधुनिक डिज़ाइन डिफ़ॉल्ट अंडरलाइन हटाते हैं, फिर hover पर वापस लाते हैं।
बेस लिंक स्टाइल
cssa {
color: #0b5fff;
text-decoration: none;
}विज़िटेड लिंक
:visited रंग थोड़ा बदल सकता है ताकि लौटने वाले विज़िटर परिचित रास्ते पहचानें। बदलाव हल्का रखें — प्राइवेसी सीमित करती है visited पर क्या स्टाइल हो सकता है।
Visited टोन
cssa:visited {
color: #5b4b8a;
}Hover फीडबैक
:hover आपका सबसे साफ़ रोज़ संकेत है। रंग बदलना, अंडरलाइन, या दोनों कहता है “यह इंटरैक्टिव है” बिना चिल्लाए।
Hover अंडरलाइन
cssa:hover {
color: #0842b8;
text-decoration: underline;
}active — दबाने का क्षण
:active तब लगता है जब लिंक दबाया जा रहा हो। थोड़ा गहरा रंग छोटा “क्लिक” एहसास देता है।
Active प्रेस
cssa:active {
color: #062e80;
}शांत नेव-लिंक आदत
LVHA स्टेट समूहबद्ध करें, hover साफ़ रखें, और सिर्फ सपाट दिखने के लिए फोकस आउटलाइन मत मिटाएँ। कीबोर्ड उपयोगकर्ताओं को दिखने वाला फोकस संकेत चाहिए।
शांत नेव लिंक
cssnav a:link,
nav a:visited {
color: #1a1a1a;
text-decoration: none;
}
nav a:hover,
nav a:active {
color: #0b5fff;
text-decoration: underline;
}
nav a:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 2px;
}खुद आज़माएँ
- बेस
aरंग औरtext-decoration: noneसेट करें। - थोड़े अलग रंग वाला
a:visitedजोड़ें। a:hoverपर अंडरलाइन और गहरा रंग।a:activeपर और थोड़ा गहरा।- LVHA क्रम में
nav aस्टाइल करें और:focus-visibleआउटलाइन रखें।
आम गलतियाँ
:hoverको:link/:visitedसे पहले लिखना ताकि कुछ स्टेट हार जाएँ- अंडरलाइन और हर अन्य संकेत हटाना कि यह लिंक है
- पैराग्राफ़ के हर शब्द पर नीयन hover
- बिना फोकस स्टाइल बदले लिंक पर
outline: none - इस पाठ को text-shadow / एलिप्सिस से मिलाना (पिछला सत्र)
सारांश
- लिंक को
aऔर:link,:visited,:hover,:activeसे स्टाइल करें - LVHA क्रम कैस्केड को अपेक्षित व्यवहार देने में मदद करता है
- रंग +
text-decorationरोज़ के नियंत्रण हैं - Hover साफ़ हो; visited बदलाव हल्का रहे
- कीबोर्ड नेविगेशन के लिए दिखने वाला फोकस स्टाइल रखें
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी