वेब दस्तावेज़ों में सीएसएस विरासत कैसे काम करता है

सीएसएस के साथ एक वेबसाइट स्टाइल का एक महत्वपूर्ण हिस्सा विरासत की अवधारणा को समझ रहा है।

सीएसएस विरासत स्वचालित रूप से उपयोग की जा रही संपत्ति की शैली द्वारा परिभाषित किया जाता है। जब आप स्टाइल प्रॉपर्टी बैकग्राउंड-रंग देखते हैं, तो आपको "विरासत" शीर्षक वाला एक अनुभाग दिखाई देगा। यदि आप अधिकतर वेब डिज़ाइनरों की तरह हैं, तो आपने उस अनुभाग को अनदेखा कर दिया है, लेकिन यह एक उद्देश्य प्रदान करता है।

सीएसएस विरासत क्या है?

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

उदाहरण के लिए, नीचे दिए गए एचटीएमएल कोड में एक ईएम टैग संलग्न एक एच 1 टैग है:

यह एक बड़ा शीर्षक है

ईएम तत्व एच 1 तत्व का एक बच्चा है, और विरासत में प्राप्त एच 1 पर किसी भी शैली को ईएम पाठ पर भी पास किया जाएगा। उदाहरण के लिए:

एच 1 {फ़ॉन्ट आकार: 2em; }

चूंकि फ़ॉन्ट-आकार की संपत्ति विरासत में मिली है, पाठ "बिग" (जो कि ईएम टैग के अंदर संलग्न है) कहता है, शेष एच 1 के समान आकार होगा। ऐसा इसलिए है क्योंकि यह सीएसएस संपत्ति में मूल्य सेट प्राप्त करता है।

सीएसएस विरासत का उपयोग कैसे करें

इसका उपयोग करने का सबसे आसान तरीका उन सीएसएस गुणों से परिचित होना है जो विरासत में नहीं हैं। यदि संपत्ति विरासत में मिली है, तो आप जानते हैं कि दस्तावेज़ दस्तावेज़ में प्रत्येक बच्चे तत्व के लिए समान रहेगा।

इसका उपयोग करने का सबसे अच्छा तरीका है अपनी मूल शैलियों को बॉडी जैसे उच्च स्तर के तत्व पर सेट करना। यदि आप अपने फ़ॉन्ट-परिवार को शरीर की संपत्ति पर सेट करते हैं, तो विरासत के लिए धन्यवाद, पूरा दस्तावेज़ वही फ़ॉन्ट-परिवार रखेगा। यह वास्तव में छोटे स्टाइलशीट्स के लिए बनाएगा जो प्रबंधित करना आसान है क्योंकि कम समग्र शैलियों हैं। उदाहरण के लिए:

शरीर {फ़ॉन्ट-परिवार: एरियल, संस-सेरिफ़; }

इनहेरिट स्टाइल वैल्यू का प्रयोग करें

प्रत्येक सीएसएस संपत्ति में एक संभावित विकल्प के रूप में मूल्य "वारिस" शामिल होता है। यह वेब ब्राउज़र को बताता है, भले ही संपत्ति सामान्य रूप से विरासत में न हो, फिर भी यह माता-पिता के समान मूल्य होना चाहिए। यदि आप एक मार्जिन जैसी शैली निर्धारित करते हैं जो विरासत में नहीं है, तो आप माता-पिता के समान मार्जिन देने के लिए बाद के गुणों पर उत्तराधिकारी मूल्य का उपयोग कर सकते हैं। उदाहरण के लिए:

शरीर {मार्जिन: 1em; } पी {मार्जिन: वारिस; }

विरासत गणना मूल्यों का उपयोग करता है

विरासत मानों के लिए यह महत्वपूर्ण है जैसे फ़ॉन्ट आकार जो लंबाई का उपयोग करते हैं। एक गणना मूल्य एक मान है जो वेब पेज पर किसी अन्य मूल्य के सापेक्ष है।

यदि आप अपने बॉडी तत्व पर 1em का फ़ॉन्ट आकार सेट करते हैं, तो आपका पूरा पृष्ठ आकार में केवल 1em नहीं होगा। ऐसा इसलिए है क्योंकि शीर्षलेख (एच 1-एच 6) और अन्य तत्वों (कुछ ब्राउज़रों की तालिका तालिका अलग-अलग) जैसे तत्व वेब ब्राउज़र में एक सापेक्ष आकार रखते हैं। अन्य फ़ॉन्ट आकार की जानकारी की अनुपस्थिति में, वेब ब्राउज़र हमेशा एच 1 शीर्षक को पृष्ठ पर सबसे बड़ा टेक्स्ट बना देगा, उसके बाद एच 2 और इसी तरह से। जब आप अपने बॉडी तत्व को एक विशिष्ट फ़ॉन्ट आकार में सेट करते हैं, तो इसका उपयोग "औसत" फ़ॉन्ट आकार के रूप में किया जाता है, और शीर्षक तत्वों की गणना उस से की जाती है।

विरासत और पृष्ठभूमि गुणों के बारे में एक नोट

सूचीबद्ध हैं कि कई शैलियों को डब्ल्यू 3 सी पर सीएसएस 2 में विरासत में नहीं मिला है, लेकिन वेब ब्राउज़र अभी भी मानों का वारिस करते हैं। उदाहरण के लिए, यदि आपने निम्न HTML और CSS लिखा है:

<शैली प्रकार = "पाठ / सीएसएस"> एच 1 {पृष्ठभूमि रंग: पीला; }

यह एक बड़ा शीर्षक है

"बिग" शब्द में अभी भी पीले रंग की पृष्ठभूमि होगी, भले ही पृष्ठभूमि-रंग की संपत्ति विरासत में न हो। ऐसा इसलिए है क्योंकि पृष्ठभूमि संपत्ति का प्रारंभिक मूल्य "पारदर्शी" है। तो आप पर पृष्ठभूमि रंग नहीं देख रहे हैं, बल्कि यह रंग

पैरेंट से चमक रहा है।