سی ایس ایس نمائش - دیسپلے پرپرتی

display 属性是用于控制布局的最重要的 CSS 属性。

display 属性

display 属性规定是否/如何显示元素。

ਹਰ ਹੈਂਡਲ ਐਲੀਮੈਂਟ ਕੋਲ ਇੱਕ ਮੂਲਤਬੀ display ਮੁੱਲ ਹੈ ਜੋ ਇਸ ਐਲੀਮੈਂਟ ਦੇ ਪ੍ਰਕਾਰ ਨਾਲ ਨਿਰਭਰ ਕਰਦਾ ਹੈ। ਅਧਿਕਾਂ ਐਲੀਮੈਂਟਾਂ ਦਾ ਮੂਲਤਬੀ display ਮੁੱਲ block ਜਾਂ inline.

ਪੈਨਲ ਦਿਖਾਉਣ ਲਈ ਕਲਿੱਕ ਕਰੋ

ਇਹ ਪੈਨਲ ਇੱਕ <div> ਐਲੀਮੈਂਟ ਸਮੇਤ ਹੈ ਜੋ ਮੂਲ ਰੂਪ ਵਿੱਚ ਛੁਪਾਇਆ ਹੋਇਆ ਹੈ。（display: none)

یہ CSS کے ذریعے استعمال میں لایا جاتا ہے، اور ہم اس کو جاوا اسکریپٹ کے ذریعے دکھایا جاتا ہے (بغیر تبدیل): display: block)

بلاک علامت (block element)

بلاک علامت ہمیشہ نئی لائن سے شروع ہوتی ہیں، اور قابل استعمال پورا عرض کو لینتی ہیں (اس کی جانب سے سمت چپ اور سمت داہم میں بھی بڑھتی ہیں)۔

یہ <div> علامت بلاک علامت کی طرح ہے۔

بلاک علامتوں کی کچھ مثال:

  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

یونک لائن علامت (inline element)

یونک لائن علامت نئی لائن سے نہیں شروع ہوتی، صرف ضروری عرض کو لیندی ہے۔

یہ پاراگراف میںیونک لائن <span> علامت.

یونک لائن علامتوں کی کچھ مثال:

  • <span>
  • <a>
  • <img>

Display: none;

display: none; جس کا استعمال جس میں جاوا اسکریپٹ کے ساتھ، علامت کو پوشایا جائیگا یا دکھایا جائیگا، بغیر کہ ان کو حذف کیا جائیگا یا دوبارہ بنایا جائیگا، جو آپ کو اس مقصد کو حاصل کرنے کا راستہ بتا سکتا ہے، وہ اس ویب پیج کا آخری مثال کو دیکھیئے۔

طبیعی طور پر،<script> علامت استعمال کرتا ہے display: none;.

طبیعی Display پارٹی کو اووررائز کرنا

جیسا کہ پہلے کہا گیا ہے، ہر علامت کو ایک طبیعی display پارٹی کا ملازم ہوتا ہے، لیکن آپ اس کو اووررائئز کرسکتے ہیں۔

یونک لائن علامت کو بلاک علامت کی طرح بدلنا، یا برعکس، یونک لائن علامت کو بلاک علامت کی طرح بدلنا، یونک لائن علامت کو بلاک علامت کی طرح دکھایا جائیگا تاکہ ویب پیج کا دکھانے کا طریقہ کسی خاص طریقے سے دکھایا جائیگا اور ویب اسٹینڈرڈوں کو بھی رکھا جائیگا۔

یہ ایک عام مثال ہے جس میں لیول کا علامت کو اس کا درجہ بدلنا چاہئیے تاکہ یونک لائن علامت کو بلاک علامت کی طرح دکھایا جائیگا تاکہ یونک لائن علامت کو بلاک علامت کی طرح دکھایا جائیگا: <li> عنصر:

مثال

li {
  display: inline;
}

تست شخصی

توجہ:علامت کا display پارٹی کو سہولت دی جائیتی ہے، یہ صرف اس کو بدل دیتا ہے:علامت کا دکھانے کا طریقہ، لیکن علامت کی قسم کو بدل نہیں دینے کا چاہئیے۔ لہذا، display: block; یونک لائن علامت کی طرح کا علامت کو اس میں دیگر بلاک علامتوں کا حصہ نہیں رکھنا چاہئیے۔

مثال میں <span> علامت کو بلاک علامت کی طرح دکھایا جائیگا:

مثال

span {
  display: block;
}

تست شخصی

مثال میں <a> علامت کو بلاک علامت کی طرح دکھایا جائیگا:

مثال

a {
  display: block;
}

تست شخصی

پوشایا جائیگا علامت - display:none یا visibility:hidden؟

display:none

visibility:hidden

ری سیٹ

جس کے ذریعے display پارٹی کو سہولت دی جائیتی ہے none علامت کو پوشایا جاسکتا ہے۔ اس علامت کو پوشایا جائیگی، اور ویب پیج اس طرح دکھایا جائیگا جس میں اس علامت کا کوئی حصہ نہیں ہوگا:

مثال

h1.hidden {
  display: none;
}

تست شخصی

visibility:hidden; علاوہ ازیں علامت کو پوشایا جاسکتا ہے۔

لیکن، اسکالپت کا اسپیس سابق کا بندار رہے گا۔ علامت کو پوشایا جائیگی، لیکن یہ بندار رہیگی اور یہ بندار رہیگی:

مثال

h1.hidden {
  visibility: hidden;
}

تست شخصی

مثالهای بیشتر

تفاوت بین display: none; و visibility: hidden;
این مثال نشان می‌دهد که display: none; در مقابل visibility: hidden;
استفاده ترکیبی از CSS و JavaScript برای نمایش محتوا
این مثال نشان می‌دهد که چگونه می‌توان از CSS و JavaScript برای نمایش عنصر در کلیک استفاده کرد.

ویژگی Display/Visibility CSS

ویژگی توضیح
display تعیین اینکه عنصر چگونه نمایش داده شود.
visibility تعیین آیا عنصر باید قابل مشاهده باشد یا خیر.