در جلسه قبل از آموزش CSS با خصوصیت Display در CSS آشنا شدید. در این بخش قصد داریم شما را با خصوصیت visibility در CSS آشنا کنیم.
خصوصیت visibility در CSS پنهان یا قابل نمایان بودن یک المان را مشخص می کند.
کنترل قابلیت دیده شدن المان:
شما می توانید از خصوصیت visibility در CSS برای نمایش یا عدم نمایش المان استفاده کنید. این خصوصیت یکی از مقادیر زیر را اتخاذ می کند:
| مقدار | توضیح |
| visible | مقدار پیش فرض است. جعبه و محتوای آن دیده می شود. |
| hidden | جعبه و محتوای آن نامرئی است اما طرح صفحه را تحت تاثیر قرار می دهد. |
| collapse | این مقدار باعث می شود کل سطر و ستون از نمایش حذف شود. این مقدار برای سطر، گروه سطرها، ستون و گرون ستون مورد استفاده قرار می گیرد. |
| inherit | این گزینه مشخص می کند که مقدار خصوصیت visibility باید از المان والد به ارث برده شود. |
قانون استایل دهی visibility: collapse المان جدول داخلی را حذف می کند اما بر روی طرح جدول اثر نمی گذارد.
نکته: اگر قانون استایل دهی visibility: collapse برای سایر المان ها به جای المان جدول مشخص شده باشد، باعث می شود رفتار مشابهی با hidden داشته باشد.
ویژگی visibility در برابر display :
خصوصیت های visibility (نمایش ) و display (دیده شدن) معمولا یک موضوع واحد به نظر می رسند اما در واقع تفاوت هایی دارند.
- خصوصیت visibility: hidden المان را پنهان می کند اما هنوز فضایی را در طرح به خود اختصاص می دهد. المان پدر جعبه Hidden اگر قابلیت دیده شدن آن ها بر روی visible باشد دیده خواهند شد.
- خصوصیت display: none نمایش را خاموش می کند و المان را به طور کلی از سند پاک می سازد. این گزینه هیچ فضایی نمی گیرد. المان پدر نیز نمایشش خاموش می شود حتی اگر خصوصیت نمایش آن بر روی مقدار دیگری تنظیم شده باشد.
امیدوارم در این بخش آموزش CSS, از خصوصیت visibility در css نهایت استفاده را برده باشید.
در بخش بعدی با ویژگی position در CSS آشنا می شویم.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
