ما هي لغة CSS ؟

في CSS، تُستخدم الخاصيتان العرض width و الارتفاع height للتحكم في "أبعاد العناصر" (dimensions of elements) على صفحة الويب.

يمكن تحديد هذه الخصائص بوحدات مختلفة، مثل "البكسل" (pixels) - px , والنسب المئوية % , و"وحدات منطقة العرض" (viewport units) - (vw, vh) , وغيرها.

تُحدد الخاصية width عرض العنصر. وفي حال عدم تحديد العرض، تُضبط القيمة الافتراضية على auto ; مما يتيح للمتصفح تحديد عرض العنصر بناءً على محتواه, والعنصر "الأب" (parent) , و"نوع العرض" (display type). وبالنسبة لعنصر div , تؤدي القيمة width: auto إلى تمدد العنصر ليملأ العرض الكامل "للحاوية الأب" (parent container) .

تُحدِّد الخاصية height ارتفاع العنصر. وبالمثل، تكون قيمة الارتفاع auto (تلقائية) بشكل افتراضي، مما يعني أنها تتكيف مع المحتوى الموجود بداخل العنصر.

إليك مثال يستخدم خاصيتي العرض width والارتفاع height :

<head>
 <style>
  .box {
   width: 100px;
   height: 100px;
   background-color: skyblue;
  }
 <style>
</head>
<body>
 <div class="box"></div>
</body>
        

معاينة:

في هذا المثال، لدينا عنصر div يحمل الفئة (class) المسماة box . سيشغل هذا العنصر مساحة عرضها وارتفاعها "100 بكسل" 100px ، وسيكون "لون خلفيته" (background color) أزرق سماوياً skyblue .

تُعد "البكسلات" (Pixels) وحدة قياس "ثابتة الحجم" (fixed-size) في CSS، وتوفر تحكماً دقيقاً في "الأبعاد" (dimensions).

تُحدد الخاصية min-width الحد الأدنى لعرض العنصر; فحتى لو كان المحتوى الداخلي أصغر، لن يتقلص العنصر إلى ما دون هذه القيمة.

تُحدد الخاصية min-height الحد الأدنى لارتفاع العنصر، وتضمن عدم انخفاض ارتفاعه عن القيمة المحددة.

إليك مثال:

<head>
 <style>
  .box {
   width: 50px;
   min-width: 100px;
   height: 50px;
   min-height: 100px;
   background-color: lightcoral;
  }
 <style>
</head>
<body>
 <div class="box"></div>
</body>
        

معاينة:

يوضح المثال أعلاه كيفية عمل min-width و min-height .

على الرغم من ضبط "عرض" width الصندوق و"ارتفاعه" height عند "50 بكسل" 50px , إلا أن أبعاده الفعلية ستكون "100 بكسل في 100 بكسل" (100px By 100px) ; وذلك لأن الحد الأدنى للعرض min-width والحد الأدنى للارتفاع min-height مضبوطان عند "100 بكسل" 100px , وهي قيم أكبر من "العرض" width و"الارتفاع" height المحددين.

تذكر أنه إذا كانت قيمتا min-width أو min-height أكبر من قيمتي "العرض" width أو "الارتفاع" height , فإنهما ستطغيان على القيم الأصغر; وهذا يضمن عدم صغر حجم العناصر بشكل مفرط، وهو أمر مهم للحفاظ على تصميم متسق وقابل للاستخدام.

تُحدِّد الخاصية max-width أقصى عرض يمكن أن يصل إليه العنصر, حتى وإن توفرت مساحة كافية ليكون أعرض من ذلك.

تُحدِّد الخاصية max-height أقصى ارتفاع يمكن أن يصل إليه العنصر، بغض النظر عن حجم المحتوى.

إليك مثال:

<head>
 <style>
  .box {
   width: 200px;
   max-width: 150px;
   height: 200px;
   max-height: 150px;
   background-color: lightgreen;
  }
 <style>
</head>
<body>
 <div class="box"></div>
</body>
        

معاينة:

يوضح المثال أعلاه كيف تتجاوز الخاصيتان max-width و max-height الخاصيتين width و height. فعلى الرغم من ضبط أبعاد الصندوق لتكون (200px By 200px) , إلا أن أبعاده الفعلية ستكون (150px By 150px) ; وذلك لأن القيم المحددة لـ max-width و max-height هي 150px ، وهي قيمة أصغر.

تذكر أنه عندما تكون قيمتا max-width أو max-height أصغر من width أو height , فإن لهما الأولوية; ويُعد هذا أمراً مهماً للتحكم في الحد الأقصى لحجم العناصر في تخطيطاتك.

تمنح CSS الأولوية لـ min-width و min-height على width و height ; بينما تعمل max-width و max-height على تقييد الأبعاد إذا تجاوزت القيم الحدود المحددة لهما.

على سبيل المثال, إذا قمت بتعيين العرض width عند 600px والحد الأقصى للعرض max-width عند 500px , فسيقتصر عرض العنصر على 500px ; إذ تتجاوز قيمة max-width الإعداد الخاص بالعرض الأكبر, مما يُبقي العنصر ضمن الحد الأقصى المحدد للحجم.

يضمن ذلك بقاء العناصر ضمن نطاقات الحجم المطلوبة، بغض النظر عن قيم العرض والارتفاع القياسية.