طرحبندی CSS - ویژگی display
- صفحه قبلی جداول CSS
- صفحه بعدی max-width CSS
display
این خصوصیت مهمترین خصوصیت CSS برای کنترل چیدمان است.
خصوصیت display
display
این属性 مشخص میکند که آیا عنصر نمایش داده شود یا چگونه نمایش داده شود.
هر عنصر HTML یک مقدار پیشفرض display دارد که بستگی به نوع آن دارد. مقدار پیشفرض بیشتر عناصر display block
یا inline
.
این پنل شامل یک عنصر <div> است که به صورت پیشفرض پنهان است. (display: none
)
این توسط CSS به عنوان استایل تنظیم شده است و ما از JavaScript برای نمایش آن استفاده میکنیم. (تغییر به display: block
)
عناصر بلوکی (block element)
عناصر بلوکی همیشه از یک خط جدید شروع میشوند و تمام فضای موجود را اشغال میکنند (به سمت چپ و راست تا جایی که ممکن است گسترش یابند).
مثالهای عناصر بلوکی:
- <div>
- <h1> - <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
عناصر درونخطی (inline element)
عناصر درونخطی از شروع یک خط جدید خودداری میکنند و تنها فضای مورد نیاز را اشغال میکنند.
این یک پاراگراف است،عنصر درونخطی <span>.
مثالهای عناصر درونخطی:
- <span>
- <a>
- <img>
Display: none;
display: none;
معمولاً با JavaScript استفاده میشود تا عناصر را مخفی و نمایش داده شود بدون اینکه باید آنها را حذف و دوباره ایجاد کنید. اگر میخواهید بدانید چگونه این هدف را به دست آورید، لطفاً به آخرین مثال در این صفحه نگاه کنید.
به صورت پیشفرض،<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
تنظیم شده به عنوان عدم وجود
میتوان عنصر را مخفی کرد. این عنصر مخفی خواهد شد و صفحه به گونهای نمایش داده خواهد شد که انگار این عنصر در آن نیست:
مثال
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 | تعیین اینکه آیا باید عنصر قابل مشاهده باشد یا خیر. |
- صفحه قبلی جداول CSS
- صفحه بعدی max-width CSS