انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 57
دورة لغة CSS

ظهور العنصر وإخفاؤه في لغة CSSCSS Visibility

سوف تتعلم في هذا الدرس طريقة إخفاء وإظهار عناصر HTML داخل صفحة الويب عن طريق خاصية visibality في لغة CSS, وسنتعرف علي طريقة كتابة هذة الخاصية وجميع القيم التي تُستخدم معها.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
3
الأمثلة
4
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
6,236
محتوى الدرس
في هذا الدرس 3تصفّح المواضيع

CSS Visibility ظهور العنصر وإخفاؤه في لغة CSS

تُستخدم خاصية visibility في لغة CSS لإخفاء العنصر أو إظهارة دون إلغاء مكانة من layout تقسيمة التصميم ويبقي مكانه فارغاً ولا يأتي عنصر أخر في هذا المكان مُطلقاً بعكس خاصية display مع القيمة none فأن العنصر سوف يختفي هو ومكانه ويأتي العنصر التالي في فكانة.


لماذا تُستخدم خاصية visibility في لغة CSS؟

  • لإخفاء العنصر أو إظهارة دون إلغاء مكانة ويبقي مكانه من layout تقسيمة التصميم.


قيم خاصية visibility في لغة CSS:

  • visible الوضع الأفتراضي وهو ظهور العنصر في مكانه داخل layout تقسيمة التصميم.
  • hidden تستخدم ليختفي العنصر من مكانه مع الأحتفاظ بمكانة داخل layout تقسيمة التصميم.
  • collapse أقرأ المزيد MDN.

CSS visibility syntax

طريقة كتابة خاصية visibility في لغة CSS.

HTML 
visibility:value;

CSS visibility values

قيم خاصية visibility في لغة CSS.

HTML 
visibility:visible|hidden|collapse|initial|inherit;

CSS visibility visible خاصية visibility مع القيمة visible في لغة CSS

تُستخدم خاصية visibility مع القيمة visible في لغة CSS ليظهر العنصر وهو الوضع الأفتراضي بدون إستخدام هذة الخاصية.

جرّب بنفسك

CSS visibility visible

خاصية visibility مع القيمة visible في لغة CSS.

HTML 
.visible
{
  visibility:visible;
}
جرّب بنفسك

CSS visibility hidden خاصية visibility مع القيمة hidden في لغة CSS

تُستخدم خاصية visibility مع القيمة hidden في لغة CSS لإخفاء العنصر مع الأحتفاظ بمكانة داخل layout التصميم.

جرّب بنفسك

CSS visibility hidden

خاصية visibility مع القيمة hidden في لغة CSS.

HTML 
.invisible
{
  visibility:hidden;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…