जावास्क्रिप्ट सीएसएस विशेषता जोड़ें

| | | | | | | | | | | | | | | | | | | | | | | | |

सीएसएस चयनकर्ता वेब डेवलपर्स को वेब पेज पर किसी विशेष तत्व या तत्वों के सेट को स्टाइल करने की अनुमति देते हैं।

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

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

HTML विशेषताएँ

HTML में, विशेषताओं का उपयोग अतिरिक्त परिभाषित करने के लिए किया जाता है किसी तत्व के गुण या गुण। उदाहरण के लिए, ऊंचाई विशेषता एक छवि की ऊंचाई को परिभाषित करती है और शीर्षक विशेषता एक वेब तत्व के शीर्षक को परिभाषित करती है।

नाम / मूल्य जोड़ी संरचना का उपयोग करके विशेषताओं की घोषणा करें। इसका मतलब है कि इस तरह की एक विशेषता HTML फ़ाइल में दिखाई देगी: name = "value"। HTML विशेषताओं के बारे में अधिक जानने के लिए, HTML विशेषताओं के लिए हमारी मार्गदर्शिका पढ़ें।

CSS विशेषता चयनकर्ता

साइट डिज़ाइन करते समय, आप तत्वों को उनके विशेषता मान के आधार पर स्टाइल करना चाहते हैं या नहीं। ऐसा करने के लिए, आप CSS विशेषता चयनकर्ता का उपयोग करते हैं।

