Learn More

ऐट्रिब्यूट्स एंड प्रॉपर्टीज | 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/ElementsDescription /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 और प्रॉपर्टीज को डिफाइन किया जा सकताहै ऒर इसका डायरेक्ट इफ़ेक्ट हटम्ल पेज पर देखा जा सकता हैं ।

 

Recommended Posts:-