सब कुछ आप सीएसएस चयनकर्ताओं के बारे में पता करने की आवश्यकता है



यह लेख CSS चयनकर्ताओं के रूप में जाना जाने वाला एक दिलचस्प और एक महत्वपूर्ण विषय सामने लाता है और एक सहायक व्यावहारिक प्रदर्शन के साथ इसका अनुसरण करता है।

यह लेख एक दिलचस्प और एक महत्वपूर्ण विषय के रूप में सामने लाता है चयनकर्ता और एक सहायक व्यावहारिक प्रदर्शन के साथ इसका अनुसरण करते हैं। इस लेख में निम्नलिखित बिंदुओं को शामिल किया जाएगा,

तो चलिए हम शुरू करते हैं,





स्टाइलिंग HTML एलिमेंट्स

आइए सीएसएस चयनकर्ताओं के पास जाने से पहले सीएसएस को समझें। यदि HTML को कंकाल माना जाए, तो CSS (कैस्केडिंग स्टाइल शीट्स) मांसपेशियों और त्वचा की तरह है। मस्तिष्क जावास्क्रिप्ट है। तो, एक वेब पेज के लिए, सीएसएस शैलियों अनिवार्य रूप से लेआउट और डिजाइन हैं। फ़ॉन्ट आकार और पृष्ठभूमि रंग के लिए छवियों और पाठ की स्थिति से, सीएसएस नियंत्रित करता है कि ब्राउज़र में HTML तत्व कैसे दिखते हैं।

आप CSS को बेहतर तरीके से समझ सकते हैं, यदि आपके पास CSS चयनकर्ता क्या हैं, इस पर अच्छी पकड़ है। ये चयनकर्ता आपको विशिष्ट HTML तत्वों को लक्षित करने देते हैं ताकि आप उनके लिए सही शैली लागू कर सकें।



नमूना - सीएसएस चयनकर्ता - एडुर्काआइए हम समझते हैं कि हम HTML तत्वों का चयन कैसे कर सकते हैं,

तत्वों का चयन कैसे करें?

कहते हैं, आप चाहते हैं कि किसी वेब पेज के बाकी कंटेंट से अलग एक हेडिंग हो। अब, CSS चयनकर्ताओं का उपयोग करके आप उस HTML तत्व को अलग-अलग शैली में लक्षित कर सकते हैं। CSS चयनकर्ता उन तत्वों को परिभाषित करने में मदद करते हैं जिनके लिए CSS नियमों का एक निश्चित सेट लागू होता है। विभिन्न प्रकार के CSS चयनकर्ता हैं जो आपको उन तत्वों को चुनने की अनुमति देते हैं जिन्हें आप स्टाइल करना चाहते हैं। आप पूरे वेब पेज को एक सामान्य स्टाइल दे सकते हैं, और फिर पेज के अन्य तत्वों को स्टाइल करने के लिए अपना काम कर सकते हैं।

चयनकर्ता एक सीएसएस नियम का एक हिस्सा हैं, और ये चयनकर्ता सीएसएस ब्लॉकों की घोषणा से ठीक पहले आते हैं। एक बेहतर समझ के लिए, आप नीचे दी गई छवि को देख सकते हैं।



CSS चयनकर्ता लेख के साथ आगे बढ़ना

CSS चयनकर्ता

यह चयनकर्ता आपको इसके नाम से एक HTML तत्व चुनने देता है।

नीचे दिए गए कोड पर विचार करें:

पी {पाठ-संरेखण: केंद्र रंग: मैजेंटा}

यह शैली हर पैराग्राफ पर लागू होगी।

परिच्छेद 1

अनुच्छेद २

यह कोड आपको निम्न आउटपुट देगा:

यह शैली हर पैराग्राफ पर लागू होगी

परिच्छेद 1

अनुच्छेद २

उपरोक्त कोड में, HTML तत्वों को केंद्र-संरेखित किया गया है और उनका रंग 'मेजेंटा' है।

CSS चयनकर्ता लेख के साथ आगे बढ़ना

सीएसएस आईडी चयनकर्ता

एक HTML तत्व की आईडी विशेषता का चयन करके, आप उस विशिष्ट तत्व का चयन कर सकते हैं। चूंकि आईडी पृष्ठ के लिए अद्वितीय है, इसलिए आप आईडी विशेषता का उपयोग करके सही तत्व का चयन कर सकते हैं।

आप उस तत्व की आईडी के बाद '#' का उपयोग करके HTML तत्व का चयन कर सकते हैं। उदाहरण के लिए, '#firstname' उस तत्व का चयन करता है जहाँ आईडी 'पहला नाम' है।

निम्नलिखित कोड पर विचार करें:

# para1 {पाठ-संरेखण: केंद्र रंग: नारंगी}

नमस्ते दुनिया

यह अनुच्छेद प्रभावित नहीं होगा।