विशेषता चयनकर्ता का उपयोग करते समय निम्नलिखित दो चरणों का पालन करना चाहिए: s वर्गाकार कोष्ठकों में।

  • उन शैलियों को निर्दिष्ट करें जिन्हें आप इस नाम के साथ विशेषताओं पर लागू करना चाहते हैं।
  • आइए कार्रवाई में CSS विशेषता चयनकर्ता के कुछ उदाहरण देखें।

    CSS [विशेषता]

    चयनकर्ता विशेषता का सबसे बुनियादी रूप है: [attribute]। दूसरे शब्दों में, वर्ग कोष्ठक में एक विशेषता का नाम संलग्न करें।

    मान लीजिए कि हम शीर्षक विशेषता के साथ प्रत्येक तत्व का फ़ॉन्ट आकार 16px पर सेट करना चाहते हैं। हम इसे इस कोड का उपयोग करके कर सकते हैं:

    हमारा CSS नियम कोड केवल शीर्षक विशेषता वाले तत्वों पर लागू होता है। निर्दिष्ट शीर्षक विशेषता वाले किसी भी तत्व का फ़ॉन्ट आकार, विशेषता द्वारा संग्रहीत मान की परवाह किए बिना, ऊपर दिए गए नियम के अनुसार 16px में बदल जाएगा।

    आप अपना बना सकते हैं निम्नलिखित में से एक या दोनों को निर्दिष्ट करके अधिक सटीक विशेषता चयनकर्ता:

    उदाहरण के लिए, मान लें कि आप पैराग्राफ में सभी टेक्स्ट का आकार सेट करना चाहते हैं हेडर से 16px. आप इस कोड का उपयोग करके ऐसा कर सकते हैं:

    चयनकर्ता विशेषता की शुरुआत में अक्षर p ब्राउज़र को केवल

    टैग पर फ़ॉन्ट शैली लागू करने के लिए कहता है . चयनकर्ता का [शीर्षक] भाग ब्राउज़र को केवल

    एक निर्दिष्ट शीर्षक विशेषता वाले टैग पर पोल आइस की शैली लागू करने के लिए कहता है।

    T तो इस कोड को पढ़ने के बाद, ब्राउजर सभी पैराग्राफ टाइटल्स (p) के फॉन्ट साइज को 16px में बदल देगा। यह कोड पेज पर किसी भी अन्य टेक्स्ट को प्रभावित नहीं करेगा। एट्रीब्यूट जिसका मान ‚Äã‚Äãचयनकर्ता में निर्दिष्ट मान के बराबर है। इस शैली को a तत्व की पृष्ठभूमि का रंग नारंगी पर सेट करना चाहिए। हम निम्नलिखित सीएसएस कोड का उपयोग करके यह क्रिया कर सकते हैं:

    यह नियम आपके वेब पेज पर उन सभी तत्वों का चयन करता है जिनकी href विशेषता python.engineering के बराबर है। फिर इन सभी तत्वों की पृष्ठभूमि का रंग नारंगी पर सेट करें। ; value "] आपको विशेषता मान वाले तत्वों का चयन करने की अनुमति देता है जिसमें एक विशिष्ट शब्द होता है।

    उदाहरण के लिए, मान लीजिए कि आप सभी p पर एक शैली लागू करना चाहते हैं ऐसे तत्व जिनके शीर्षक नीला शब्द से मेल खाते हैं। इस शैली के लिए, इन तत्वों के टेक्स्ट का रंग नीला होना चाहिए।

    हम इसका उपयोग कर सकते हैं ऐसा करने के लिए निम्नलिखित नियम:

    यह नियम "नीला" शब्द वाले शीर्षकों से जुड़े

    सभी टैग ढूंढेगा और इन टैग

    नीला में टेक्स्ट के रंग को परिभाषित करेगा। तो, यदि किसी

    टैग का शीर्षक नीला रंग या रंग नीला है, तो यह शैली लागू होगी। हालांकि, यह नियम नहीं एक

    टैग पर लागू होता है जिसका शीर्षक blueColor होता है क्योंकि b lue शब्द विशेषता में स्वतंत्र रूप से मौजूद नहीं होता है।

    यह इससे अलग है * = चयनकर्ता, जो न केवल एक विशेषता में एक विशिष्ट शब्द ढूंढ सकता है, बल्कि एक विशेषता में एक विशिष्ट मान भी ढूंढ सकता है।

    CSS [विशेषता | = "मान"]

    <कोड>[विशेषता | = "मान"] चयनकर्ता आपको उन तत्वों का चयन करने की अनुमति देता है जिनकी विशेषताएं एक निश्चित मान से शुरू होती हैं (उदाहरण के लिए, "शीर्ष")। इसमें निर्दिष्ट मान से शुरू होने वाली विशेषताओं वाले तत्व शामिल हैं और इसमें एक हाइफ़न है जिसके बाद अतिरिक्त टेक्स्ट (उदाहरण के लिए, "शीर्ष-शैली" और अन्य "शीर्ष-" मान) ध्यान दें कि कोड को "शब्द" के बाद एक लंबवत बार (|) की आवश्यकता होती है। Class.‚"

    उदाहरण के लिए, मान लीजिए कि आप प्रत्येक को शीर्ष, जिनमें वे भी शामिल हैं जिनके बाद अन्य मान हाइफ़न द्वारा अलग किए गए हैं। आप इसे इस कोड का उपयोग करके कर सकते हैं:

    यह नियम प्रत्येक के शीर्ष पर 10px पैडिंग लागू करेगा। div> तत्व जिसका वर्ग नाम top से शुरू होता है, जिसमें ऐसे तत्व शामिल हैं जिनका वर्ग नाम top- से शुरू होता है।

    यह नोट करना महत्वपूर्ण है कि निर्दिष्ट मान एक संपूर्ण शब्द या एक शब्द के बाद एक हाइफ़न होना चाहिए। दूसरे शब्दों में, ऊपर दी गई हमारी शैली तत्व पर नहीं नाम शीर्ष शैली.

    CSS [विशेषता ^ = "मान‚"]

    [विशेषता ^ = & ldquo चयनकर्ता; value ‚"] का उपयोग उन तत्वों का चयन करने के लिए किया जाता है जिनकी विशेषता मान एक विशिष्ट मान से शुरू होता है। निर्दिष्ट मान के लिए [attribute | = "value"] जिसके बारे में हमने पहले बात की थी। हम इसे इस कोड का उपयोग करके कर सकते हैं:

    उपयोगकर्ता का वेब ब्राउज़र हमारे द्वारा परिभाषित सभी

    CSS [विशेषता $ = "value‚"]

    L `ऑपरेटर $ = का उपयोग उन सभी तत्वों को चुनने के लिए किया जाता है जिनके विशेषता मान एक निश्चित मान के साथ समाप्त होते हैं। उदाहरण के लिए, मान लें कि आप सभी हाइपरटेक्स्ट टेक्स्ट के टेक्स्ट रंग को ग्रे में बदलना चाहते हैं, जिसका href विशेषता मान .app के साथ समाप्त होता है। आप इस कोड का उपयोग करके ऐसा कर सकते हैं:

    यह चयनकर्ता आपके वेब पेज के उन सभी तत्वों पर लागू होगा जिनके href मान .app के साथ समाप्त होते हैं।

    CSS [विशेषता * = "मान"]

    संचालक * = आपको उन सभी तत्वों का चयन करने की अनुमति देता है जिनके मान ‚Äã‚Äãd `विशेषता में एक विशेष मूल्य। ~ = ऑपरेटर के विपरीत, यह विशेषता चयनकर्ता केवल एक शब्द नहीं, बल्कि एक वर्ग में एक विशेष मान ढूंढ सकता है।

    Fo उदाहरण के लिए, मान लीजिए कि हम आवेदन करना चाहते हैं सभी

    यह नियम allPadding शब्द वाले वर्ग विशेषताओं वाले सभी HTML तत्वों के चारों ओर एक 50px पैडिंग परिभाषित करेगा। इस प्रकार, वर्ग नाम वाले तत्व <कोड>नया ऑलपैडिंग, <कोड>चारों ओर सभी पैडिंग लाल, <कोड>ऑलपैडिंगब्लू और <कोड>ऑलपैडिंग-ट्रू सभी होंगे इस शैली के अधीन।

    निष्कर्ष

    सीएसएस विशेषता चयनकर्ता डेवलपर्स को विशेषता मानों के आधार पर तत्वों का चयन करने और उन तत्वों के लिए विशिष्ट शैलियों को लागू करने की अनुमति देता है।

    p>

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


    CSS वेब विकास में उपयोग किए जाने वाले तीन मुख्य कौशलों में से एक है। ऐप डाउनलोड करें
    मुफ्त Python.Engineering आज बोलने के लिए एक अनुभवी करियर कोच के साथ जो आपको वेब डेवलपर के रूप में करियर बनाने के लिए आवश्यक कौशल पर सलाह देने में मदद कर सकता है।