آموزش استفاده از ویژگی display در CSS

Ratings
(0)

ویژگی display مهمترین ویژگی در CSS ،برای کنترل چینش(layout) است.

ویژگی display در CSS

از ویژگی display برای مشخص کردن شیوه ی نمایش یک عنصر در صفحه استفاده می شود. هر عنصر HTML، یک مقدار پیش فرض برای ویژگی display دارد که به نوع آن عنصر بستگی دارد. مقدار پیش فرضِ dispaly برای اکثر عناصر، مقدار block یا inline است. از ویژگی diaplay برای تغییر رفتار نمایشیِ(display behavior) عناصر HTML استفاده می شود.

عناصر بلوکی(Block-level) در CSS

یک عنصر بلوکی(block-level)، همیشه در یک خط جدید نمایش داده می شود و تمام عرض(width) در دسترس خود را اشغال می کند (یعنی تا جایی که می تواند، به سمت راست و چپ کشیده می شود).

این عنصر <div> یک عنصر بلوکی است

 چند نمونه از عناصر بلوکی(block-level) را در زیر مشاهده می کنید:

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

عناصر درون خطی(inline) در CSS

یک عنصر درون خطی(inline)، در یک خط جدید قرار نمی گیرد و تنها به میزان ضروری، عرض(width) خود را اشغال می کند.

این یک عنصر درون خطی <span> درونیک پاراگراف است.

 چند مثال از عناصر درون خطی:

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

مقادیر ویژگی display در CSS

ویژگی display چندین مقدار را می پذیرد:

مقدار توضیح
inline

یک عنصر را به صورت یک عنصر درون خطی نمایش می دهد.
block

یک عنصر به صورت بلوکی(block) نمایش می دهد.
contents

باعث می شود

Makes the container disappear, making the child elements children of the element the next level up in the DOM
flex Displays an element as a block-level flex container
grid Displays an element as a block-level grid container
inline-block Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values
inline-flex Displays an element as an inline-level flex container
inline-grid Displays an element as an inline-level grid container
inline-table

عنصر مورد نظر به صورت یک جدول inline-level نمایش داده می شود.
list-item

باعث می شود عنصر مورد نظر مانند یک عنصر <li> رفتار کند.

run-in

بسته به محتوا، یک عنصر را به صورت بلوکی(block) یا درون خطی(inline) نمایش می دهد.
table

باعث می شود عنصر مورد نظر مانند یک عنصر <table> رفتار کند.
table-caption

باعث می شود عنصر مورد نظر مانند یک عنصر <caption> رفتار کند.
table-column-group

باعث می شود عنصر مورد نظر مانند یک عنصر <colgroup> رفتار کند.
table-header-group

باعث می شود عنصر مورد نظر مانند یک عنصر <thead> رفتار کند.
table-footer-group

باعث می شود عنصر مورد نظر مانند یک عنصر <tfoot> رفتار کند.
table-row-group

باعث می شود عنصر مورد نظر مانند یک عنصر <tbody> رفتار کند.
table-cell

باعث می شود عنصر مورد نظر مانند یک عنصر <td> رفتار کند.
table-column

باعث عنصر مورد نظر مانند یک عنصر <col> رفتار کند.
table-row

باعث می شود که عنصر مورد نظر مانند یک عنصر <tr> رفتار کند.
none

باعث می شود که عنصر مورد نظر کاملاً حذف شود.
initial

ویژگی مورد نظر را برابر با مقدار پیش فرض خود قرار می دهد.
inherit

ویژگی مورد نظر را از عنصر والد خود به ارث می برد.

 

 Display: none;

از دستور  display: none; به طور متداول به همراه جاوا اسکریپت، برای مخفی کردن و نمایش عناصر بدون اینکه آنها را حذف کنیم یا دوباره ایجاد کنیم، استفاده می شود. اگر می خواهید بدانید که این کار چگونه امکان پذیر است، به آخرین مثالی که در این صفحه قرار داده ایم توجه کنید. عنصر <script> به طور پیش فرض، از مقدار display: none; استفاده می کند.

برای نمایش پنل، اینجا کلیک کنید

این پنل حاوی یک عنصر <div> است که به طور پیش فرض مخفی است(display: block;).

این پنل، با استفاده از css استایل دهی شده است و ما با استفاده از جاوا اسکریپت آن را نمایش می دهیم (display: block;).

رونویسی کردن مقدار پیش فرض برای ویژگی display

همان طور که ذکر شد، هر عنصری دارای یک مقدار display است. اما ما می توانیم آن را رونویسی(override) کنیم. تغییر دادن یک عنصر inline به یک عنصر block یا برعکس، می تواند برای اینکه صفحه جور دیگری به نظر برسد و همچنان از استانداردهای وب پیروی کند، مفید باشد. یک مثال متداول این است که عناصر درون خطی(اینلاین) <li> را برای منوهای افقی مورد استفاده قرار دهیم.

مثال شماره 1

li {
  display: inline;
}
امتحان کنید

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

مثال شماره 2

span {
  display: block;
}
امتحان کنید

 در مثال زیر، عناصر <a> به صورت عناصر بلوکی( block) در آمده اند:

مثال شماره 3

a {
  display: block;
}
امتحان کنید

 

برای مخفی(hide) کردن یک عنصر  از display:none استفاده کنیم یا از visibility:hidden

display:none

Italy

visibility:hidden

Forest

Reset

Lights


برای مخفی کردن(Hiding) یک عنصر، باید ویژگی display را برای آن عنصر، برابر با none قرار دهیم. با انجام این کار، عنصر مورد نظر مخفی می شود و صفحه نمایش می یابد، انگار که این عنصر وجود ندارد.

مثال شماره 4

h1.hidden {
  display: none;
}
امتحان کنید

 دستور visibility:hidden نیز باعث مخفی شدن یک عنصر می شود. اما این عنصر بازهم فضای قبلی را اشغال می کند. عنصر مورد نظر مخفی(hidden) است اما روی چینش اثر می گذارد:

مثال شماره 5

h1.hidden {
  visibility: hidden;
}
امتحان کنید

مثال بیشتر

تفاوت بین display: none و visibility: hidden

این مثال تفاوت بین display: none و visibility: hidden

نمایش تعداد بیشتری از نوع های ویژگی display

این مثال تعداد بیشتری از نوع های dispaly را نشان می دهد.

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

این مثال نشان می دهد که چگونه از CSS و جاوا اسکریپت برای نمایش یک عنصر با کلیک استفاده کنیم.

 ویژگی های display و visibility در CSS

توضیح ویژگی

مشخص می کند که عنصر مورد نظر چگونه باید نمایش یابد.

 display

مشخص می کند که آیا یک عنصر باید قابل مشاهده(visible) باشد یا نه.

 visibility

 

  • بازدید: 199

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.

ارسال