वेब कागजातहरूमा कसरी सीएसएस विनाशता कार्य गर्दछ

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

CSS हेरिन्थेसन स्वतः प्रयोग गरिएको गुण को शैली द्वारा परिभाषित गरिन्छ। जब तपाईं शैली गुण पृष्ठभूमि-रङ देख्नुहुन्छ, तपाइँ "विरासत" शीर्षकको एक खण्ड देख्नुहुनेछ। यदि तपाई प्रायः वेब डिजाइनरहरू हुनुहुन्छ भने, तपाइँ त्यस खण्डलाई उपेक्षा गर्नुभयो, तर यो उद्देश्यको सेवा गर्दछ।

सीएसएस विनाशता के हो?

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

उदाहरणका लागि, यस एचटीएमएल कोड तल एचएम ट्याग एएम ट्याग्लेट छ:

यो एक बिग हेडलाइन हो

EM तत्व H1 तत्वको एक बच्चा हो, र H1 मा कुनै पनि शैलियां विरासत मा ईएम पाठ को साथ पनि पारित गरिनेछ। उदाहरणका लागि:

h1 {फन्ट-साइज: 2em; }

किनभने फन्ट-साइज गुण विरासत हो, पाठ "जुन" भनेको "एचएम" (ईएम ट्याग भित्र संलग्न छ जुन पाठ) H1 को बाँकीको आकार हो। यो किनभने किनभने यो सीएसएस गुणमा मान सेट मानिन्छ।

सीएसएस विनाशता कसरी प्रयोग गर्ने

यो प्रयोग गर्ने सबै भन्दा राम्रा तरिका सीएसएस गुणहरूसँग परिचित हुन र विरासतमा छैन। यदि सम्पदा विरासत हो भने, तपाइँलाई थाहा छ कि कागजात कागजातमा प्रत्येक बाल तत्वको लागि समान रहनेछ।

यो प्रयोग गर्नको लागि उत्तम तरीका तपाईंको आधारभूत शैलीहरू धेरै उच्च स्तरको तत्वमा जस्तै, BODY जस्ता सेट गर्नुहोस्। यदि तपाईंले आफ्नो फन्ट-परिवारलाई भौतिक सम्पत्तिमा सेट गर्नुभयो भने, त्यसपछि, हेरिटेजको लागि धन्यवाद, सम्पूर्ण कागजातले त्यही फन्ट-परिवारलाई राख्नेछ। यसले वास्तवमा सानो स्टाइलशिटहरू सिर्जना गर्न सजिलो बनाउँदछ किनभने त्यहाँ समग्र शैलीहरू छन्। उदाहरणका लागि:

शरीर {फन्ट-पारिवारिक: एरिड, सेन्स सेरिफ; }

इन्थरनेट शैली मूल्य प्रयोग गर्नुहोस्

प्रत्येक सीएसएस गुणमा सम्भावित विकल्पको रूपमा "हेरिटेज" मान समावेश गर्दछ। यसले वेब ब्राउजरलाई बताउँछ, कि यदि पनि सामान्यतया सम्पदा सम्पदा विरासतमा पर्दैन, योसँग आमाबाबुको समान मान हुनुपर्छ। यदि तपाईले एउटा शैली सेट गर्नुहोला मार्जिन जस्तो होईन भने, तपाइँले सम्पत्त सम्पत्तिहरूमा अभिभावकको रूपमा समान मार्जिन दिन हेरिन्ट मान प्रयोग गर्न सक्नुहुन्छ। उदाहरणका लागि:

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

विरासत गणना गरिएको मानहरू प्रयोग गर्दछ

यो विरासतित मानहरूको लागि लम्बाइ प्रयोग गर्ने फन्ट आकारहरूको लागि यो महत्त्वपूर्ण छ। एक कम्प्युटेड मान एक मान हो जुन वेब पृष्ठ मा केहि अन्य मान सम्बन्धी छ।

यदि तपाईले तपाइँको BODY तत्वमा 1em फन्ट-साइज सेट गर्नुभयो भने, तपाईंको सम्पूर्ण पृष्ठ आकारमा सबै मात्र 1em हुनेछैन। यो कारणले हेडिंगहरू (H1-H6) र अन्य तत्वहरू जस्ता तत्वहरू (केही ब्राउजरहरू तालिका गुण भिन्नतासँग तुलना गर्दछ) वेब ब्राउजरमा सापेक्ष आकार छ। अन्य फन्ट साइज जानकारीको अनुपस्थितिमा, वेब ब्राउजरले H1 लाई पृष्ठको सबै भन्दा ठूलो पाठलाई हेल्दछ, त्यसपछि H2 र त्यसमा। जब तपाईं आफ्नो BODY तत्वलाई निर्दिष्ट फन्ट आकारमा सेट गर्नुहुन्छ, त्यसपछि त्यो "औसत" फन्ट साइजको रूपमा प्रयोग गरिन्छ, र हेडलाइन तत्वहरू त्यसबाट गणना गरिन्छ।

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

त्यहाँ धेरै शैलीहरू छन् जुन सूचीबद्ध सूचीबद्ध CSS3 मा W3C मा विरासतित छैन, तर वेब ब्राउजरहरूले अझै पनि मानहरू पाउँछ। उदाहरणका लागि, यदि तपाईंले निम्न HTML र CSS लेख्नुभयो:

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

यो बिग हेडलाइन हो

"बिग" शब्दमा अझै पनि पहेंलो पृष्ठभूमि हुनेछ, भित्री पृष्ठभूमि-रङ गुण विरासतमा हुनु पर्दैन। यो किनभने किन पृष्ठभूमि गुणको सुरुवात मूल्य "पारदर्शी" हो। त्यसैले तपाइँ पृष्ठभूमिमा रङ मा देख्न सक्नुहुन्न तर बरु त्यो रंग

आमाबाबुबाट चमक हुँदैछ।