هذا الدرس من الدورة التدريبية: دورة تدريبية لغة CSS لإنشاء تصاميم وتنسيق صفحات الإنترنت
الدرس: كيفية تطبيق خاصية Overflow and Position Fixed.
المدة: 5 دقائق
وصف مختصر:
تعرف على خصائص CSS overflow وposition fixed لتثبيت العناصر في مكان ثابت والتحكم بالمحتوى خارج حدود العناصر.
وصف الدرس
تعلم CSS: خصائص Overflow وPosition Fixed
في هذه الدرس، سنتعلم كيفية استخدام خصائص CSS لإدارة المحتوى داخل وخارج حدود العناصر. هذه المفاهيم ضرورية لتصميم صفحات ويب احترافية وجذابة.
ما هي خاصية Overflow؟
خاصية
overflow
تتحكم في كيفية عرض المحتوى الذي يتجاوز حدود العنصر الأب:- إذا كان هناك جزء من المحتوى يتجاوز حدود العنصر الأب، يمكننا استخدام
overflow: hidden;
لإخفاء هذا الجزء. - لإخفاء المحتوى فقط على المحور الأفقي، نستخدم
overflow-x: hidden;
. - لإخفاء المحتوى فقط على المحور الرأسي، نستخدم
overflow-y: hidden;
.
ما هي خاصية Position Fixed؟
خاصية
position: fixed;
تُستخدم لتثبيت العنصر في مكان ثابت على الشاشة، بغض النظر عن التمرير أو موقعه في الصفحة:- العنصر المثبت سيبقى دائمًا مرئيًا في نفس المكان على الشاشة.
- يمكننا تحديد مكان العنصر المثبت باستخدام خصائص مثل
top
أوbottom
أوleft
أوright
.
فوائد Position Fixed
- إنشاء قوائم تنقل ثابتة.
- عرض رسائل تنبيه أو نوافذ منبثقة ثابتة.
- تصميم عناصر مميزة مثل الأزرار العائمة.
لماذا هذا الدرس مهم؟
تعلم هذه الخصائص سيمنحك القدرة على تحسين تصميم صفحات الويب الخاصة بك، مما يجعلها أكثر مرونة وجاذبية وسهولة في الاستخدام.
ابدأ الآن واحصل على شهادتك!
انضم إلى دبلومة تطوير الويب الشاملة الخاصة بنا وتعلم المزيد عن CSS وخصائصها. مع كل درس، ستقترب خطوة من أن تصبح مطور ويب محترف مع شهادة معتمدة.
الفيديوهات
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و الفيديوهات
فيديو الدرس التعليمي كيفية تطبيق خاصية Overflow and Position Fixed.
المصادر
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و المصادر
ملفات السي اس اس اكواد تنسيق عناصر صفحة الويب لهذا الدرس
ملفات html اكواد تنسيق عناصر صفحة الويب لهذا الدرس
ملحقات ال PDF
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و ملحقات ال PDF
كتاب شرح مساعد لفهم Position,opacity,overflow,mouse events
الدروس والاختبارات لتعلم هذه الدورة التدريبية : دورة تدريبية لغة CSS لإنشاء تصاميم وتنسيق صفحات الإنترنت