CSS
विरासत

वाक्य - विन्यास

• संपत्ति: विरासत;

स्वचालित विरासत

वंशानुक्रम सीएसएस का एक मूलभूत तंत्र है जिसके द्वारा किसी तत्व के कुछ गुणों के गणना मूल्यों को उसके 'बच्चों' पर लागू किया जाता है। यह विशेष रूप से तब उपयोगी होता है जब आप अपने मार्कअप में प्रत्येक तत्व को उक्त गुण सेट करने के बजाय अपने तत्वों के लिए एक वैश्विक शैली सेट करना चाहते हैं।

सामान्य गुण जो स्वचालित रूप से विरासत में मिले हैं: font , color , text-align , line-height ।

निम्नलिखित स्टाइलशीट मान लें:

#myContainer {
  color: red;
  padding: 5px;
}

यह color: red लागू करेगा color: red न केवल <div> तत्व के लिए बल्कि <h3> और <p> तत्वों के लिए भी। हालांकि, padding की प्रकृति के कारण इसका मूल्य उन तत्वों को विरासत में नहीं मिलेगा।

<div id="myContainer">
  <h3>Some header</h3>
  <p>Some paragraph</p>
</div>

लागू विरासत

कुछ गुण स्वचालित रूप से अपने बच्चों के लिए एक तत्व से विरासत में नहीं मिले हैं। ऐसा इसलिए है क्योंकि उन गुणों को आमतौर पर तत्व (या तत्वों के चयन) के लिए अद्वितीय माना जाता है जिनके लिए संपत्ति को लागू किया जाता है। सामान्य ऐसी संपत्तियां हैं margin , padding , background , display आदि।

हालांकि, कभी-कभी वंशानुक्रम वैसे भी वांछित होता है। इसे प्राप्त करने के लिए, हम उस संपत्ति पर inherit मूल्य लागू कर सकते हैं जो विरासत में मिली होनी चाहिए। inherit मूल्य किसी भी सीएसएस संपत्ति और किसी भी HTML तत्व के लिए अपील की जा सकती है।

निम्नलिखित स्टाइलशीट मान लें:

#myContainer {
  color: red;
  padding: 5px;
}
#myContainer p {
  padding: inherit;
}

यह color: red लागू करेगा color: red color संपत्ति के स्वभाव के कारण <h3> और <p> तत्वों दोनों को color: red । हालाँकि, <p> तत्व भी अपने 'माता-पिता से padding मान प्राप्त करेगा क्योंकि यह निर्दिष्ट किया गया था।

<div id="myContainer">
  <h3>Some header</h3>
  <p>Some paragraph</p>
</div>