50درصد تخفیف سورس فروشگاهی دیجی کالا + اپلیکیشن اندروید تا پایان این هفته - کد تخفیف : off50
با تخفیف میخرم

آموزش CSS – خصوصیت visibility در CSS

  • آپدیت شده در تاریخ

آموزش CSS

در جلسه قبل از آموزش 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 آشنا می شویم.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

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

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران

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

    دوره های آموزشی

    می خواهید صفر تا صد HTML,CSS را یاد بگیرید ؟

    50% تخفیف ویژه
    فقط 144 هزار تومان

    برای دریافت آموزش طراحی سایت با پروژه قالب فروشگاه روی دکمه زیر بزنید
    می خواهم طراحی سایت را یاد بگیرم
    close-link