Layout - ویژگی display
ویژگی display
مهمترین ویژگی CSS برای کنترل چیدمان (به انگلیسی: Layout) است.[۱]
ویژگی display
ویژگی display
مشخص میکند اگر/چطور یک عنصر نمایش داده شود.
هر عنصر HTML با توجه به نوع عنصر خود دارای یک مقدار پیشفرض display است. مقدار پیشفرض display برای بیشتر عناصر block
یا inline
است.
ساخت نمونه مثال این بخش در دست اقدام است.
عناصر block-level (سطح بلوک)
یک عنصر block-level همیشه در یک خط جدید آغاز میشود و تمام عرض موجود را اشغال میکند (تا جایی که میتواند به سمت چپ و راست کشیده میشود).
عنصر <div> یک عنصر block-level است.
مثالهایی از عناصر block-level:
- <div>
- <h1> - <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
عناصر درون خطی (Inline)
یک عنصر درون خطی در ابتدای خط جدید آغاز نمیشود و تنها میزان عرض مورد نیاز را اشغال میکند.
این یک عنصر <span> از نوع درون خطی در داخل یک پاراگراف است.
مثالهایی از عناصر درون خطی:
- <span>
- <a>
- <img>
Display: none;
display: none;
معمولاً با Javascript استفاده میشود و برای مخفی کردن و نمایش عناصر بدون حذف و ساخت مجدد آنها به کار میرود. اگر میخواهید بدانید که این کار چگونه انجام میشود نگاهی به آخرین مثال در این صفحه بیاندازید
عنصر <script>
بطور پیشفرض از display: none;
استفاده میکند.
نادیده گفتن مقدار پیشفرض Display
همانطور که گفته شد، هر عنصر یک مقدار پیشفرض display دارد. اما، میتوان این مقدار را بازنویسی کرد.
تغییر یک عنصر درون خطی به یک عنصر سطح بلوک، یا برعکس، میتواند برای اینکه صفحه به شکل خاصی باشد و باز هم استانداردهای وب را رعایت کند، مفید باشد.
یک مثال رایج، تبدیل عناصر <li>
برای منوهای افقی است:
نکته: تنظیم ویژگی display یک عنصر تنها نحوه نمایش عنصر را تغییر میدهد، نه نوع عنصر را؛ بنابراین یک عنصر درون خطی با ویژگی display: block;
اجازه ندارد که عنصر دیگری از نوع بلوک در درون خود داشته باشد.
مثال زیر عناصر <span> را همانند عناصر بلوک نمایش میدهد.
مثال زیر عناصر <a> را همانند عناصر بلوک نمایش میدهد.
مخفی کردن یک عنصر میتواند با تنظیم ویژگی display
برابر با none
انجام شود. عنصر مخفی خواهد شد، و صفحه طوری نمایش داده میشود که گویی عنصر در آنجا وجود ندارد:
همچنین visibility:hidden;
نیز عنصر را مخفی میکند.
اما، عنصر همچنان فضا را مانند قبل اشغال خواهد کرد. عنصر مخفی خواهد شد، اما همچنان روی چیدمان تأثیر میگذارد:
مثالهای بیشتر
تفاوت بین display:none; و visibility:hidden;
این مثال تفاوت دستور؛ display:none را در برابر؛ visibility:hidden را نمایش میدهد.
استفاده از CSS با javascript برای نمایش محتوا
این مثال نحوه استفاده از CSS و Javascript را برای نمایش یک عنصر هنگام کلیک برروی آن نمایش میدهد.
خود را با تمرینها آزمایش کنید!
ویژگیهای Display/Visibility در CSS
ویژگی | توضیحات |
---|---|
display | مشخص میکند که یک عنصر چگونه باید نمایش داده شود |
visibility | مشخص میکند که یک عنصر باید نمایش داده شود یا خیر |
منابع آموزشی