CSS

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

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

التاريخ

18 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

2571

المواضيع

24
الشروحات chevron_left CSS Visibility chevron_left CSS
CSS Flex Box keyboard_arrow_down

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

مراجعة تقنية
Mostafa Hefny

Mostafa Hefny

CEO & Founder CloseTag

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

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


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

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


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

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

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

visibility:value;
CSS visibility values

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

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

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

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

CSS visibility visible

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

.visible
{
  visibility:visible;
}

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

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

CSS visibility hidden

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

.invisible
{
  visibility:hidden;
}
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات