Variables & Custom Properties (CSS)Free web Tutorials #35
Variables & Custom Properties (CSS)
इस ट्यूटोरियल में, हम CSS में उपयोग किए जाने वाले वेरिएबल्स और कस्टम प्रॉपर्टीज के बारे में जानेंगे। हम tut35.html के रूप में एक नई फ़ाइल बनाकर शुरू करेंगे और मूल टेम्पलेट प्राप्त करने के लिए एक त्वरित बॉयलरप्लेट जोड़ेंगे। <शीर्षक> टैग में शीर्षक को CSS चर और कस्टम गुणों के रूप में दें।
अब भ्रमित न हों और इन चरों की अन्य प्रोग्रामिंग भाषाओं के साथ तुलना करना शुरू करें। CSS में वेरिएबल प्रोग्रामिंग लैंग्वेज से भिन्न होते हैं। HTML भाग के लिए, हम डिव के अंदर एक कंटेनर और तीन बॉक्स इस प्रकार बनाएंगे-
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
आइए बॉक्स को इस प्रकार स्टाइल करें-
.box{
width: 200px;
height: 200px;
background-color: blue;
border: 2px solid red;
margin: 2px 9px;
}
उपरोक्त कोड का परिणाम इस प्रकार होगा-
अब हम चरों की अवधारणा को समझेंगे। मान लीजिए, हम पृष्ठभूमि रंग के लिए एक चर बनाना चाहते हैं। हम इसे '--' चिन्ह से बना सकते हैं। CSS में वेरिएबल हमें विभिन्न तत्वों को समान गुण प्रदान करने में मदद करते हैं। आइए नीचे दिए गए कोड से इसका विश्लेषण करें-
.box{
--box-color: violet;
width:200px;
height: 200px;
background-color: var(--box-color);
border: 2px solid var(--box-color);
box-shadow: 3px 3px var(--box-color);
margin: 2px 9px;
}
यहां, हम तीन तत्वों यानी बैकग्राउंड कलर, बॉर्डर और बॉक्स-शैडो के लिए वेरिएबल प्रॉपर्टीज का इस्तेमाल कर रहे हैं। बदलाव इस प्रकार होगा-
इन चरों के बारे में याद रखने वाली महत्वपूर्ण बात यह है कि इसका उपयोग इसके दायरे में ही किया जा सकता है। इसे काम करने के लिए, हम इसे फिर से लिख सकते हैं या --root गुण का उपयोग कर सकते हैं। इसे स्पष्ट रूप से समझने के लिए, हम प्रोग्रामिंग भाषा के संदर्भ में एक वैश्विक चर बना सकते हैं। आइए नीचे दिए गए कोड को समझते हैं-
:root{
--primary-color: blue;
--danger-color: red;
--maxw: 333px;
}
रूट वेरिएबल में लिखे गए किसी भी कस्टम गुण को कोड में कहीं भी एक्सेस किया जा सकता है। ज्यादातर मामलों में, हम प्राथमिक रंग और खतरे के रंग का उपयोग करते हैं जैसा कि ऊपर दिए गए उदाहरण में दिखाया गया है। हमें बॉक्स वर्ग में प्राथमिक रंग और खतरे के रंग के साथ बैंगनी रंग को निम्नानुसार संशोधित करना है-
.box{
width:200px;
height: 200px;
background-color: var(--primary-color);
border: 2px solid var(--danger-color);
box-shadow: 3px 3px var(--box-color);
margin: 2px 9px;
}
अब हम कंटेनर को संशोधित करते हैं और कुछ अतिरिक्त गुणों के साथ रूट से उसमें maxw गुण जोड़ते हैं। कोड इस प्रकार है-
.container{
max-width: var(--maxw);
margin: auto;
background-color: var(--danger-color);
display: flex;
align-items: center;
justify-content: center;
/* background-color: var(--box-color); */
}
कंटेनर इस प्रकार दिखेगा-
इसलिए, मेरा मानना है कि आप सीएसएस में चर और कस्टम गुणों की अवधारणाओं को समझ गए होंगे और हमारे प्रयासों को कम करने के लिए उनका उपयोग कैसे किया जा सकता है। अधिक दिलचस्प आगामी ट्यूटोरियल के लिए, कृपया देखते रहें और अभ्यास करते रहें।
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Variables/Custom Properties</title>
<style>
:root{
--primary-color: blue;
--danger-color: red;
--maxw: 333px;
}
.box{
width:200px;
height: 200px;
background-color: var(--primary-color);
border: 2px solid var(--danger-color);
box-shadow: 3px 3px var(--box-color);
margin: 2px 9px;
}
.container{
max-width: var(--maxw);
margin: auto;
background-color: var(--danger-color);
display: flex;
align-items: center;
justify-content: center;
/* background-color: var(--box-color); */
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
 Free web Tutorials #35){kind=link}