सीएसएस रूपरेखा सिर्फ एक सीमा भन्दा अधिक छन्
CSS आउटलाइन सम्पत्ति एक भ्रामक गुण हो। जब तपाइँ पहिले यो बारे जान्नुहुन्छ, बुझ्न गाह्रो छ किन यो यो सीमा सीमाको टाढाबाट फरक फरक छ। W3C ले निम्न मतभेदको रूपमा व्याख्या गर्दछ:
- रूपरेखाहरू स्थानान्तरण गर्दैनन्।
- रूपरेखा गैर आयताकार हुन सक्छ।
आउटलाइनहरू अप स्पेस लिनुहोस्
यो बयान, आफै र भित्र भ्रामक छ। तपाईको वेब पृष्ठमा वस्तु कसरी वेब पृष्ठमा ठाउँ लिन सक्नुहुन्न? तर यदि तपाइँ प्याज जस्तो हुने तपाईंको वेब पृष्ठको बारेमा सोच्नुहुन्छ भने, पृष्ठमा प्रत्येक वस्तु अर्को वस्तुको माथिमा तहमा राख्न सकिन्छ। रूपरेखा सम्पत्तिले ठाउँ खाली गर्दैन किनभने यो संधै तत्वको बाकसमा माथि राखिएको छ।
जब एक रूपरेखा एक तत्वको वरिपरि राखिएको छ, यो पृष्ठमा त्यो तत्व कसरी राखिएको छ भनेर कुनै असर पर्दैन। यसले तत्वको साइज वा स्थिति परिवर्तन गर्दैन। यदि तपाइँ एक तत्वमा एक रूपरेखा राख्नुहुन्छ भने, यसले स्पेसको उल्टै रकम उठाउनेछ यदि तपाईसँग त्यो तत्वको रूपरेखा छैन। यो सीमाको सही होइन। तत्वमा एक सीमा बाहिर चौडाइ र तत्वको उचाईमा थपिएको छ। त्यसैले यदि तपाईसँग भएको छवि पिक्सेल 50 पिक्सेल चौडा थियो, 2-पिक्सेलको सिमानाको साथमा, यसले 54 पिक्सेलमा लिन्छ (प्रत्येक सीमा सिमानाका लागि 2 पिक्सल)। त्यो पृष्ठमा 2-पिक्सेलको रूपरेखाको साथमा तपाईको पृष्ठमा केवल 50 पिक्सल चौडाई लगाइनेछ, यो रेखाले छविको बाहिरको किनारामा प्रदर्शन गर्नेछ।
आउटलाइन मई गैर आयताकार
सोचिसकेपछि "ठिक छ, अब म सर्कलहरू खिच्न सक्छु!" फेरि सोच्नुहोस्। यो बयान तपाईं फरक सोच्नु भन्दा फरक अर्थ छ। जब तपाइँ एक तत्त्वमा सिमाना राख्नुहुन्छ, ब्राउजरले तत्वलाई व्याख्या गर्दछ जस्तै यो एक विशाल आयताकार बक्स थियो। यदि बाकस धेरै रेखाहरूमा विभाजित हुन्छ भने, ब्राउजरले किन किनाराहरू बन्द गर्दछ किनकि बक्स बन्द छैन। यो ब्राउजर ले किनारा असीमित चौडा स्क्रिनको साथ किनारा देखेको छ किनकि सिमानाको लागि एक निरंतर आयतको लागि पर्याप्त छ।
यसको विपरीत, रूपरेखा सम्पत्तिले किनाराहरूलाई विचारमा लिन्छ। यदि एक उल्लिखित तत्वले धेरै रेखाहरू स्प्यान गर्दछ भने, रेखालाई रेखाको अन्त्यमा बन्द गर्दछ र अर्को रेखामा पुनः फेरि खोल्छ। यदि सम्भव छ भने, रेखांकन पूर्ण रूपमा जोडिएको छ, गैर आयताकार आकार सिर्जना गर्नेछ।
आउटलाइन सम्पत्तिको प्रयोग
आउटलाइन सम्पत्तिको सबै भन्दा राम्रो प्रयोगहरू खोज सर्तहरूलाई हाइलाइट गर्न हो। धेरै साइटहरू यो पृष्ठभूमि रङसँग गर्छ, तर तपाईं पनि आउटलाइन गुण प्रयोग गर्न सक्नुहुन्छ र तपाईंको पेजहरूमा कुनैपनि अतिरिक्त स्पेसिङ थप्नको लागि चिन्ता नगर्नुहोला।
रूपरेखा-रंग गुणले "इनभर्ट" शब्द स्वीकार गर्दछ जसले जुन रेखालाई हालको पृष्ठभूमिको उल्टो रङ्ग गर्दछ। यसले तपाईंलाई डायनामिक वेब पृष्ठहरूमा तत्वहरूलाई हाइलाइट गर्न अनुमति दिन्छ जुन बिना रंगहरू प्रयोग गर्न जान्दछ।
तपाईं सक्रिय लिङ्क वरिपरि डटटी रेखा हटाउनको लागि आउटलाइन गुण प्रयोग गर्न सक्नुहुन्छ। CSS-Tricks बाट यो लेखले डटेटेड रूपरेखा कसरी हटाउने भनेर देखाउँछ।