प्रश्नोत्तरी: क्या आप CSS मूल बातें जानते हैं? (2025)
क्या आप फ्रंट‑एंड में पर्याप्त हैं?
क्विज़: क्या आप CSS जानते हैं?
- आधुनिक CSS? 🤔
- क्या CSS आपके रिज़्यूमे में होना चाहिए??? 🚀
- बहुविकल्पीय प्रश्न। 🤖 … कितना कठिन हो सकता है, है ना?
एक अमान्य ❌ font-size चुनें:
10cx गलत है क्योंकि cx कोई वास्तविक CSS इकाई नहीं है। (कम से कम लेखन के समय तक.)
लोकप्रिय इकाइयों में परिचित px, rem, em शामिल हैं।
नई इकाइयाँ गतिशील, उत्तरदायी लेआउट के लिए उपयोगी हैं।
ch-0अक्षर की चौड़ाईvmin- viewport न्यूनतमvmax- viewport अधिकतमvh- viewport ऊँचाईvw- viewport चौड़ाई
कुछ इकाइयाँ हमेशा से मौजूद हैं लेकिन कम उपयोग होती हैं, जैसे सेंटीमीटर के लिए cm, mm, इंच के लिए in, पॉइंट्स के लिए pt
क्या आप एक वैध 👍 हेक्स कोड ढूंढ सकते हैं?
Hex codes को CSS में रंग दर्शाने के लिये इस्तेमाल किया जा सकता है। इन्हें # से शुरू किया जाता है और इनमें 3, 4, 6, या 8 हेक्साडेसिमल अंक होने चाहिए।
3‑अक्षर वाला हेक्स कोड 6‑अक्षर कोड का शॉर्टहैंड है, जहाँ प्रत्येक अक्षर दोहराया जाता है। 4‑अक्षर वाला कोड अल्फा चैनल (पारदर्शिता) शामिल करता है।
उदाहरण के लिये #ABC वही है जो #AABBCC और #ABCD वही है जो #AABBCCDD। हेक्स मानों को संभालने के बारे में अधिक जानने के लिये, मेरे जावास्क्रिप्ट नंबर क्विज़. को देखें।
इनमें से कौन सी इकाई NOT एक वैध ❌ CSS इकाई है?
ch, vmin, vmax, vh, vw जैसी नई इकाइयाँ डायनेमिक/रिस्पॉन्सिव लेआउट के लिए काफी उपयोगी हैं।
निम्नलिखित HTML से कौन‑सा सेलेक्टर सबसे अच्छा मेल खाता है?
<a id="home" name="home" href="/home">Home</a>सही उत्तर है a#home[name='home'], जो id और name दोनों एट्रिब्यूट्स से मेल खाता है। CSS सेलेक्टर्स केस‑सेंसिटिव होते हैं, इसलिए #Home काम नहीं करेगा, और स्पेस का मतलब चाइल्ड एलिमेंट्स होता है, जो यहाँ लागू नहीं होता।
:contains() सेलेक्टर मानक CSS सेलेक्टर नहीं है, लेकिन कुछ JS लाइब्रेरीज़ में उपलब्ध है।
निम्नलिखित HTML बटन से मेल खाने वाला सेलेक्टर कौन सा है?
<button onclick="openModal()">Contact</button>सही उत्तर button[onclick] है, जो attribute onclick की मौजूदगी को लक्षित करता है।
ध्यान दें कि :link केवल अनदेखे href लिंक को लक्षित करता है, ::click एक वैध pseudo-element नहीं है, और :focus केवल फोकस किए गए तत्व को लक्षित करता है।
इनमें से कौन सा चयनकर्ता अमान्य है?
सेलेक्टर c > > d {} अमान्य है क्योंकि चाइल्ड कॉम्बिनेटर दो > अक्षरों के बीच कोई चयनकर्ता न होने के कारण दोहराया गया है।
अन्य चयनकर्ता मान्य हैं। c {} जैसा टाइप चयनकर्ता सिंटैक्टिक रूप से वैध CSS है, भले ही c एक मानक HTML तत्व न हो।
निम्नलिखित HTML में आखिरी लिंक से मेल खाने वाला सेलेक्टर कौन सा है?
<nav> <a name="home" href="/home">Home</a> <a name="login" href="/login">Login</a> <a name="help" href="/help">Help</a></nav>सही सेलेक्टर a:last-child है, जो तब आखिरी <a> से मेल खाता है जब वह अपने पैरेंट का भी आखिरी चाइल्ड हो। nav:nth-child(3) एक <nav> एलिमेंट से मेल खाएगा जो अपने पैरेंट का तीसरा चाइल्ड हो।
कौन सा सेलेक्टर प्राथमिकता लेगा?
ID के कारण a#quote सेलेक्टर को प्राथमिकता मिलती है, क्योंकि इसका विशिष्टता टैग या क्लास-आधारित सेलेक्टर्स से अधिक होती है।
आप बॉक्स में “shit” को कैसे केंद्रित करेंगे?
ब्लॉक तत्व में टेक्स्ट को केंद्रित करने का सही तरीका text-align: center; का उपयोग करना है। align प्रॉपर्टी flexbox लेआउट के लिए उपयोग होती हैं, और margin: 0 auto; ब्लॉक तत्वों को क्षैतिज रूप से केंद्रित करने के लिए प्रयोग होता है।
align-content प्रॉपर्टी grid लेआउट के लिए उपयोग होती है, और text-content कोई वैध CSS प्रॉपर्टी नहीं है।
आधुनिक फ्लो लेआउट में ब्लॉक कंटेनर के भीतर सामग्री को लंबवत कैसे केंद्रित करें?
align-content का उपयोग करना आधुनिक तरीका है ब्लॉक कंटेनर की सामग्री को फ्लो लेआउट में लंबवत केंद्रित करने का।
align-items और justify-content प्रॉपर्टी flexbox और grid लेआउट के लिए हैं, फ्लो के लिए नहीं।
margin: 0 auto; और margin: auto; दोनों ब्लॉक एलिमेंट को क्षैतिज रूप से केंद्रित करते हैं, लेकिन लंबवत नहीं।
निम्नलिखित HTML में <a> लिंक के टेक्स्ट का पिक्सेल आकार क्या है?
<body style="font-size: 40px !important;"> <nav style="font-size: 50%;"> <a style="font-size: 25%;">HOME</a> </nav></body><a> के लिए font-size 5px निकलता है: 40px (body) * 50% (nav) = 20px, फिर 20px * 25% = 5px.
निम्न HTML में “HOME” लिंक के लिए 1.2rem का पिक्सेल आकार क्या होगा?
<html style="font-size: 10px;"> <body style="font-size: 20px;"> <a style="font-size: 1.2rem;">HOME</a> </body></html>1.2rem 12px में बदल जाता है क्योंकि rem इकाइयाँ रूट या <html> फ़ॉन्ट आकार को संदर्भित करती हैं, जो यहाँ 10px पर सेट है।
पिछले प्रश्न की तरह, नीचे दिए गए HTML में “HOME” लिंक के लिए 1.2em का पिक्सेल आकार क्या होगा?
<html style="font-size: 10px;"> <body style="font-size: 20px;"> <a style="font-size: 1.2em;">HOME</a> </body></html>1.2em 24px में बदलता है क्योंकि em इकाइयाँ विरासत में मिली फ़ॉन्ट आकार को संदर्भित करती हैं, जो यहाँ 20px पर सेट है।
कौन सा चयनकर्ता सबसे कम विशिष्टता रखता है?
:where(.card) .title सबसे कम विशिष्टता रखता है। :where() प्स्यूडो‑क्लास और उसके अंदर सब कुछ 0-0-0 योगदान देता है, इसलिए केवल .title गिना जाता है। :is(.card) .title .card की विशिष्टता रखता है, .card .title में दो क्लास हैं, और #card .title में एक ID शामिल है।