هذا الدرس من الدورة التدريبية: دورة تدريبية لغة CSS لإنشاء تصاميم وتنسيق صفحات الإنترنت
الدرس: الحجم بالنسبة المئوية في CSS والتحكم بعرض الصور
المدة: 5 دقائق
وصف مختصر:
وصف الدرس
مقدمة عن تحديد الحجم بالنسبة المئوية في CSS
في هذا الدرس، سنتعرف على واحدة من أهم تقنيات تصميم صفحات الويب باستخدام CSS، وهي ضبط الحجم بالنسبة المئوية للعناصر. يعد التحكم في حجم الصور والعناصر الأخرى باستخدام النسبة المئوية أداة قوية لتصميم صفحات ويب متجاوبة ومتناسقة.
كيفية تحميل الصور من المجلد الخلفي
من الضروري معرفة كيفية تنظيم الملفات والمجلدات عند بناء موقع ويب. في هذا المثال، نعرض كيفية تحميل الصور من مجلد خلفي باستخدام خاصية src
في وسم <img>
.
ضبط الحجم الأقصى للصورة في صفحة الويب
إحدى الطرق الشائعة لتحسين استجابة الصور في صفحات الويب هي استخدام خاصية max-width
لتحديد حجم الصورة الأقصى بما يتناسب مع تصميم الصفحة. يمنحك ذلك القدرة على منع تجاوز الصورة لحجم الشاشة، خاصة عند تصفح الموقع من أجهزة مختلفة مثل الهواتف المحمولة.
كيفية ضبط الحجم الأقصى لأي عنصر كنسبة مئوية
في بعض الأحيان نرغب في ضبط حجم الأقسام أو العناصر الأخرى في الصفحة ليتناسب مع عرض المتصفح. يمكنك استخدام خاصية max-width
مع القيم النسبية مثل 30%
لجعل العناصر مرنة ومتجاوبة مع حجم الشاشة، مما يوفر تجربة مستخدم ممتازة على الأجهزة المختلفة.
كود المثال:
<section>
<div><img src="../test-image.png"/></div>
<div><img src="../test-image.png"/></div>
<div><img src="../test-image.png"/></div>
</section>
<style>
img {
max-width: 100px;
}
section {
max-width: 30%;
}
</style>
أهمية استخدام النسبة المئوية في التصميم
باستخدام النسب المئوية لتحديد الأحجام، يمكنك إنشاء تصميمات ويب مرنة تتكيف مع أحجام الشاشات المختلفة، مما يجعل صفحاتك أكثر احترافية ومتناسقة. هذه التقنية مفيدة بشكل خاص لتجنب تجاوز الصور أو العناصر الأخرى لحجم الشاشة.
الخلاصة
يعد فهم كيفية استخدام النسبة المئوية لتحديد حجم العناصر في CSS أمراً أساسياً لبناء مواقع ويب مرنة ومتجاوبة. استمر في تطوير مهاراتك في CSS للحصول على نتائج أفضل ولتصبح محترفاً في تصميم واجهات المستخدم.
الفيديوهات
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و الفيديوهات
فيديو الدرس التعليمي الحجم بالنسبة المئوية في CSS والتحكم بعرض الصور
المصادر
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و المصادر
أوامر بناء صفحة ويب لتنسيق عرض الصور
أوامر تنسيق حجم للصور
ملحقات ال PDF
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و ملحقات ال PDF
ملف الشرح المساعد لخصائص الحجم في موقع الإنترنت
الدروس والاختبارات لتعلم هذه الدورة التدريبية : دورة تدريبية لغة CSS لإنشاء تصاميم وتنسيق صفحات الإنترنت