उपरोक्त कोड के लिए आउटपुट है:

नमस्ते दुनिया

जावा ट्यूटोरियल में डेटा संरचना और एल्गोरिदम

यह अनुच्छेद प्रभावित नहीं होगा।

जैसा कि आप उपरोक्त आउटपुट में देख सकते हैं, id = ”para1 the को शामिल करके, हम उस तत्व के रंग को नारंगी में बदलने में सक्षम थे। अन्य तत्व जिसमें यह नहीं है अप्रभावित रहता है।

CSS चयनकर्ता लेख के साथ आगे बढ़ना

CSS क्लास चयनकर्ता

वर्ग चयनकर्ता का उपयोग करके, आप उन HTML तत्वों का चयन कर सकते हैं जिनमें एक विशिष्ट वर्ग विशेषता है। आप वर्ग नाम के बाद की अवधि (पूर्ण-स्टॉप प्रतीक) का उपयोग करके चयनकर्ता को परिभाषित कर सकते हैं। उदाहरण के लिए, .intro उन तत्वों का चयन करता है जहाँ कक्षा 'परिचय' है। एक बात का ध्यान रखें कि आप कभी भी एक नंबर से क्लास का नाम शुरू नहीं कर सकते हैं।

निम्नलिखित कोड पर विचार करें:

.केंटर {पाठ-संरेखण: केंद्र रंग: गुलाबी}

यह शीर्ष गुलाबी और केंद्र-संरेखित है।

यह अनुच्छेद गुलाबी और केंद्र-संरेखित है।



उपरोक्त कोड का आउटपुट है:

जावा वर्गपथ कैसे सेट करें

यह शीर्ष गुलाबी और केंद्र-संरेखित है।



यह अनुच्छेद गुलाबी और केंद्र-संरेखित है।

आप एक विशिष्ट तत्व के लिए CSS वर्ग चयनकर्ताओं का उपयोग कर सकते हैं। यदि आप केवल एक विशिष्ट तत्व को स्टाइल करना चाहते हैं, तो आप क्लास चयनकर्ता के साथ तत्व नाम का उपयोग कर सकते हैं।



उदाहरण के लिए, निम्नलिखित कोड पर विचार करें:

p। केंद्र {पाठ-संरेखण: केंद्र रंग: गुलाबी}

यह शीर्षक प्रभावित नहीं है

यह अनुच्छेद गुलाबी और केंद्र-संरेखित है।



उपरोक्त कोड का आउटपुट है:



यह शीर्षक प्रभावित नहीं है



यह अनुच्छेद गुलाबी और केंद्र-संरेखित है।

जैसा कि आप आउटपुट में देख सकते हैं, हेडिंग एच 2 स्टाइल से प्रभावित नहीं है। चूंकि हमने 'p.center' निर्दिष्ट किया है, केवल पैराग्राफ शैली से प्रभावित होता है।



इस CSS चयनकर्ता लेख के साथ आगे बढ़ते हुए,

सीएसएस यूनिवर्सल चयनकर्ता

इस प्रकार के चयनकर्ता को वाइल्डकार्ड वर्ण माना जा सकता है जो पृष्ठ के सभी तत्वों का चयन करता है। यह पृष्ठ पर सभी तत्वों का चयन करता है, और यह '*' द्वारा निर्दिष्ट किया जाता है।

उदाहरण के लिए, नीचे दिए गए कोड पर विचार करें:

{{रंग: डार्कग्रीन फ़ॉन्ट-आकार: 30px}

यह एक परीक्षण है (छोटे फ़ॉन्ट)

यह एक पैराग्राफ है।

उपरोक्त कोड के लिए आउटपुट है:

नमस्ते दुनिया

यह एक परीक्षण है (छोटे फ़ॉन्ट)

यह एक पैराग्राफ है।

जैसा कि आप आउटपुट में देख सकते हैं, समूह चयनकर्ता का उपयोग करके परिभाषित किए गए सभी तत्वों की एक ही शैली परिभाषा है - वे केंद्र-संरेखित हैं और फ़ॉन्ट रंग सियान है।

यह हमें इस लेख के अंत में लाता है।

हमारी जाँच करें जो प्रशिक्षक के नेतृत्व वाले लाइव प्रशिक्षण और वास्तविक जीवन की परियोजना के अनुभव के साथ आता है। यह प्रशिक्षण आपको बैक-एंड और फ्रंट-एंड वेब तकनीकों के साथ काम करने के लिए कौशल में कुशल बनाता है। इसमें वेब डेवलपमेंट, jQuery, Angular, NodeJS, ExpressJS और MongoDB पर प्रशिक्षण शामिल है।

क्या आप हमसे कोई प्रश्न पूछना चाहते हैं? कृपया लेख के टिप्पणी अनुभाग में इसका उल्लेख करें और हम आपके पास वापस आ जाएंगे।