CSS Visibility
ظهور العنصر وإخفاؤه في لغة CSS
سوف تتعلم في هذا الدرس طريقة إخفاء وإظهار عناصر HTML داخل صفحة الويب عن طريق خاصية visibality في لغة CSS, وسنتعرف علي طريقة كتابة هذة الخاصية وجميع القيم التي تُستخدم معها.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
CSS Visibility
ظهور العنصر وإخفاؤه في لغة CSS
</>
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; }