ऐट्रिब्यूट्स एंड प्रॉपर्टीज | CSS in Hindi
CSS में ऐट्रिब्यूट्स एंड प्रॉपर्टीज ही सबसे ज्यादा यूज की जाती हैं तभी आसानी से कोई भी वेब पेज को design किया जा सकते हैं । यदि आपको CSS ऐट्रिब्यूट्स एंड प्रॉपर्टीज के बारे में नहीं पता होगा तो तो वेब पेज को डिज़ाइन नहीं कर सकता हैं । CSS में attributes और properties एलिमेंट का बहुत ज्यादा महत्त्वपूर्ण स्थान हैं जिनके द्वारा किसी भी वेब पेज को किसी भी तरह से डिज़ाइन किया जा सकता हैं ।
Attribute और प्रॉपर्टीज बहुत सारी होती हैं जिनको समझना बहुत ही आसान होता हैं । प्रत्येक ऐट्रिब्यूट्स अलग अलग तरह से हटम्ल पेज पर इफ़ेक्ट डालता हैं । इन सभी attributes , प्रॉपर्टीज को अलग अलग तरह से डिफाइन किया जा सकता हैं । जिस से उस एट्रीब्यूट्स का सारा काम होता हैं या ज्यादा होता हैं । एक डेवलपर आसानी से CSS इफ़ेक्ट को attribute एंड प्रॉपर्टीज से कण्ट्रोल कर सकते हैं ।
HTML DOM पर अलग-अलग प्रभावों के लिए CSS के ऐट्रिब्यूट्स एंड प्रॉपर्टीज का उपयोग किया जाता हैं । जैसा कि आप जानते हैं कि CSS की फुल फॉर्म cascading stylesheet हैं जो एक वेबसाइट डिजाइन करने में मदद करता है। सीएसएस source में वेबसाइट डिजाइन करने के लिए विभिन्न ऐट्रिब्यूट्स शामिल हैं । अगर आपको एक div एलिमेंट डिजाइन करने की आवश्यकता है तो आप अलग-अलग कस ऐट्रिब्यूट्स का उपयोग कर सकते हैं। हर ऐट्रिब्यूट्स के अलग-अलग गुण होते हैं।
CSS को बनाना बहुत ही आसान हो जाता हैं यदि आपको CSS के सभी ऐट्रिब्यूट्स और प्रॉपर्टीज एलिमेंट्स के बारे में पता हो ।
निचे CSS ऐट्रिब्यूट्स एंड प्रॉपर्टीज की लिस्ट दी हुई हैं जिस से आप आसानी से कस ऐट्रिब्यूट्स और एलिमेंट्स को समझा पाएंगे ।
सीएसएस ऐट्रिब्यूट्स एंड प्रॉपर्टीज एलिमेंट्स लिस्ट -
| Attributes/Elements | Description /attributes or property |
|---|---|
| Class Name (.header) | Create a CSS class name(header) with .(dot)===>(.header) |
| color | Text कलर के लिए उपयोग किया जाता हैं । यदि किसी डिव या किस अन्य ब्लॉक या टेक्स्ट के टेक्स्ट कलर को सेट करना हैं तो तो तब कलर का उपयोग कर सकते हैं । |
| background-color | एक div या ब्लॉक की बैकग्राउंड कलर को सेट करना । बैकग्राउंड के कलर को सेट करने के लिए बैकग्राउंड-कलर का उपयोग किया जाता है। |
| font-size | किसी भी टेक्स्ट का आकर (साइज) बढ़ने या घटने के लिए फॉण्ट-साइज का उपयोग किया जाता हैं । |
| font-family | टेक्स्ट की फॉण्ट स्टाइल को चेंज करने के लिए फॉण्ट फॅमिली का उपयोग किया जाता हैं । फॉण्ट फॅमिली जैसे MS वर्ड में होती हैं अलग अलग फॉण्ट टाइप जैसे - Arial, Times New Roman,Calibri आदि । CSS में भी फॉण्ट स्टाइल को फॉण्ट फॅमिली का उपयोग किया जा सकता हैं । |
| margin-left |
किसी भी div element या ब्लॉक को left से राइट की ओर पोसिटिव पिक्सेल जैसे २०px ओर यदि राइट से लेफ्ट की ओर ले जाना हैं तो नेगेटिव में पिक्सेल जैसे -२०px देने पड़ते हैं । |
| margin-right |
यदि मार्जिन राइट को पॉजिटिव (10px) देते हैं तो राइट से लेफ्ट की ओर ओर यदि लेफ्ट से राइट की ओर ले जाना हैं तो नेगेटिव (-10px, -20px etc) पिक्सेल देना पड़ता हैं ।
|
| margin-bottom | पॉज़िटोव (20px) नीचे (नीचे) तक ले जाएँ और अगर नेगेटिव (-20px) हैं तो डिव या ब्लॉक को ऊपर तक ले जाये । |
| text-align | टेक्स्ट को या पैराग्राफ टेक्स्ट को मैनेज करने के लिए जैसे टेक्स्ट लेफ्ट तो राइट, टेक्स्ट राइट तो लेफ्ट या टेक्स्ट को सेण्टर में रखने के लिए टेक्स्ट align का उपयोग किया जाता हैं । |
| padding | पैडिंग डिव या ब्लॉक के आसपास की जगह को परिभाषित करता है। पैडिंग को कम या ज्यादा किया जा सकता हैं । |
| height | ऊंचाई को कम या ज्यादा करने के लिए । |
| width | चौड़ाई को कम या जयदा करने के लिए । |
| box-shadow | शैडो attribute एंड प्रॉपर्टी का उपयोग div एलिमेंट या ब्लॉक के लिए शैडो इफ़ेक्ट के लिए किया जाता है जिसके द्वारा शैडो को कम या ज्यादा किया जा सकता हैं । यह सबसे ज्यादा यूज किया जाने वाला एट्रिब्यूट होता हैं जो की बहुत इफेक्टिव भी होता हैं । |
| box-sizing: border-box; | बॉक्स के साइज को डिफाइन करने के लिए |
| caret-color: blue; | इनपुट element में कर्सर के रंग को परिभाषित करना । |
| background-image: | बैकग्राउंड इमेज को डिफाइन करना । |
| border-color: | बॉर्डर कलर को परिभाषित करने के लिए । |
| border-style : | बॉर्डर के लिए स्टाइल को डिफाइन करना |
| border-width: | बॉर्डर के width को डिफाइन करना । |
इस तरह से कस के सबसे ज्यादा यूज करने वाली ऐट्रिब्यूट्स ओर प्रॉपर्टीज होती हैं जो की हर एक CSS में जायद तर ये ही attribute और CSS का उपयोग किया जाता हैं ।
ऐट्रिब्यूट्स एंड प्रॉपर्टीज को कैसे CSS में उपयोग करते हैं ।
CSS में इस ऐट्रिब्यूट्स एंड प्रॉपर्टीज को उपयोग करना बहुत ही आसान होता हैं बस आपको समझना पड़ता हैं की किस तरह से इन ऐट्रिब्यूट्स और प्रॉपर्टीस को किस तरह से set कर सकते हैं ।
CSS attributes और properties का ब्लॉक पर एलिमेंट्स पर एक अलग प्रभाव पड़ता है। जब भी आपको अपने ब्लॉक (div block) पर प्रभाव की आवश्यकता होती है तो आपको CSS ऐट्रिब्यूट्स का उपयोग करने की आवश्यकता होती है। आपने उपरोक्त ऐट्रिब्यूट्स , प्रॉपर्टीज और उनके विवरण को देखा है। यह सीएसएस ऐट्रिब्यूट्स का उपयोग करके सीएसएस बनाने के लिए पर्याप्त हैं । CSS
उदाहरण के लिए: - CSS एट्रिब्यूट => बैकग्राउंड कलर । उपरोक्त तालिका में, आपने पढ़ा है कि किसी डिव ब्लॉक या पुरे पेज के बैकग्राउंड को कलर करने के लिए background-color को CSS में कुछ इस प्रकार यूज कर सकते हैं ।
background-color:green;
background-color:red;
या फिर कलर कोड का भी उपयोग कर सकते हैं ।
background-color:#009966;
background-color:#009966;
इस तरह से CSS में HTML कलर कोड का भी उपयोग किया जा सकता हैं ।
निचे पूरी ऐट्रिब्यूट्स एंड प्रोपर्ट्स (Attributes and properties) की टेबल दी हुई हैं जिस से आपको समझ आजायेगा की किस तरह से कस मैं ऐट्रिब्यूट्स ऒर प्रॉपर्टीज को डिफाइन किया जाता हैं ।
| Attributes/Elements | Attributes/Properties =>कैसे उपयोग करते हैं ।? |
|---|---|
| Class Name (.header) | |
| color | color:red color:blue; color: #B22222; color:colorname or color code ; |
| background-color | background-acolor:red background-color:blue; background-color: #B22222; background-color:colorname or code ; |
| font-size | font-size:20px; font-size:30px; font-size:20%; font-size:30%; font-size:value(px or %); |
| font-family | font-family:arial; font-family:Bell MT font-family:Bell MT; font-family:Calibri font-family:family name (font name) |
| margin-left | margin-left:10px; margin-left:20px; margin-left:20%; margin-left:10%; margin-left:value(px or %); |
| margin-right | margin-right:10px; margin-right:20px; margin-right:20%; margin-right:10%; margin-right:value(px or %); |
| margin-bottom | margin-bottom:10px; margin-bottom:20px; margin-bottom:20%; margin-bottom:10%; margin-bottom:value(px or %); |
| text-align | text-align:center; text-align:left; text-align:right; text-align:sub-attribute; |
| padding | padding:30px; padding:40px; padding:40%; padding:40%; padding:value(px or %) |
| height | heigh:35px; heigh:43px; heigh:36%; heigh:43%; heigh:value(px or %); |
| width | width:35px; width:43px; width:36%; width:43%; width:value(px or %); |
| box-shadow | box-shadow: 2px 8px; box-shadow: 2px 8px #FF0000; |
| box-sizing | box-sizing: border-box; |
| caret-color | caret-color: blue; caret-color: red; caret-color:#B22222; caret-color: colorname or color code ; |
| background-image | background-image:url("myimage.jpg"); background-image:url("myimage.png"); background-image:url("myimage.jpeg"); background-image:url("myimage.gif"); background-image:url("image-name.formate"); |
| border-color: | border-color:red border-color:blue; border-color:#B22222; border-color:colorname or color code ; |
| border-style : | none
border-style:solid ; border-style:dotted; border-style:dashed ; border-style:double; border-style:groove ; border-style:ridge; border-style:inset ; border-style:outset; border-style:hidden; |
| border-width: | border-width:35px; border-width:43px; border-width:36%; border-width:43%; border-width:value(px or %); |
इस तरह से CSS में attributes और प्रॉपर्टीज को डिफाइन किया जा सकताहै ऒर इसका डायरेक्ट इफ़ेक्ट हटम्ल पेज पर देखा जा सकता हैं ।