इस Tutorial में हम आपको CSS display Property in Hindi के बारे में पूरी जानकारी देंगे. अध्ययन की सुविधा के लिए हमने इस Tutorial को कई भागों में बांटा हैं.
List of Content
CSS Display Property का परिचय
CSS Box Model के अनुसार प्रत्येक HTML Element एक Square Box होता हैं. जिनमे से कुछ Block-level Elements होते हैं. और कुछ Inline Elements होते हैं.
प्रत्येक Element अपनी प्रकृति (Block-level और Inline) के अनुसार Display होता हैं. एक Block-level Element block की तरह Display होता हैं. और एक Inline Element inline Element की तरह Display होता हैं.
लेकिन, Webpages के लिए Layout को Control करने के लिए हमे Element Display को नियंत्रित करना पडता हैं. जिसके लिए CSS Display Property का इस्तेमाल किया जाता हैं.
किसी Webpage के Layout को नियंत्रित करने के लिए Display Property सबसे महत्वपूर्ण CSS Property हैं. Display Property द्वारा आप Elements को अपनी जरूरत के अनुसार विभिन्न प्रकार से Show करा सकते हैं.
विभिन्न प्रकार की Display Property
Element Display को नियंत्रित करने के लिए Display Property में कई प्रकार की Values का इस्तेमाल किया जाता हैं. Display Values को Keywords में Define किया जाता हैं.
हम आपको यहाँ सबसे ज्यादा उपयोग में आने वाली Display Values के बारे में उदाहरण सहित बता रहे हैं. बाकि Values के नाम हम नीचे बता रहे हैं.
block Value
block Value से किसी भी Element को Block-level Element की तरह Display करा सकते हैं. इसके द्वारा Inline Elements को भी Block-level Elements की तरह Display करा सकते हैं.
इसे Try कीजिए
<html>
<head>
<title>CSS display:block Examples</title><style type=”text/css”>
a {
display: block;
}
</style>
<body>
<a>This is Link One.</a>
<a>This is Link Two.</a>
<a>This is Link Three.</a>
<a>This is Link Four.</a>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
ऊपर उदाहरण हमने Anchor Element जो कि एक Inline Element हैं उसे block Display कराया हैं. अब यह Block-level Element की तरह Display हो रहा हैं.
inline Value
यह Value Inline Elements की Default Value होती हैं. inline Value द्वारा Elements को Inline Display कराया जाता हैं. Block-level Elements कोभी इस Value द्वारा Inline Display करा सकते हैं.
इसे Try कीजिए
<html>
<head>
<title>CSS display:inline Examples</title><style type=”text/css”>
li {
display: inline;
}
</style>
<body>
<div>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
- One
- Two
- Three
- Four
ऊपर के उदाहरण में हमने एक Block-level Element UL को Inline Element की तरह Display कराया हैं.
inline-block Value
इस Value में block और inline दोनों Values के गुण होते हैं. inline-block Value द्वारा Elements को Inline Display कराया जाता हैं. लेकिन, ये सभी एक Block की तरह नजर आते हैं.
इसे Try कीजिए
<html>
<head>
<title>CSS display:inline-block Examples</title><style type=”text/css”>
div {
display: inline-block;
}
</style>
<body>
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
- Div 1
- Div 2
- Div 3
- Div 4
इस उदाहरण में हमने Div Element को एक लाईन में Show कराया हैं. यह कार्य आप inline-block Value द्वारा कर सकते हैं.
initial Value
initial Value द्वारा Elements कि किसी CSS Property की Default Value को Show कराया जाता हैं. इस Value को अधिकतर Div Elements में एक से ज्यादा Elements Define होने पर Use किया जाता हैं. इस Value को सभी CSS Property और HTML Elements पर Apply किया जा सकता हैं.
इसे Try कीजिए
<html>
<head>
<title>CSS display:initial Examples</title><style type=”text/css”>
div {
color: green;
}
div h3 {
display: initial;
}
</style>
<body>
<div>
<h3>This is Heading Text</h3>
<p>This is paragraph one inside the div. This paragraph has green color.</p>
<p>This is paragraph two inside the div. This paragraph has green color.</p>
</div>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
This is Heading Text
This is paragraph one inside the div. This paragraph has green color.
This is paragraph two inside the div. This paragraph has green color.
ऊपर के उदाहरण में Div का Color Green Define किया गया हैं. और इस Div के अंदर 2 Paragraph और 1 Heading Element को Define किया गया हैं. नियमानुसार इस Div के Elements का Color Green होना चाहिए. जो Paragraph Elements पर तो Apply हुआ हैं. और Heading Element पर नही हैं. इसका कारण हैं. Display Property की initial Value. इस Value के कारण Heading की Default Style लागु होती हैं.
inherit Value
inherit Value द्वारा Elements को Parent Element की तरह Display कराया जाता हैं. इस Value को भी सभी CSS Properties और HTML Elements के लिए Define किया जा सकता हैं.
इसे Try कीजिए
<html>
<head>
<title>CSS display:inherit Examples</title><style type=”text/css”>
div {
display: block;
}
a {
display: inherit;
}
</style>
<body>
<div>
<a>This is Link 1</a>
<a>This is Link 2.</a>
<a>This is Link 3.</a>
</div>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
ऊपर आप देख सकते हैं कि Div Element के अंदर कुछ Anchor Elements Define किए हुए हैं. जो Inline Elements होते हैं. लेकिन, इनकी Display Value inherit होने के कारण ये अपने Parent Element Div की Display Value के अनुसार Show हो रहे हैं.
none Value
यदि आप किसी Element को Show नही कराना चाहते हैं तो उसे none Value द्वारा Hide कर सकते हैं. none Value द्वारा Element Show नही होता हैं और उसकी जगह पर अगला Element Show होने लगता हैं.
इसे Try कीजिए
<html>
<head>
<title>CSS display:inline-block Examples</title><style type=”text/css”>
.div 2 {
display: none;
}
</style>
<body>
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
- Div 1
- Div 3
- Div 4
ऊपर के उदाहरण में आप देख सकते हैं कि Div 2 परिणाम में दिखाई नही दे रहा हैं. इसी तरह आप किसी भी Element को छिपा सकते हैं.
कुछ अतिरिक्त Display Property Values
- contents
- flex
- grid
- inline-flex
- inline-grid
- inline-table
- list-item
- run-in
- table
- table-caption
- table-column-group
- table-header-group
- table-footer-group
- table-row-group
- table-cell
- table-column
- table-row
आपने क्या सीखा?
इस Tutorial में हमने आपको CSS Display Properties के बारे में पूरी जानकारी दी हैं. आपने Display Property की विभिन्न Values का उपयोग करना सीखा हैं. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.
Leave a Reply