درس CSS: العرض والارتفاع للعناصر

في هذا الدرس من دبلومة تطوير الويب، سنتعرف على واحدة من أهم مفاهيم التصميم باستخدام CSS وهي كيفية تحديد العرض والارتفاع للعناصر.

ما هو الحجم (Sizing)؟

الحجم هو كيفية تحديد أبعاد العناصر على صفحة الويب، من حيث العرض (width) والارتفاع (height). لكل عنصر في المتصفح حجم افتراضي، ولكن يمكننا تخصيص هذه الأبعاد باستخدام CSS للحصول على التحكم الكامل في تصميم الصفحة.

ما هو العرض والارتفاع لكل عنصر في المتصفح؟

لكل عنصر في المتصفح عرض وارتفاع افتراضي يعتمد على نوع العنصر نفسه. بعض العناصر مثل img تحتاج إلى تحديد عرض وارتفاع معينين لتجنب تشوه الصور.

ما هو العرض الافتراضي لكل عنصر؟

العرض الافتراضي للعناصر يختلف باختلاف نوعها. على سبيل المثال، <div> يأخذ عرض الصفحة بالكامل افتراضيًا، بينما بعض العناصر الأخرى مثل img و<p> لها عرض تلقائي حسب محتواها.

كيفية تحديد العرض لكل عنصر

يمكننا تحديد العرض لكل عنصر باستخدام خاصية width في CSS، مثل:

img {

    width: 100px;

}

هذه القاعدة ستجعل الصورة ذات عرض 100 بكسل فقط.

كيفية تحديد الارتفاع لكل عنصر

بنفس الطريقة، يمكننا استخدام خاصية height لتحديد ارتفاع أي عنصر:

h1 {

    width: 300px;

    height: 500px;

    background-color: #f00;

}

هذه القاعدة تجعل العنوان <h1> يأخذ عرض 300 بكسل وارتفاع 500 بكسل مع خلفية حمراء.

لماذا يعتبر تحديد العرض والارتفاع مهمًا؟

تحديد الأبعاد يساعد على تحسين تصميم الويب، ويوفر أفضل تجربة للمستخدمين عن طريق جعل الصفحات أكثر تنظيمًا وجمالية. كما أنه ضروري لضمان تناسق عناصر الصفحة عبر مختلف الأجهزة والشاشات.

ابدأ رحلتك في تعلم CSS معنا الآن!