سی ایس ایس کسٹم لگن - ڈسپلے پرمت

display پرز پرز کا سب سے اہم CSS پرز کا پرز ہوتا ہے جو لائاوت کو کنٹرول کرنا چاہتا ہے۔

دسپلے پرز

display 属性 اس کا فیصلہ کرتا ہے کہ عناصر کا کس طرح دکھایا جائے یا کیا نہیں دکھایا جائے۔

ہر ایک HTML عناصر کا ایک دفعتی دیسپلے کا رجحان ہوتا ہے، جو اس کی عناصر کی نوعیت کی بنیاد پر فیصلہ کیا جاتا ہے۔ زیادہ تر عناصر کا دفعتی دیسپلے کا رجحان 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;.

مطلق دیسپلے مرتبہ کو کچھ کرنا

جیسا کہ پہلے کہا گیا ہے، ہر عنصر کا ایک مطلق دیسپلے مرتبہ ہوتا ہے۔ لیکن، آپ اس کو کچھ کریں سکتے ہیں۔

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

یہ ایک عام مثال ہے جس میں افقی منو کا حصول کے لئے یورتی علامت کا استعمال کیا جاتا ہے، <li> عنصر:

مثال

li {
  display: inline;
}

亲自试一试

توجہ:عنصر کی دیسپلے پرتگاربندی کو سہل طور پر بدل سکتا ہے،عنصر کا دکھانے کا طریقہجس سے علامت کی قسم بدلنے کا مجوز نہیں ہے۔ لہذا، 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; VS visibility: hidden;
结合使用 CSS 和 JavaScript 来显示内容
本例演示如何使用 CSS 和 JavaScript 在单击时显示元素。

CSS Display/Visibility 属性

属性 描述
display 指定应如何显示元素。
visibility 指定元素是否应该可见。