فاصلة
  • CSS
  • ?
    : ترتيب الدرس
  • 13
    عدد الدروس
  • ?
    أخر تحديث

العرض والأرتفاع في لغة CSS

في لغة CSS يوجد خواص تتحكم في عرض العنصر وارتفاعة , وتلك الخواص قابلة للتطبيق علي كل العناصر المتوفرة في لغة HTML ,مثلاً لو انت تمتلك صورة علي الموقع وتريد ان تتحكم في العرض او الأرتفاع الخاص بالصورة مثلاً , لو افترضنا بأن الحجم الطبيعي للصورة هو 1000*1000 ولكن أنت تريد  الصوره بحجم مختلف مثل 500*500 ,هنا يجب استخدام الخاصية height للتحكم في الأرتفاع والخاصية Widht للتحكم في العرض .

يمكن تطبيق الخواص علي اكثر من عنصر وليس الصور فقد ,بحيث يمكنك تطبيق الخواص علي ارتفاع وعرض div ,والأشكال التالية توضع مقاسات مختلفة لــ div بأستخدام الخاصية Height المسؤلة عن التحكم في ارتفاع العنصر

         

ومع ذلك يمكنا التحكم في عرض العنصر عن طريق الخاصية width المسؤلة عن تحديد عرض العنصر ,

           


max-width

خاصية max-width, هي خاصية مسؤولة عن تحديد اقصي أرتفاع للعنصر ,وسوف نقف قليلاً علي تلك النقطة لشرحها بالتفصيل ,ماذا لو كان موقعك سوف يتم استخدامة علي شاشات كبيرة ,في تلك الحالة ستحاول تحديد اقصي عرض للعنصر حتي لا يهدم التصميم علي تلك الشاشات ,ولشرح الفكرة بشكل اخر سنعتبر بأن العنصر هو شيء مطاطي يتمدد مع تمدد الشاشة وينكمش مع انكماش الشاشة ,وكان دور لغة CSS هنا ,هو توفير خاصية max-width لتحديد اقصي عرض لا يمكن تجاوزة حتي لو تمددت الشاشة وتجاوزت العرض المسموح به سوف يظل العنصر ثابت عند الوصول الي اقصي عرض ,وقد نقول بأن مطاطية العنصر سوف تنقطع عند اقصي max-width مسموح بة ,

max-width:50px;


max-height

كل ما ينطبق علي خاصية max-width ,ينطبق ايضاً علي خاصية max-height , بحيث أن الخاصية الأولي مسؤولة عن اقصي عرض ,والخاصية الثانية مسؤولة عن أقصي ارتفاع ,ومن هنا يمكننا تعين اقصي عرض Max-Widht وأقصي ارتفاع Max-height  ,الأن بتلك الخصائص يمكنك وضع حدود صارمة للعنصر لا يمكن أن يتعداها

max-height:50px;


min-widht

المقصود بكلمة min-width هو اقل عرض للعنصر , وفيما سبق تحدثنا بأن اقصي عرض بسبب الشاشات الكبيرة , ولكن اقل عرض سوف يكون بسبب الشاشات الصغيرة ,نعم بالفعل يوجد شاشات صغيرة يجب ان نقوم بتحديد اقصي عرض للعناصر حتي لا تختفي ويتطلب مايكرسكوب لرؤيتها , وسوف نوضح الفكرة عن طريق أفتراض وجود عنصر قمت بأعطائة عرض يساوي 5% من عرض صفحة شاشة الحاسوب ,وقام مستخدم بفتح الموقع علي موبايل صغير , تخيل الأن 5% من عرض موبايل صغير , علي ما أظن انك سوف تحتاج بالفعل مايكروسكوب لرؤية العنصر , ولذلك توفر علينا لغة CSS بديلاً عن شراء مايكروسكوب لرؤية العنصر عن طريق استخدام خاصية min-width , حتي لا يقل حجم العنصر عن الحجم المسموح بة

min-width:50px;

ملحوظة : min-width  للعرض تنطبق ايضاً علي min-height للأرتفاع

min-height:50px;

أساسيات التضمين الألوان الخلفيات الحدود الهوامش الهوامش الداخلية العرض والأرتفاع الصناديق حدود خارجية النصوص الخطوط الأيقونات