العرض والارتفاع

جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 37 من 76.

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

إليك الصيغة الأساسية لاستخدام خاصيتي width و height:

selector {
    width: value;
    height: value;
}

width: عرض منطقة محتوى العنصر.

height: ارتفاع منطقة محتوى العنصر.

value: القيمة المطلوبة للعرض أو الارتفاع، والتي يمكن تحديدها بالبكسل (px)، أو ems (em)، أو النسب المئوية (%)، أو وحدات CSS صالحة أخرى. يمكنك أيضاً استخدام الكلمة المفتاحية auto للسماح للمتصفح بحساب العرض أو الارتفاع تلقائياً بناءً على المحتوى.

على سبيل المثال:

div {
    width: 300px;
    height: 200px;
}

img {
    width: 100%;
    height: auto;
}

في هذا المثال، تمتلك جميع عناصر <div> عرضًا يبلغ 300px وارتفاعًا يبلغ 200px، بينما تمتلك جميع عناصر <img> عرضًا يشغل 100% من عرض العنصر الأب، وارتفاعًا يتم حسابه تلقائيًا للحفاظ على نسبة العرض إلى الارتفاع.

التحدي

سهل

لقد تم إعطاؤك مستند HTML يحتوي على قسم (<div>) وصورة (<img>). مهمتك هي استخدام خاصيتي width و height لضبط أبعاد هذه العناصر. اتبع الخطوات أدناه:

اكتب قاعدة CSS تستهدف عنصر <div>. اضبط الـ width على 400px والـ height على 250px.
اكتب قاعدة CSS تستهدف عنصر <img>. اضبط الـ width على 300px والـ height على auto.

ورقة مرجعية

تتحكم خصائص العرض (width) و الارتفاع (height) في أبعاد منطقة محتوى العنصر:

selector {
    width: value;
    height: value;
}

يمكن تحديد القيم بوحدات البكسل (px)، أو ems (em)، أو النسب المئوية (%)، أو استخدام auto للحساب التلقائي:

div {
    width: 300px;
    height: 200px;
}

img {
    width: 100%;
    height: auto;
}

جرّب بنفسك

<html>
<head>
    <title>Width and Height</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div style="border:2px solid black;">This is a division.</div>
    <img src="https://img.freepik.com/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-54865.jpg" alt="Image">
</body>
</html>