इस Tutorial में हम आपको CSS outline Property in Hindi के बारे में पूरी जानकारी देंगे. अध्ययन की सुविधा के लिए हमने इस Tutorial को निम्न भागों में बांटा हैं.
किसी Element को Visually अधिक आकर्षक बनाने के लिए और अन्य आस-पास Defined Elements की तुलना में अलग दिखाने के लिए Outline का Use किया जाता हैं.
Outline, Element के चारों तरफ एक Line होती हैं, जो Border के बाहर दिखाई देती हैं. इसलिए इसे Outline कहते हैं.
Outline को Define करने के लिए CSS Outline Property का इस्तेमाल किया जाता हैं. आप Outline Width, Style, Color आदि को अपनी पसंदानुसार Set कर सकते हैं.
Different Type of outline Properties
Outline को Control करने के लिए CSS द्वारा कई अलग-अलग Properties उपलब्ध करवाई गई हैं. जिनके बारे में हम नीचे बता रहे हैं.
outline-style Property
इस Property द्वारा Outline की Style को Set किया जाता हैं. Style से हमारा मतलब हैं कि आप किस तरह की Outline लगाना चाहते हैं. CSS द्वारा निम्न Outline Style Provide की जाती हैं.
dotted – इस Value से Dot यानि Full Stop के चिन्ह वाली Outline Set होती हैं.
dashed – इस Value से Minus के चिन्ह जैसी Outline Set होती हैं.
solid – इससे एक Normal लाईन में Outline Set होती हैं.
double – इस Value से दो लाईन की Outline Set होती हैं.
groove – इस Value से Groove Style में Outline Set होती हैं.
ridge – इस Value से Rigde Style में Outline Set होती हैं.
inset – इस Value से Inset Outline Set होती हैं.
outset – इस Value से Outset Outline Set होती हैं.
none – कोई Outline Set नही होती हैं.
hidden – Outline Set हो जाती हैं लेकिन दिखाई नही देती हैं.
Outline का Color Set करने के लिए outline-color Property का इस्तेमाल किया जाता हैं. Outline Color को कई तरीकों से Declare किया जा सकता हैं.
Name Value – Color का नाम लिखकर जैसे, “Black”
RGB Value – RGB Value में जैसे, “rgb(255,255,255)”
Hex Value – Hex Value में जैसे, “#990000”
invert Keyword – Color को “invert” Declare करने पर Outline Color Black दिखाई देता हैं.
outline-color Declare करने का तरीका
{outline-width: red | rgb(255,200,200) | #333333 | invert;}
outline-width Property
Outline की मोटाई को Set करने के लिए outline-width Property को Use किया जाता हैं. Outline Width को आप कई तरीकों से Declare कर सकते हैं.
thin – इस Value से लगभग 1px के बराबर मोटाई की Outline Set होती हैं.
medium – इस Value से लगभग 3px के बराबर मोटाई की Outline Set होती हैं.
thick – इस Value से लगभग 5px के बराबर मोटाई की Outline Set होती हैं.
Custom Size – ऊपर की तीन Values के अलावा outline-width को px, in, cm, em आदि Format में भी Declare कर सकते हैं.
outline-width Declare करने का तरीका
{outline-width: thin | medium | thick | 15px;}
outline-offset Property
Border और Outline के बीच खाली जगह को Define करने के लिए outline-offset Property का इस्तेमाल किया जाता हैं. Element Border और Outline के बीच की खाली जगह पारदर्शी यानी Transparent होती हैं. इसकी Value को px, cm, in आदि Measurement Units में Declare कर सकते हैं.
outline-offset Declare करने का तरीका
{outline-offset: 15px;}
outline Property
यह outline Property की Shorthand Property हैं. क्योंकि इस Property द्वारा Outline की सभी Properties को एक ही Style Rule में Declare किया जा सकता हैं. outline Property द्वारा outline-width, outline-style, outline-color को एक बार में ही Declare कर सकते हैं. इनका Order मायने नही रखता हैं.
<p>नीचे हम 3 Div Define कर रहे हैं. जिसमे हम प्रत्येक DIV पर अलग-अलग प्रकार की outline इस्तेमाल कर रहे हैं. आप भी इसी तरह अन्य outline Properties का इस्तेमाल करके देख सकते हैं.</p>
<div id=”div1″>This is Div1.</div> <div id=”div2″>This is Div2.</div> <div id=”div3″>This is Div3.</div> </body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
नीचे हम 3 Div Define कर रहे हैं. जिसमे हम प्रत्येक DIV पर अलग-अलग प्रकार की outline इस्तेमाल कर रहे हैं. आप भी इसी तरह अन्य outline Properties का इस्तेमाल करके देख सकते हैं.
This is Div1.
This is Div2.
This is Div3.
outline और border में अंतर
Outline भी बिल्कुल Border के समान ही होता हैं. इसलिए अक्सर Outline और Border को इस्तेमाल करते समय Confusion रहती हैं कि इन दोनों में से कौनसी Property का Use क्यों और कब करना चाहिए.
इसलिए नीचे Outline Property और Border Property में अंतर के बारे में बताया जा रहा हैं.
Outline Element Dimensions का हिस्सा नहीं होती हैं. लेकिन, Border Element का हिस्सा होती हैं. अधिक जानकारी के लिए CSS Box Model के बारे में पढे.
Outline से Element Size पर कोई प्रभाव नही पडता हैं. लेकिन, Border Element Size को प्रभावित करती हैं.
Outline को Border की तरह चारों तरफ अलग-अलग प्रकार से Set नही किया जा सकता हैं. यह चारों तरफ से एक जैसी रहती हैं.
Outline को गोल नही किया जा सकता हैं.
आपने क्या सीखा?
इस Tutorial में हमने आपको CSS outline Property की पूरी जानकारी दी हैं. आपने विभिन्न प्रकार की outline Properties के बारे में भी जाना हैं. इसके अलावा आपने CSS Border और CSS Outline में अंतर को भी समझा हैं. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.
