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> برای منوهای افقی است:

مثال

li {
  display: inline;
}

مشاهدهٔ نتیجه

نکته: تنظیم ویژگی display یک عنصر تنها نحوه نمایش عنصر را تغییر می‌دهد، نه نوع عنصر را؛ بنابراین یک عنصر درون خطی با ویژگی display: block; اجازه ندارد که عنصر دیگری از نوع بلوک در درون خود داشته باشد.

مثال زیر عناصر <span> را همانند عناصر بلوک نمایش می‌دهد.

مثال

span {
  display: block;
}

مشاهدهٔ نتیجه

مثال زیر عناصر <a> را همانند عناصر بلوک نمایش می‌دهد.

مثال

a {
  display: block;
}

مشاهدهٔ نتیجه

مخفی کردن یک عنصر - display:none یا visibility:hidden؟

مخفی کردن یک عنصر می‌تواند با تنظیم ویژگی display برابر با none انجام شود. عنصر مخفی خواهد شد، و صفحه طوری نمایش داده می‌شود که گویی عنصر در آنجا وجود ندارد:

مثال

h1.hidden {
  display: none;
}

مشاهدهٔ نتیجه

همچنین visibility:hidden; نیز عنصر را مخفی می‌کند.

اما، عنصر همچنان فضا را مانند قبل اشغال خواهد کرد. عنصر مخفی خواهد شد، اما همچنان روی چیدمان تأثیر می‌گذارد:

مثال

h1.hidden {
  visibility: hidden;
}

مشاهدهٔ نتیجه

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

این مثال تفاوت دستور؛ display:none را در برابر؛ visibility:hidden را نمایش می‌دهد.

استفاده از CSS با javascript برای نمایش محتوا

این مثال نحوه استفاده از CSS و Javascript را برای نمایش یک عنصر هنگام کلیک برروی آن نمایش می‌دهد.

ویژگی‌های Display/Visibility در CSS

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

« صفحهٔ قبل

صفحهٔ بعد »