CSS ओवरले वेरिएबल
- पिछला पृष्ठ CSS वेरिएबल
- अगला पृष्ठ CSS वेरिएबल - JavaScript
स्थानीय वेरियेबल को वैश्विक वेरियेबल पर ओवरराइड करना
पिछले पृष्ठ से हमें पता चलता है कि हम वैश्विक वेरियेबल को पूरे दस्तावेज़ में उपयोग/उपलब्ध कर सकते हैं, जबकि स्थानीय वेरियेबल केवल उस चयनक में उपयोग किया जा सकता है जहाँ यह घोषित किया गया है。
अभी ऊपर वाले उदाहरण को देखिए:
उदाहरण
:root { --blue: #1e90ff; --white: #ffffff; } body { background-color: var(--blue); } h2 { border-bottom: 2px solid var(--blue); } .container { color: var(--blue); बैकग्राउंड-कलर: var(--white); पैडिंग: 15पिक्सेल; } button { बैकग्राउंड-कलर: var(--white); color: var(--blue); border: 1px solid var(--blue); पैडिंग: 5पिक्सेल; }
कभी-कभी, हम चाहते हैं कि वेरियेबल केवल पृष्ठ के विशेष हिस्से में परिवर्तित हो।
यदि हम बटन एलीमेंट को अलग रंग का अपनाना चाहते हैं, तो हम button चयनक के अंदर --blue वेरियेबल को फिर से घोषित कर सकते हैं. जब हम इस चयनक में var(--blue) का उपयोग करते हैं, तो यह यहाँ घोषित स्थानीय --blue वेरियेबल का मान उपयोग करेगा.
हमें दिखाई देता है कि स्थानीय --blue वेरियेबल button एलीमेंट के वैश्विक --blue वेरियेबल को ओवरराइड करता है:
उदाहरण
:root { --blue: #1e90ff; --white: #ffffff; } body { background-color: var(--blue); } h2 { border-bottom: 2px solid var(--blue); } .container { color: var(--blue); बैकग्राउंड-कलर: var(--white); पैडिंग: 15पिक्सेल; } button { --blue: #0000ff; बैकग्राउंड-कलर: var(--white); color: var(--blue); border: 1px solid var(--blue); पैडिंग: 5पिक्सेल; }
एक नई स्थानीय वेरियेबल जोड़ें
यदि केवल एक स्थान पर एक वेरियेबल का उपयोग करना है, तो हम इस तरह एक नई स्थानीय वेरियेबल घोषित कर सकते हैं:
उदाहरण
:root { --blue: #1e90ff; --white: #ffffff; } body { background-color: var(--blue); } h2 { border-bottom: 2px solid var(--blue); } .container { color: var(--blue); बैकग्राउंड-कलर: var(--white); पैडिंग: 15पिक्सेल; } button { --button-blue: #0000ff; बैकग्राउंड-कलर: var(--white); कलर: var(--button-blue); बॉर्डर: 1पिक्सेल सॉलिड var(--button-blue); पैडिंग: 5पिक्सेल; }
ब्राउज़र समर्थन
शेडेज़ में दिए गए नंबरों को पहली ब्राउज़र आईडी के रूप में दर्शाया गया है जो इस अट्रिब्यूट को पूरी तरह से समर्थित करता है。
फ़ंक्शन | |||||
---|---|---|---|---|---|
var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() फ़ंक्शन
फ़ंक्शन | वर्णन |
---|---|
var() | CSS वेरिएबल के मान को इंसर्ट करें。 |
- पिछला पृष्ठ CSS वेरिएबल
- अगला पृष्ठ CSS वेरिएबल - JavaScript