css

صفت display – آموزش CSS

صفت display یکی از پر کاربردترین صفت ها در css می باشد، که نحوه ی نمایش را نشان می دهد.


این صفت برای چگونگی نمایش ،نمایش و یا عدم نمایش یک بخش به کار می رود. شما می توانید با این صفت بخش های مورد نظر را در کنار هم نمایش دهید و یا اصلا نمایش داده نشود،و فقط در شرایط خاص مانند hover ( زمانی که نشانگر موس روی آن قرار گیرد) نمایش داده شود. این صفت ویژگی های زیادی دارد که ما به برخی از آن ها می پردازیم:

ویژگی display=inline

این ویژگی باعث می شود که عنصر در خطی که قرار می گیرد به اندازه ی مورد نیاز خود فضا را اشغال کند و نه بیشتر. بعضی از تگ ها این ویژگی را به صورت پیشفرض دارا می باشند مانند span و…

ویژگی display=block

این ویژگی بر عکس ویژگی بالا کل خط را اشغال می کند و نمی گذارد عنصر دیگری در کنارش قرار گیرد، و تمامی خط را برای خودش در نظر می گیرد. تگ هایی هستند که این ویژگی را به صورت پیش فرض دارند مانند div ,h1 و …

ویژگی display=inline-block

این ویژگی هردو خاصیت را دارد به این معنا که عنصر خاصیت block را می گیرد ولی در یک سطح قرار می گیرد و عناصری که این خاصیت را دارند نیز در همان سطح و در کنار آن می توانند قرار گیرند.

ویژگی display=table

این ویژگی خواص تگ table را به عنصر می دهد . این ویژگی چندین زیر مجموعه نیز دارد که عبارتند از:

الف) ویژگی display = table-caption

خاصیت تگ caption را به عنصر می دهد.

ب) ویژگی display = table-column-group

خاصیت تگ colgroup را به عنصر می دهد.

پ) ویژگی display = table-header-group

خاصیت تگ thead را به عنصر می دهد.

ت) ویژگی display = table-footer-group

خاصیت تگ tfoot را به عنصر می دهد.

ث) ویژگی display = table-row-group

خاصیت تگ tbody را به عنصر می دهد.

ج) ویژگی display = table-cell

خاصیت تگ td را به عنصر می دهد.

چ) ویژگی display = table-column

خاصیت تگ col را به عنصر می دهد.

ح)ویژگی display = table-row

خاصیت تگ tr را به عنصر می دهد.

ویژگی display = inherit

این ویژگی به پدر عنصر توجه می کند.یعنی خاصیتی که پدر عنصر مورد نظر داشته باشد، عنصر نیز به ارث می برد.

ویژگی display=none

این ویژگی عنصر را حذف(مخفی) می کند و در زمان یا تحت شرایط خاصی با استفاده از ویژگی بلاک نمایش داده می شود.

ویژگی display=run-in

این ویژگی ، ویژگی اولیه ی عنصر را به آن باز می گرداند. همان طور که گفته شد بعضی عناصر مانند div و … display آن ها به صورت پیش فرض بلاک می باشد، و یا تگ span که display آن به صورت پیش فرض inline می باشد.

ویژگی display=list-item

این ویژگی خاصیت تگ li را به عنصر می دهد. امروزه افراد کمی یا شاید هم بتوان گفت کسی دیگر از این ویژگی استفاده نمی کند و از همان تگ li استفاده می شود.

Related Articles

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این مطلب را از دست ندهید!

Close
Close