خصوصیت display
مثال (خصوصیت display)
نمایش عنصر <P> به عنوان یک عنصر inline:
{
display:inline;
}
تعریف و کاربرد
با استفاده از خاصیت display می توانیم نوع boxی که برای عنصر به کار رفته است را مشخص کنیم.
| مقدار پیشفرض | inline |
|---|---|
| ارث بری | خیر |
| نسخه | CSS1 |
| JavaScript ساختار | object.style.display="block" |
پشتیبانی مرورگرها
تمام مرورگرهای اصلی، خصوصیت display را پشتیبانی می کنند.
توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقادیر "inline-table", "table", "table-caption", "table-cell", column", "table-column-group", "table-row", "table-row-group", , و "inherit" را پشتیبانی نمی کند.
IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.
مقدارهای خصوصیت
| مقدار | توضیحات | نمایش دادن |
|---|---|---|
| inline | عناصر را به صورت inline نمایش می دهد (مانند <span>). این مقدار پیش فرض است. | نمایش دادن » |
| block | یک عنصر را به صورت block نمایش می دهد (مانند block). | نمایش دادن » |
| inline-block |
یک ظرف inline تعریف می کند که عناصر داخل آن به صورت block نمایش داده می شود. |
|
| inline-table |
عنصر را به صورت جدول inline نمایش می دهد. |
|
| list-item |
عناصر را مانند عنصر li در نظر می گیرد. |
نمایش دادن » |
| run-in |
یک عنصر بسته به محتوا، یا به صورت block یا به صورت inline در نظر گرفته می شود. |
|
| 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 |
عنصر در هر صورت نشان داده نمی شود. |
نمایش دادن » |
| inherit |
مقدار خصوصیت display از عنصر والدش ارث بری می کند. |
بیاموزهای مرتبط
CSS Display (بیاموز CSS)
مثال - خودتان امتحان کنید
Using the inherit value
این مثال نحوه ی استفاده از مقدار inherit را نشان می دهد.
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 11310
دیدگاه‌ها
سلام و خسته نباشید.
میشه در مورد کاربرد مقدار table در خصوصیت display من رو راهنمایی کنید. اینکه عنصر را مانند یک عنصر جدول در نظر میگیرد در این مثال یعنی چی؟
ممنون.
سلام
به دو روش می توانید یک جدول را در صفحات وب استفاده نماییید:
1- استفاده از تگ table در HTML
2- استفاده از خصوصیات CSS
table { display: table }
tr { display: table-row }
thead { display: table-header-gr oup }
tbody { display: table-row-group }
tfoot { display: table-footer-gr oup }
col { display: table-column }
colgroup { display: table-column-gr oup }
td, th { display: table-cell }
caption { display: table-caption }
همانطور که در بالا مشاهده می کنید، به ازای هر کدام از تگ های مربوط به جدول، خصوصیت CSS معادل آن آورده شده است.
بنظر می رسد استفاده از روش دوم یعنی استفاده از خصوصیت های CSS برای پیاده سازی ساختار جدول، مناسب تر باشد و دلیل این موضوع این است که در روش اول یعنی استفاده از تگ table، تا زمانی که تمام محتوای جدول سمت کاربر لود نشود، کل جدول نمایش داده نمی شود. بعنوان مثال اگر داخل جدول، تصویر داشته باشیم، تا زمانی که عکس ها، سمت کاربر لود نشود، کل جدول نمایش داده نمی شود. اما در روش دوم این مشکل وجود ندارد.
سلام، آموزش خصوصیت Display عالی بود.