सीएसएस लेआउट - प्रदर्शन संपत्ति
लेआउट को नियंत्रित करने के लिए संपत्ति सबसे displayमहत्वपूर्ण सीएसएस संपत्ति है।
प्रदर्शन संपत्ति
displayसंपत्ति निर्दिष्ट करती है कि कोई तत्व प्रदर्शित होता है या नहीं ।
प्रत्येक HTML तत्व का एक डिफ़ॉल्ट प्रदर्शन मान होता है जो इस बात पर निर्भर करता है कि वह किस प्रकार का तत्व है। अधिकांश तत्वों के लिए डिफ़ॉल्ट प्रदर्शन मान blockया
है inline।
पैनल दिखाने के लिए क्लिक करें
This panel contains a <div> element, which is hidden by default (display: none).
It is styled with CSS, and we use JavaScript to show it (change it to (display: block).
ब्लॉक-स्तरीय तत्व
एक ब्लॉक-स्तरीय तत्व हमेशा एक नई लाइन पर शुरू होता है और उपलब्ध पूरी चौड़ाई लेता है (जहां तक यह बाएं और दाएं तक फैला हुआ है)।
ब्लॉक-स्तरीय तत्वों के उदाहरण:
- <div>
- <h1> - <h6>
- <p>
- <फॉर्म>
- <हेडर>
- <पाद>
- <अनुभाग>
इनलाइन तत्व
एक इनलाइन तत्व एक नई लाइन पर शुरू नहीं होता है और केवल उतनी ही चौड़ाई लेता है जितनी आवश्यक हो।
यह एक पैराग्राफ के अंदर एक इनलाइन <span> एलिमेंट है ।
इनलाइन तत्वों के उदाहरण:
- <अवधि>
- <ए>
- <आईएमजी>
कुछ भी डिस्प्ले मत करो;
display: none;आमतौर पर जावास्क्रिप्ट के साथ तत्वों को हटाने और फिर से बनाए बिना उन्हें छिपाने और दिखाने के लिए उपयोग किया जाता है। इस पृष्ठ पर हमारे पिछले उदाहरण पर एक नज़र डालें यदि आप जानना चाहते हैं कि यह कैसे प्राप्त किया जा सकता है।
<script>तत्व display: none;
डिफ़ॉल्ट के रूप में उपयोग करता है।
डिफ़ॉल्ट प्रदर्शन मान को ओवरराइड करें
जैसा कि उल्लेख किया गया है, प्रत्येक तत्व का एक डिफ़ॉल्ट प्रदर्शन मान होता है। हालाँकि, आप इसे ओवरराइड कर सकते हैं।
एक इनलाइन तत्व को एक ब्लॉक तत्व में बदलना, या इसके विपरीत, पृष्ठ को एक विशिष्ट तरीके से देखने के लिए उपयोगी हो सकता है, और फिर भी वेब मानकों का पालन कर सकता है।
एक सामान्य उदाहरण <li>क्षैतिज मेनू के लिए इनलाइन तत्व बनाना है:
उदाहरण
li {
display: inline;
}
नोट: किसी तत्व के प्रदर्शन गुण को सेट करना केवल तत्व के प्रदर्शित होने के तरीके को बदलता है , न कि यह किस प्रकार का तत्व है। तो, के साथ एक इनलाइन तत्व को display: block;इसके अंदर अन्य ब्लॉक तत्व रखने की अनुमति नहीं है।
निम्न उदाहरण <span> तत्वों को ब्लॉक तत्वों के रूप में प्रदर्शित करता है:
उदाहरण
span {
display: block;
}
निम्न उदाहरण <a> तत्वों को ब्लॉक तत्वों के रूप में प्रदर्शित करता है:
उदाहरण
a {
display: block;
}
एक तत्व छुपाएं - डिस्प्ले: कोई नहीं या दृश्यता: छुपा?
display:none
visibility:hidden
रीसेट
displayसंपत्ति को पर
सेट करके किसी तत्व को छुपाया जा सकता है none। तत्व छुपाया जाएगा, और पृष्ठ प्रदर्शित किया जाएगा जैसे कि तत्व वहां नहीं है:
उदाहरण
h1.hidden {
display: none;
}
visibility:hidden;एक तत्व भी छुपाता है।
हालाँकि, तत्व अभी भी पहले जैसा ही स्थान लेगा। तत्व छुपाया जाएगा, लेकिन फिर भी लेआउट को प्रभावित करेगा:
उदाहरण
h1.hidden {
visibility: hidden;
}
और ज्यादा उदाहरण
This example demonstrates display: none; versus visibility: hidden;
This example demonstrates how to use CSS and JavaScript to show an element on
click.
CSS Display/Visibility Properties
| Property | Description |
|---|---|
| display | Specifies how an element should be displayed |
| visibility | Specifies whether or not an element should be visible |