CSS Academy · पाठ

Inheritance और all Property

CSS inheritance rule समझिए और inherited style को reset करने के लिए all property का उपयोग कीजिए।

पाठ 4, कुल 4 में से13 चरण

Inheritance और all Property, CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

विरासत क्या है

कुछ CSS गुण अपने गणना किए गए मान को स्वचालित रूप से बाल तत्वों तक पहुँचा देते हैं। इसे विरासत कहते हैं। इससे किसी घटक के प्रत्येक तत्व के लिए एक ही नियम लिखने की आवश्यकता कम हो जाती है।

विरासत में मिलने वाले गुण

आमतौर पर विरासत में मिलने वाले गुण: टाइपोग्राफ़ी और पाठ संबंधी गुण:

font-family, font-size, font-weight, font-style
color
line-height
letter-spacing
text-align
visibility
CSS कस्टम गुण

विरासत में न मिलने वाले गुण

आमतौर पर NOT विरासत में मिलने वाले गुण: बॉक्स मॉडल और लेआउट संबंधी गुण:

margin, padding, border
width, height
background
display, position
box-shadow, transform

inherit कीवर्ड

inherit कीवर्ड से विरासत को स्पष्ट रूप से लागू करें — यह उन फ़ॉर्म तत्वों के लिए उपयोगी है जो डिफ़ॉल्ट रूप से फ़ॉन्ट की विरासत नहीं लेते:

<div style="font-family: Georgia, serif; font-size: 20px; color: darkred;">
  <input type="text" placeholder="Inherits font/color" />
  <button>Button inherits too</button>
  <textarea>Inherits</textarea>
  <select><option>Option A</option></select>
</div>

initial कीवर्ड

initial कीवर्ड किसी गुण को CSS विनिर्देश में परिभाषित उसके ब्राउज़र के प्रारंभिक डिफ़ॉल्ट मान पर रीसेट करता है — विरासत और उपयोगकर्ता-एजेंट शैलियों को अनदेखा करते हुए।

<div style="font-size: 30px; color: tomato;">
  <p>Normal text inherits large tomato-colored style from its parent.</p>
  <p class="reset-text">This text resets to browser defaults (initial) — medium size, black color.</p>
</div>

unset कीवर्ड

unset संदर्भ पर निर्भर करता है:

विरासत में मिलने वाले गुणों के लिए: inherit की तरह व्यवहार करता है
विरासत में न मिलने वाले गुणों के लिए: initial की तरह व्यवहार करता है

यह प्रभावी रूप से किसी गुण को उसकी स्वाभाविक स्थिति में "साफ़" कर देता है।

<div style="color: tomato;">
  <p style="margin: 40px;">Normal paragraph — keeps its large margin, inherits tomato color.</p>
  <p class="clear-styles" style="margin: 40px;">Unset paragraph — color unset (still inherits tomato), margin unset (resets to 0).</p>
</div>

revert कीवर्ड

revert ब्राउज़र की उपयोगकर्ता-एजेंट स्टाइलशीट के मान पर लौटता है — लेखक की किसी भी शैली के बिना ब्राउज़र डिफ़ॉल्ट रूप से जो दिखाता, उसे पुनर्स्थापित करता है। यह एम्बेड किए गए तृतीय-पक्ष विजेट के लिए उपयोगी है।

<div style="color: tomato; font-family: Georgia, serif;">
  Ancestor style is tomato serif text.
  <div class="widget">This widget uses "all: revert" to fall back to the browser's user-agent defaults, undoing author styles.</div>
</div>

all गुणधर्म

all गुणधर्म एक संक्षिप्त रूप है, जो एक साथ हर CSS गुणधर्म पर कोई कीवर्ड लागू करता है, लेकिन direction और unicode-bidi को छोड़कर।

<div style="color: tomato; font-family: Georgia, serif; padding: 12px; background: #eee;">
  <div class="isolated-widget">all: initial — resets everything to spec defaults</div>
  <div class="scoped-component">all: revert — resets to browser UA defaults</div>
</div>

व्यावहारिक all: initial

जब आपको ऐसा पूरी तरह अलग-थलग घटक बनाना हो, जिस पर वैश्विक या मूल तत्व की शैलियों का प्रभाव न पड़े, तब all: initial का उपयोग करें:

<div style="color: tomato; font-family: Georgia, serif; font-size: 28px;">
  Page context — large serif tomato text
  <div class="email-template-preview">Email preview — isolated with all: initial, then restyled with Arial 14px.</div>
</div>

all: unset पैटर्न

सभी संबंधित गुणधर्मों को जाने बिना, अनुकूलित बटनों के लिए ब्राउज़र की बटन शैलियाँ हटाएँ:

<button class="custom-btn">Custom button styled from scratch using all: unset</button>
<button>Default browser button for comparison</button>

विरासत और अनुकूलित गुणधर्म

CSS के अनुकूलित गुणधर्म डिफ़ॉल्ट रूप से विरासत में मिलते हैं। यही उन्हें शक्तिशाली बनाता है — :root पर निर्धारित चर हर जगह उपलब्ध रहता है। किसी अनुकूलित गुणधर्म को विरासत में मिलने से रोकने के लिए @property { inherits: false } का उपयोग करें।

त्वरित जाँच

कौन-सा कीवर्ड किसी गुणधर्म को CSS विनिर्देशन के प्रारंभिक मान के बजाय ब्राउज़र के उपयोगकर्ता-एजेंट के डिफ़ॉल्ट मान पर रीसेट करता है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

विरासत में मिलने वाले गुणधर्म अपने मान वंशज तत्वों तक पहुँचाते हैं; विरासत में न मिलने वाले गुणधर्म ऐसा नहीं करते। inherit, initial, unset और revert कीवर्ड स्पष्ट नियंत्रण प्रदान करते हैं। all गुणधर्म एक ही बार में हर गुणधर्म को रीसेट करता है — अलग-थलग घटकों और अनुकूलित फ़ॉर्म तत्वों के लिए यह बहुत शक्तिशाली है।

शुरुआत निःशुल्क

एआई शिक्षक के साथ CSS सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Inheritance और all Property” पाठ निःशुल्क है?

हाँ—“Inheritance और all Property” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Inheritance और all Property” में मैं क्या सीखूँगा?

CSS inheritance rule समझिए और inherited style को reset करने के लिए all property का उपयोग कीजिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“Inheritance और all Property” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

Specificity Calculation: Inline Style ID Class Element
Cascade: Origin और Order
!important: कब और क्यों नहीं
Inheritance और all Property

← CSS Academy पर वापस जाएँ