الدرس الرابع : التحكم فى العناصر المربعة box models

تنسيق الصفحة او مايعرف بالـ layout

قبل دعم الـ CSS كان امر ممل ولا يتم الا بواسطة الـ Tables (او الجداول وسنتعرف عليها فيما بعد)

لكن بعد دعم الـ CSS المسألة اصبحت اكثر مرونة وسهولة, وسرعة وجمال فى تنسيق الصفحة ايضا.


كيف يمكن التحكم فى تنسيق الصفحة من خلال الـ CSS ؟

اجابة هذا السؤال كبيرة نوعا ما, ودرس اليوم هو جزء من الإجابة.

وسنبدأه بالتحكم بالعناصر التى لها اربعة حدود او مايعرف بالـ box model
(مثل الـ div مثلا)

اولا.

كل عنصر من عناصر الـ HTML يمكننا ان نحدد ابعادها (الإرتفاع والعرض) من خلال الـ CSS
من خلال الخاصيتين width و height

كامثال (اظن رأينا اشياء مشابهة مسبقا)

الرمز:

p{ width: 100px; height: 75px; }

لكن ماذا اذا كان محتوى العنصر اكبر من الأبعاد التى حددناها له, ومازلنا نرغب ان لا يتم استخدام مساحة اكثر لمحتوى هذا العنصر؟

(السؤال بصيغة اخرى)
ماذا اذا كان محتوى العنصر يحتاج الى 200px كاعرض, و 150px ارتفاع, ومازال
لدينا رغبة فى ان لا يزيد حجم هذا العنصر عن 100px عرض و 75px ارتفاع لكى
يكتمل جمال الصفحة, ونتلاشى ايضا تشويه شكل الصفحة بسبب حجم هذا العنصر؟

اذا كان العنصر, عبارة عن صورة فـ بالتأكيد ان تعلم كيف تقوم بإعداد ابعاد الصورة, لكن المشكلة اذا كان العنصر نصى.
لكن الحل ان شاء الله موجود.
وهو بإستخدام الخاصية overflow
خاصية الـ overflow لها عدة قيم يمكننا ان نستخدم احداهم.
وهما كالتالى

• visible وهذه هى القيمة الإفتراضية, وتعنى ان المحتوى الذى يتطلب مساحة اكبر سيتم عرضه كما هو.
  
• hidden وتعنى ان اى محتوى داخل العنصر يحتاج لمزيد من المساحة, سيتم حجبه وعدم عرضه
  
• scroll
  وتعنى ظهور سكرول بار, واذا كان هناك محتوى يتطلب مزيد من المساحة, سيمكن
  للمستخدم ان يستخدم الأسكرول بار للتجول داخل العنصر ورؤية المتبقى منه.
  
• auto
  وهذه افضل قيمة يمكنك ان تستخدمها, وهى تعنى عدم عرض الـ scroll bar الا
  عند الحاجة له, اى عندما يكون هناك محتوى يتطلب مساحة اكثر من المساحة
  التى حددناها للعنصر (سواء كانت المساحة المطلوبة فى العرض او الإرتفاع)
  

هذا كان بالنسبة لحجم العنصر.

ولنلقى الأن نظرة على عدة خصائص للتحكم بمظهر العناصر.

خاصية Padding


ترجمة كلمة padding تعنى البطانة.

والمقصود بخاصية padding هو التحكم فى المسافة التى تفرق بين محتوى احد العناصر وبين حدود هذا العنصر.

انظر الصورة التالية فهى توضح المعنى المقصود من محتوى العنصر وحدود العنصر



خاصية الـ padding يتفرع منها 5 خصائص وهما كالتالى
padding-top و padding-left و padding-right و padding-bottom
وكل منهم يتم تحديد قيمته بالبيكسل او الـ em
او حتى cm (سم)
على سبيل المثال اذا كنا نريد العنصر صاحب الكلاس message
ان يكون هناك مسافة 2 بيكسل بين حدود الجهة اليمنى والمحتوى
يتم الأمر بالشكل التالى

الرمز:

.message{ padding-right: 2px; }

وهكذا لبقية خصائص الـ padding

لكن ماذا عن الإختصارات؟ هل يجب عليك ان تكتب الأربع خصائص اذا كنت تريد ان يكون هناك مسافة معينة بين كل حد من حدود العنصر ومحتواه؟
بالطبع لا, يمكنك استخدام خاصية padding فقط.
مثلا نريد ان نجعل المسافة 5 بيكسل تفصل بين كل الحدود (الأيمن, والأيسر, والأسفل و الأعلى) وبين المحتوى
يتم الأمر بمنتهى البساطة بالشكل التالى

الرمز:

