هذا الدرس من الدورة التدريبية: دورة تدريبية لغة CSS لإنشاء تصاميم وتنسيق صفحات الإنترنت
الدرس: مقدمة فى تنسيق عناصر هيكل صفحة الويب
المدة: 5 دقائق
وصف مختصر:
وصف الدرس
مقدمة شاملة عن Display وFloat والرؤية والمؤشر في CSS
هل تسعى لتعلم CSS بطريقة عملية؟ في هذا الدرس، ستتعرف على خصائص أساسية تُستخدم لتصميم صفحات ويب احترافية، بما في ذلك:
- ما هي أنواع display وكيفية استخدام
inlineوblockوinline-block. - كيفية استخدام float لإعداد العناصر على اليمين أو اليسار أو عدم استخدامها.
- شرح خاصية visibility للتحكم في عرض أو إخفاء العناصر.
- استخدام cursor وpointer-events لتحسين تجربة المستخدم.
كيفية استخدام Display لجعل الصورة بجانب النص
لتنسيق النصوص والصور معًا، يمكننا استخدام خاصية
display: inline وinline-block. المثال التالي يوضح ذلك:
<p>
هذا نص مثال <img src="image.jpg" alt="مثال"> بجانب الصورة.
</p>
إنشاء أعمدة داخلية باستخدام Float
يمكنك إنشاء تصميم من أعمدة بجانب بعضها البعض باستخدام خاصية
float. المثال التالي يوضح كيفية إنشاء عمودين بجانب بعض:
<div style="float: left; width: 50%;">
محتوى العمود الأول
</div>
<div style="float: right; width: 50%;">
محتوى العمود الثاني
</div>
ولا تنسَ استخدام خاصية
clear عند الحاجة.تحسين تجربة المستخدم بالمؤشرات (Cursor) والأحداث (Pointer Events)
لجعل صفحات الويب أكثر تفاعلية، يمكننا تعديل شكل المؤشر باستخدام
cursor:
<button style="cursor: pointer;">اضغط هنا</button>
ويمكن التحكم في تفاعل المستخدم مع العناصر باستخدام
pointer-events.الفيديوهات
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و الفيديوهات
فيديو الدرس التعليمي مقدمة فى تنسيق عناصر هيكل صفحة الويب
المصادر
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و المصادر
أوامر تنسيق عناصر هيكل صفحة الويب
ملحقات ال PDF
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و ملحقات ال PDF
كتاب شرح مساعد لفهم أساسيات Css :Float .Display,filter,min_width,min_heightH
- 230 دقيقة من الفيديوهات التفاعلية الحصرية
- 70 مصدر إضافي
- 41 ملحقات PDFs
- 3 تطبيق نظري وعملي
- الوصول على جميع الأجهزة
- وصول مدى الحياة
- شهادة أوروبية لإتمام الدراسة
- ا لحصول على شهادة دبلوم موثقة
للوصول إلى الفيديوهات والمصادر والملحقات الدراسية والمواد التعليمية لدراسة برنامج
كورس تعلم لغة CSS لإنشاء تصاميم وتنسيق مواقع الإنترنت
اضغط هنا ابدأ التعلم
أيضاً عند أداء الاختبارات بنجاح سوف تحصل على الشهادة الأوروبية المعتمدة في إتمام الدراسة والتأهل لطلب الشهادة الدولية في هذا البرنامج
الدروس والاختبارات لتعلم هذه الدورة التدريبية : دورة تدريبية لغة CSS لإنشاء تصاميم وتنسيق صفحات الإنترنت
دورات تدريبية أخرى في برمجة
دبلوم تطوير تطبيقات وشبكات وخوادم الإنترنت Java
دبلوم بناء وتطوير تطبيقات وشبكات الإنترنت شاهد رأي مهندس علوم الحاسب ا. نائل سكر شاهد المزيد من الآراء دبلوم تطوير تطبيقات...
دبلوم بناء مواقع الإنترنت للمبتدئين تعلم من الصفر HTML وCSS وJavaScript
ابدأ رحلتك في تطوير مواقع الإنترنت مع دبلوم شامل للمبتدئين. تعلم HTML وCSS وJavaScript من الصفر واكتسب المهارات الأساسية لبناء مواقع احترافية. دورة مصممة لتدعمك في كل خطوة على الطريق.
مقالات ذات صلة
فهم شبكات الإنترنت وخوادم الويب: مقدمة شاملة
الإنترنت هو أحد الابتكارات الأكثر تأثيرًا في العالم الحديث، حيث يلعب دورًا أساسيًا في تقريب العالم وجعل المعلومات والمعرفة في متناول الجميع....
التعامل مع البيانات وواجهة المستخدم باستخدام JavaScript
هل تساءلت يومًا عن كيفية التحكم في البيانات والتفاعل مع واجهة المستخدم في صفحات الويب؟ 🤔 في عالم البرمجة الحديثة، يعد فهم...
أساسيات لغة HTML لبناء صفحات ويب فعالة
تُعد متصفحات الويب (Web Browsers) واحدة من أهم الأدوات في عالم الإنترنت، حيث تُمكّن المستخدمين من تصفح مواقع الويب والوصول إلى المعلومات...
