<पी> आप सीएसएस गुण डिस्प्ले:कोई नहीं या दृश्यता: का उपयोग करके सीएसएस में एक तत्व छिपा सकते हैं छिपा हुआ . प्रदर्शन:कोई भी पृष्ठ से संपूर्ण तत्व को नहीं हटाता है और पृष्ठ के लेआउट को प्रभावित कर सकता है। दृश्यता: छिपा हुआ स्थान को समान रखते हुए तत्व को छुपाता है। <पी> आपको ऐसे परिदृश्य का सामना करना पड़ सकता है जहां आप वेब पेज पर किसी तत्व को छिपाना चाहते हैं। उदाहरण के लिए, आपके पास टेक्स्ट का एक ब्लॉक हो सकता है जिसे आप छिपाए रखना चाहते हैं और जब कोई उपयोगकर्ता बटन क्लिक करता है तो वह दिखाई देता है।

<पी> CSS में किसी तत्व को छिपाने के लिए दो मुख्य दृष्टिकोण हैं, जिनका उपयोग किया जाता है:

प्रदर्शन:कोई विशेषता नहीं।
दृश्यता:छिपी हुई विशेषता.

<पी> पहला दृष्टिकोण आपके वेब पेज के लेआउट को प्रभावित कर सकता है। लेकिन, दूसरी विधि फिर भी लोकप्रिय है।

सीएसएस छिपाएँ तत्व:प्रदर्शन

<पी> डिस्प्ले प्रॉपर्टी नियंत्रित करती है कि किसी तत्व को वेब पेज पर कैसे प्रदर्शित किया जाता है। HTML दस्तावेज़ में प्रत्येक तत्व में डिस्प्ले प्रॉपर्टी के लिए एक डिफ़ॉल्ट मान होता है, हालाँकि वह मान तत्व पर निर्भर करता है। अधिकांश तत्वों के लिए, डिफ़ॉल्ट प्रदर्शन मान या तो ब्लॉक है या इनलाइन .

<पी> यदि आप नहीं चाहते कि कोई तत्व किसी तत्व पर प्रदर्शित हो, तो आप प्रदर्शन का मान निर्धारित कर सकते हैं संपत्ति किसी के पास नहीं।

<पी> निम्नलिखित शैली नियम एक वेब पेज पर एक तत्व को छुपाता है:

<पी> जब आप display का मान निर्धारित करते हैं किसी के लिए भी, प्रभावित तत्व गायब हो जाएगा। इसका मतलब यह है कि तत्व अब वेब पेज पर कोई स्थान नहीं लेगा।

प्रदर्शन:कोई नहीं उदाहरण

<पी> मान लीजिए हम एक हमारे बारे में डिज़ाइन कर रहे हैं स्थानीय कुकरी क्लब के लिए वेब पेज। अपने प्रारंभिक डिज़ाइन में, हमने पृष्ठ पर केक की एक छवि जोड़ी। अब क्लब चाहता है कि हम छवि छिपा दें क्योंकि वे अंतिम डिज़ाइन के बारे में निश्चित नहीं हैं।

<पी> हम निम्नलिखित कोड का उपयोग करके पृष्ठ पर छवि छिपा सकते हैं:

<html>
<div>
<h1>About Us</h1>
<img src="https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" />
<p>The Superstar Bakers Club, founded in 2014, is a community of passionate cookers and bakers from the Charleston, S.C. area. The club has over 100 members and meets each week to share ideas and experiment with new recipes.</p>
</div>
<style>
img {
 display: none;
}
<style>

<पी> क्लिक करें सीएसएस में तत्वों को कैसे छिपाएं:एक व्यापक चरण-दर-चरण ट्यूटोरियल

हमारे HTML/CSS कोड का आउटपुट देखने के लिए उपरोक्त कोड संपादक में बटन। <पी> हमने HTML

टैग के भीतर तीन तत्वों को परिभाषित किया है।

तत्व का उपयोग हमारे हेडर को बनाने के लिए किया जाता है, और इसमें हमारे बारे में टेक्स्ट शामिल होता है . हमारा HTML तत्व एक केक की छवि बनाता है, जो 200px लंबा और 200px चौड़ा है।
तत्व में क्लब का संक्षिप्त विवरण होता है।
<पी> हमारे सीएसएस कोड में, हम अपने पेज पर सभी छवि टैग का चयन करने के लिए "img" चयनकर्ता का उपयोग करते हैं। यह नियम सभी टैग की डिस्प्ले प्रॉपर्टी को कोई नहीं पर सेट करता है . या, दूसरे शब्दों में, शैली नियम हमारी छवि को छिपा देता है।
<पी> हालाँकि हमारी छवि छिपी हुई है, फिर भी यह हमारे वेब पेज पर मौजूद है। यदि हम अपनी छवि वापस लाना चाहते हैं, तो हम display:none; को हटा सकते हैं शैली. या, हम एक अन्य प्रदर्शन शैली निर्दिष्ट कर सकते हैं (जैसे ब्लॉक या इनलाइन ).
<पी> आप इस नियम को इनलाइन HTML विशेषता के रूप में परिभाषित कर सकते हैं:
<पी>
<पी> इनलाइन HTML और CSS गुणों के बारे में अधिक जानने के लिए, हमारी इनलाइन CSS मार्गदर्शिका देखें।

