जब आप एक वेब तत्व डिजाइन कर रहे हों, तो आप यह तय कर सकते हैं कि आप पृष्ठ पर तत्व के चारों ओर एक रूपरेखा दिखाना चाहते हैं। उदाहरण के लिए, यदि आप एक बॉक्स डिज़ाइन कर रहे हैं जिसे आप हाइलाइट करना चाहते हैं, तो आप तत्व पर ध्यान आकर्षित करने के लिए बॉक्स के चारों ओर एक रंगीन रूपरेखा जोड़ना चाह सकते हैं।
यहीं पर CSS आउटलाइन प्रॉपर्टी आती है। आउटलाइन प्रॉपर्टी आपको एलिमेंट की सीमाओं के बाहर एक लाइन जोड़ने की अनुमति देती है ताकि एलिमेंट वेब पेज पर अलग दिखे।
यह ट्यूटोरियल उदाहरणों के साथ, रूपरेखा की मूल बातें और वेब तत्व की सीमाओं के बाहर एक रेखा खींचने के लिए CSS रूपरेखा संपत्ति का उपयोग करने के तरीके पर चर्चा करेगा। इस ट्यूटोरियल को पढ़ने के अंत तक, आप CSS आउटलाइन प्रॉपर्टी का उपयोग करके आउटलाइन बनाने के विशेषज्ञ होंगे।
सीएसएस रूपरेखा
एक रूपरेखा किसी तत्व के चारों ओर, उसकी सीमा के बाहर खींची गई रेखा है। आउटलाइन प्रॉपर्टी का सबसे आम उपयोग एक HTML तत्व को हाइलाइट करना है।
सीएसएस में रूपरेखा कैसे लागू की जाती है, इसका एक ग्राफिक प्रतिनिधित्व यहां दिया गया है:
यह ग्राफ़िक दर्शाता है कि रूपरेखा वेब तत्व की सामग्री और सीमा दोनों के बाहर दिखाई देती है। आप देख सकते हैं कि रूपरेखा वेब तत्व की सबसे बाहरी परत है।
CSS में बॉर्डर और आउटलाइन के बीच कुछ अंतर हैं।
सबसे पहले, जैसा कि हमने चर्चा की, रूपरेखा तत्व के बाहर (एक सीमा के विपरीत) खींची गई है। इसका मतलब यह है कि हमारे द्वारा घोषित रूपरेखा वेब पेज पर अन्य सामग्री को ओवरलैप कर सकती है। हालांकि, रूपरेखा कोई स्थान नहीं लेती है, और इसलिए किसी तत्व को ओवरलैप करने में सक्षम होने के अलावा आसपास के तत्वों पर उनका कोई प्रभाव नहीं पड़ता है।
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।
बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।
इसके अलावा, रूपरेखा किसी तत्व के आयामों का हिस्सा नहीं है। इसका मतलब है कि आपके द्वारा निर्दिष्ट रूपरेखा का किसी तत्व की ऊंचाई और चौड़ाई के मूल्यों पर कोई प्रभाव नहीं पड़ेगा।
सीमाओं के विपरीत, रूपरेखा में भी प्रत्येक किनारे के लिए अलग सीमा चौड़ाई, रंग या शैली नहीं हो सकती है। तो, आपके द्वारा किसी तत्व के चारों ओर निर्दिष्ट रूपरेखा सभी किनारों पर एक समान दिखाई देगी।
यदि आप CSS में बॉर्डर के बारे में अधिक जानना चाहते हैं, तो CSS बॉर्डर के लिए हमारा गाइड पढ़ें।
CSS आउटलाइन प्रॉपर्टी
आउटलाइन प्रॉपर्टी का इस्तेमाल वेब पेज पर किसी एलीमेंट की आउटलाइन जोड़ने के लिए किया जाता है।
आउटलाइन प्रॉपर्टी चार उप-प्रॉपर्टी के लिए शॉर्टहैंड है जो आपको यह अनुकूलित करने की अनुमति देती है कि वेब पेज पर आउटलाइन कैसे दिखाई देती है। ये उप-गुण हैं:
- रूपरेखा-रंग:रूपरेखा का रंग सेट करता है
- रूपरेखा-शैली:रूपरेखा की शैली निर्धारित करती है
- रूपरेखा-चौड़ाई:रूपरेखा की चौड़ाई निर्धारित करती है
आउटलाइन प्रॉपर्टी का सिंटैक्स इस प्रकार है:
रूपरेखा:बाह्यरेखा-रंग बाह्यरेखा-शैली बाह्यरेखा-चौड़ाई;
आउटलाइन प्रॉपर्टी के साथ निर्दिष्ट मानों को किसी विशेष क्रम में प्रदर्शित होने की आवश्यकता नहीं है।
आउटलाइन प्रॉपर्टी कैसे काम करती है, इसे समझाने के लिए आइए एक उदाहरण देखें। मान लीजिए हम एक बॉक्स के चारों ओर एक आउटलाइन बनाना चाहते हैं जिसमें टेक्स्ट है This is a box . हमारी रूपरेखा में निम्नलिखित विशेषताएं होनी चाहिए:
- रूपरेखा लाल होनी चाहिए।
- रूपरेखा 3px मोटी होनी चाहिए।
- रूपरेखा बिंदीदार होनी चाहिए।
हम यह भी चाहते हैं कि हमारी रूपरेखा में 1px-मोटी काली सीमा हो। हम निम्नलिखित कोड का उपयोग करके यह रूपरेखा और सीमा बना सकते हैं:
यह एक बॉक्स है।
हमारे एचटीएमएल/सीएसएस कोड का आउटपुट देखने के लिए ऊपर दिए गए कोड संपादक में बटन।
हमारे कोड में, हमने एक रूपरेखा घोषित की, जो लाल रंग में दिखाई देती है, और एक सीमा, जो काले रंग में दिखाई देती है। सीमा 1px-मोटी है और ठोस शैली में दिखाई देती है, और रूपरेखा लाल, 3px-मोटी है, और बिंदीदार शैली में दिखाई देती है। हम अपने बॉक्स की चौड़ाई भी 100px पर सेट करते हैं।
जैसा कि आप देख सकते हैं, रूपरेखा हमारे वेब तत्व में सीमा के बाहर दिखाई देती है।
CSS Outline सब-प्रॉपर्टी
जैसा कि हमने पहले चर्चा की, CSS रूपरेखा गुण चार उप-गुणों के लिए आशुलिपि है। आइए इनमें से प्रत्येक उप-प्रॉपर्टी को अलग-अलग एक्सप्लोर करें ताकि यह समझाया जा सके कि वे कैसे काम करते हैं।
सीएसएस रूपरेखा चौड़ाई
बाह्यरेखा-चौड़ाई गुण किसी वेब तत्व पर लागू की गई रूपरेखा की चौड़ाई निर्दिष्ट करता है।
बाह्यरेखा-चौड़ाई गुण निम्न में से किसी भी लंबाई मान को स्वीकार करता है:
- पतला (डिफ़ॉल्ट रूप से, 1px)
- मध्यम (डिफ़ॉल्ट रूप से, 3px)
- मोटा (डिफ़ॉल्ट रूप से, 5px)
- px, pt, cm, em, rem, या किसी अन्य CSS लंबाई मीट्रिक में निर्दिष्ट आकार
मान लीजिए कि हम 3px (मध्यम) नीले, ठोस आउटलाइन के साथ एक बॉक्स डिज़ाइन करना चाहते हैं। हम यह भी चाहते हैं कि हमारे बॉक्स में 1px चौड़ा ठोस, काला बॉर्डर हो। हम निम्नलिखित कोड का उपयोग करके इस बॉक्स को बना सकते हैं:
यह एक बॉक्स है।