padding: 5px;

وايضا يمكنك استخدام padding فقط لتحديد المسافة بالأربعة حدود (حتى ولو لم تكن المسافات متساوية كما فى المثال الأخير)

انظر للقائمة التالية لفهم كيفية استخدام padding بمفردها

• padding: 5px;
  سوف يتم تحديد فارق 5 بيكسل بين كل الحدود والمحتوى
  
• padding: 5px 6px;
  سوف يتم وضع مسافة 5 بيكسل, بين الحد الأعلى, والحد الأسفل, ومسافة 6 بيكسل لليمين واليسار
  
• padding: 5px 3px 4px;
  سوف يتم وضع مسافة 5 بيكسل تفرق بين الحد الأعلى والمحتوى
  ومسافة 3 بيكسل للحد الأيمن والحد الأيسر
  ومسافة 4 بيكسل للحد السفلى
  
• padding: 5px 3px 4px 6px;
  5 بيكسل للحد الأعلى
  3 بيكسل للحد الأيمن
  4 بيكسل للحد السفلى
  6 بيكسل للحد الأيسر
  

اتمنى تكون فهمت كل ماهو مطلوب عن خاصية الـ padding

خاصية border


خاصية الـ border هى التى تمكنا من التحكم فى ظهور حدود احد العناصر

اولا نحن نعرف ان حدود اى عنصر هم اربعة (يمين, يسار, اعلى و اسفل)

وكذلك خاصية الـ border
وهم
border-left , border-right, border-top, border-bottom

وكل خاصية من هذه الخواص, لها اضافتان وهما الـ width (اى سُمك الحد)
و style اى شكل الحد وايضا color الخاصة بلون الحد.

لنعد الحد الأسفل لحد العناصر (لنفهم معنى ماسبق بمثال)
لنفترض ان العنصر الذى سنتعامل معه له الكلاس message

الرمز:

.message{ border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: red; }

هكذا جعلنا سُمك الحد السفلى 1px وشكله solid (اى خطى فقط)

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

والقائمة التالية توضح اهم القيم التى يمكن استخدامها

• none تلغى الحد, اى لا يظهر.
  
• solid تجعل الحد عبارة عن خط كاهذا مثلا
  _______________________
  
• dotted تجعل الحد عبارة عن خط من النقاط كالتالى مثلا
  ......................
  
• dashed تجعل الحد عبارة عن خط مكون من الداش كالتالى مثلا
  --------------
  
• double تجعل الحد مكرر, يعنى لو تم وضعها مع القيمة solid مثلا
  تجعل هناك خطين بدلا من خط واحد.
  

هذه هى القيم الأكثر استخداما هناك ايضا القيم التالية
groove و ridge و inset و outset

وكما فعلنا مع خاصية padding فأنت لست دائما بحاجة لكتابة كل حد بمفرده,
او حتى كتابة كل خاصية لكل حد (كالـ width والـ style) لكل حد بمفرده.
يمكنك تعين الأربع حدود بالشكل التالى كامثال

الرمز:

border: 1px solid #000000;

هذا سيجعل الأربعة حدود للعنصر لهم اللون الأسود
ومن النوع solid وسُمكهم هو 1px

او يمكنك فعل نفس الشئ للحد الأسفل مثلا

الرمز:

border-bottom: #000000 1px dashed;

اتمنى يكون كل شئ بالنسبة للـ border كان واضحا بإذن الله.

خاصية Margin


خاصية الـ margin مثلها تماما مثل الـ padding

الا فرق واحد جزرى

الـ padding كما عرفنا
هى مانحدد بها المسافة بين حدود احد العناصر, ومحتوى هذا العنصر.

لكن الـ margin
نحدد بها المسافة بين حدود احد العناصر, وماخارج هذا العنصر (وليس داخله)

كامثال انظر كود الـ html التالى

الرمز:

some text here

لاحظ الجملة
some text here
والتى هى داخل العنصر p

والعنصر p نفسه داخل العنصر div

لاحظ ان العنصر p يظهر بأقصى يسار العنصر div صحيح؟
وايضا فى المنتصف (بالنسبة للإرتفاع).

اذن نجرب التالى

الرمز:

some text here

فى الكود الثانى اضفنا للعنصر p الكود التالى
margin-top: 0px;

مما يعنى, ان نجعل المسافة بين الحد العلوى للعنصر p وبين ماهو خارج العنصر p (والخارجى فى مثالنا هو العنصر div) هى 0 بيكسل


اتمنى يكون كل شئ بهذا الدرس الطويل والكبير اصبح واضح بإذن الله.

مشكور والله يعيطك العافية ننتظر جديد تالقد وابداعك المتميز