सीएसएस तत्व छुपाएं:दृश्यता

<पी> CSS दृश्यता गुण का उपयोग यह नियंत्रित करने के लिए किया जाता है कि कोई तत्व वेब पेज पर दिखाई दे रहा है या नहीं।

<पी> डिफ़ॉल्ट रूप से, दृश्यता का मान संपत्ति दृश्यमान है . हालाँकि, यदि आप किसी छवि को अदृश्य बनाना चाहते हैं, तो आप दृश्यता का मान निर्धारित कर सकते हैं छिपानेके लिए .

<पी> निम्नलिखित शैली नियम किसी तत्व की दृश्यता को छिपा हुआ पर सेट करता है:

<पी> आइए पहले के कुकिंग क्लब के उदाहरण पर वापस लौटते हैं। मान लीजिए हम अपने हमारे बारे में पर केक की छवि छिपाना चाहते हैं वेब पेज. हम इस कोड का उपयोग करके ऐसा कर सकते हैं:

<html>
<div>
<h1>About Us</h1>
<img src="https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" />
<p>The Superstar Bakers Club, founded in 2014, is a community of passionate cookers and bakers from the Charleston, S.C. area. The club has over 100 members and meets each week to share ideas and experiment with new recipes.</p>
</div>
<style>
img {
 display: visibility;
}
<style>

हमारे HTML/CSS कोड का आउटपुट देखने के लिए उपरोक्त कोड संपादक में बटन। <पी> इस उदाहरण में हमारा HTML कोड समान है। हमारी CSS फ़ाइल में, display का उपयोग करने के बजाय संपत्ति, हमने दृश्यता का उपयोग किया हमारे तत्व को छुपाने के लिए. जैसा कि आप ऊपर देख सकते हैं, हमारी छवि वेब पेज से छिपा दी गई है।

<पी> जबकि हमारी छवि चली गई है, अब हमारे हेडर और हमारे पैराग्राफ के बीच एक जगह है जहां छवि रखी गई होगी। यह दृश्यता:छिपा हुआ; की एक विशेषता है शैली. मूल तत्व का स्थान अभी भी वेब पेज द्वारा रखा गया है। लेकिन, तत्व छिपा हुआ है.

सीएसएस दृश्यता बनाम प्रदर्शन

<पी> किसी तत्व को छुपाने के जिन दो तरीकों की हमने चर्चा की है वे एक जैसे ही प्रतीत होते हैं, लेकिन दोनों में अंतर है।

<पी> प्रदर्शन:कोई नहीं नियम HTML दस्तावेज़ से एक तत्व को हटा देता है। जबकि छिपे हुए तत्व के लिए कोड अभी भी मौजूद है, तत्व स्वयं प्रदर्शित नहीं होगा।

<पी> दृश्यता:छिपा हुआ दूसरी ओर, नियम एक तत्व को छुपाता है, लेकिन तत्व फिर भी वेब पेज पर जगह लेगा। यदि आप किसी तत्व को छिपाना चाहते हैं लेकिन वेब पेज पर उस तत्व का स्थान बनाए रखना चाहते हैं, तो visibility:hidden; का उपयोग करें। नियम सर्वोत्तम है.

<पी>

<पी> "करियर कर्म ने मेरे जीवन में तब प्रवेश किया जब मुझे इसकी सबसे अधिक आवश्यकता थी और तुरंत ही बूटकैंप से मुझे मदद मिली। स्नातक होने के दो महीने बाद, मुझे अपने सपनों की नौकरी मिल गई जो जीवन में मेरे मूल्यों और लक्ष्यों के अनुरूप थी!"

<पी> वीनस, रॉकबॉट में सॉफ्टवेयर इंजीनियर

<पी> अपना बूटकैंप मैच ढूंढें

निष्कर्ष

<पी> प्रदर्शन:कोई नहीं नियम किसी दस्तावेज़ से एक तत्व को हटा देता है और उसे दृश्य से छिपा देता है। दृश्यता:छिपा हुआ नियम किसी दस्तावेज़ पर एक तत्व को छिपा देता है और उस स्थान को खाली छोड़ देता है जिसमें वह तत्व दिखाई देता।

<पी> क्या आप सीएसएस के बारे में अधिक जानना चाहते हैं? हमारी सीएसएस कैसे सीखें मार्गदर्शिका पढ़ें। यह मार्गदर्शिका सीएसएस कैसे सीखें, इस पर कार्रवाई योग्य सलाह से भरी है। आपको उन शीर्ष संसाधनों की एक सूची भी मिलेगी जिनका उपयोग आप अपने ज्ञान को आगे बढ़ाने के लिए कर सकते हैं।