Introduction of CSS Display property in Hindi
इस tutorial मे हम CSS Display property in Hindi के बारे मे detail मे बताएँगे। यह बहोत ही important topic है।
इस property की मदद से यह decide होता है की आप element को किस प्रकार से display करना चाहते हो।
इस property की मदद से यह specify होता है की आप element को कैसे show करवाना चाहते है।
सभी elements का कुछ default display type होता है। इनमे से ज़्यादातर elements की default value block और inline होती है।
Block Level Elements
Block level element हमेशा new line से शुरू होता है और full width को use करता है।
उदाहरण
- <h1> ……..<h6>
- <p>
- <table>
- <div>
- <list>
- <footer>
- <section>
Inline Elements
Inline Elements new line से शुरू नहीं होता है और जरूरत के हिसाब से space लेता है।
उदाहरण
- <span>
- <a>
- <img>
Display property मे हम अलग अलग values को use करते है जैसे की
- none
- inline
- block
- inline-block
Display: none;
इस property सबसे ज्यादा javascript मे use की जाती है।
element को hide करने के लिए इस property का इस्तेमाल किया जाता है। आपको उस element को delete करने की आवश्यकता नहीं है।
अगर आप चाहो तो उस element को आगे भी use कर सकते है।
इस property को display: none; द्वारा define किया जाता है।
उदाहरण
<html>
<head>
<title>CSS None Value</title>
<style>
.hide {
display: none;
padding: 2px;
background-color: grey;
}
</style>
</head>
<body>
<h3>display: None property</h3>
<p class="first">यह एक paragraph है। इसमें हमने display:none को define किया है।</p>
<h3 class="hide">इसको हमने hide किया है</h3>
</body>
</html>
Display: Inline;
Inline Element जितनी जरूरत होती है उतनी ही space लेता है मतलब की inline Element नई line से शुरू न होकर Same line से ही start होता है।
इस Property की मदद से आप height और width को add नहीं कर सकते है। यदि आप height और width को add करेंगे तभी भी output मे कोई difference आने वाला नहीं है।
इस property की मदद से आप top और bottom margins/paddings को add नहीं कर सकते है।
Block Level Elements को इस value द्वारा Inline display करा सकते है।
उदाहरण
<html>
<head>
<style>
li {
display: inline;
}
</style>
</head>
<body>
<ul>
<li><a href="#" >HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</body>
</html>
Display: Block;
Block Element हमेशा एक नई line से start होता है और full width लेता है। इसके द्वारा आप Inline Elements को Block-level Elements की तरह Display करा सकते है।
उदाहरण
<html>
<head>
<style>
span {
display: block;
}
</style>
</head>
<body>
<span>Block Element हमेशा एक नई line से start होता है और full width लेता है। इसके द्वारा आप</span> <span>Inline Elements को Block-level Elements की तरह Display करा सकते है।</span>
</body>
</html>
Display: Inline-block;
इस property की मदद से आप elements को Inline Display show करा सकते है।
अगर display: inline; और display: inline-block; property को compare करे तो display: inline-block; property की मदद से आप width और height को add कर सकते है और top and bottom paddings/margins को भी add कर सकते है।
यह उदाहरण display: inline, display: inline-block and display: block इसके behaviour के बारे मे different show करता है।
<html>
<head>
<style>
span.a {
display: inline;
width: 80px;
height: 80px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display: inline-block;
width: 80px;
height: 80px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.c {
display: block;
width: 80px;
height: 80px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
</style>
</head>
<body>
<h2>CSS Display Property in Hindi</h2>
<h2>display: inline</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="a">Aliquam</span> <span class="a">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>
<h2>display: inline-block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="b">Aliquam</span> <span class="b">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>
<h2>display: block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="c">Aliquam</span> <span class="c">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>
</body>
</html>
Difference Between display: none and visibility: hidden?
display : none; property की मदद से हम elements को display ही नहीं कर सकते है। लेकिन visibility: hidden; property की मदद से elements को display किया जाता है लेकिन वह hidden होता है।
उदाहरण
<html>
<head>
<style>
h2.none {
display: none;
}
h2.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<h2>This is a display-none heading</h2>
<h2 class="none">This is a hidden heading</h2>
<p>Notice: display: none; कोई भी space नहीं लेता है।</p>
<h2>This is a visible-hidden heading</h2>
<h2 class="hidden">This is a hidden heading</h2>
<p>Notice: visibility: hidden; space लेता है। </p>
</body>
</html>