نموذج الصندوق

يمكننا رؤية صفحة الوب على أنها مجموعة من العناصر التي تحتل مساحات مستطيلة في الواجهة ( صناديق ) ، هذه العناصر تسمى عناصر " Block " ، تقريبا جميع العناصر التي رأيناها في الفصول السابقة من نوع " Block " كـ : <header> ، <p> ، <footer> ... و هذه العناصر التي تظهر في الواجهة يتم ببساطة تسميتها صناديق لأنها تحتل مساحات مستطيلة الشكل و تحتوي على محتوى ، ( تماما كالصناديق ) ، لا داع لتعقيد الأمور بكثرة التسميات ، عنصر أو صندوق إنهما شيء واحد

سنتعلم في هذا الفصل كيفية التحكم في هذه الصناديق ، التحكم في أبعادها : العرض و الإرتفاع ، و اللعب في هوامشها بتقنيات الـCSS ، و سنتعلم كيف نضبط محتواها ، و كيف نجعل النصوص داخلها تبدوا متناسقة .

الفهرس

• صناديق block ، و صناديق inline .
• التحكم في أبعاد الصندوق .
• التحكم في الهوامش .

---

صناديق block ، و صناديق inline .

في لغة الـHTML ، يمكننا تقسيم الصناديق إلى نوعين كبيرين :

• عناصر من نوع " Block " ، على سبيل المثال : <p> ، <header>
• عناصر من نوع " inline " ، مثلا الروابط : <a></a>

هناك أنواع الأخرى خاصة ، مثلا بالنسبة لخانات الجداول هناك ( table-cell ) أو بالنسبة للقوائم هناك ( list-item ) ، لن نهتم بهذه الأنواع من العناصر الآن لأنها لا تستعمل كثيرا .

سؤال : كيف أعرف هل العنصر من نوع Block أو من نوع Inline ؟


الفرق بينهما واضح ، و تحديد أي نوع ينتمي إليه العنصر سهل للغاية :
Block : العناصر من نوع Block تجعل العناصر بعدها و قبلها تعود إلى السطر أتماتيكيا ، يمكن أن نتخيل أن هذه العناصر تحتل مساحة بكامل عرض الصفحة ، مما يجعل العناصر الأخرى في الصفحة تبتعد لتعود إلى سطر جديد كي لا يقع أي تداخل بين العناصر .

inline : توجد عناصر inline دائما في داخل عناصر Block ، و هي لم توجد لكي تعود بالمحتوى الذي بعدها إلى السطر ، بل على العكس من ذلك تماما ، فهي تترك البنية عادية و لا تضيف إي تغيير ما لم تفرض عليها خصائص CSS .

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

تمثل الصناديق الزرقاء ، المساحة المأخوذة من طرف عناصر من نوع Block ، و هي متراصة واحدة تلو الأخرى ، يمكن أيضا وضع عناصر من نوع Block كمحتوى داخل عناصر أخرى من نوع Block .

أما الجزء الأصفر فهو يمثل مساحة عنصر من نوع inline الذي هو في هذه الحالة رابط <a> ، نعم الروابط <a> تعد من عناصر inline ، و كما بالنسبة لعناصر Block ، يمكن وضع عناصر inline كمحتوى داخل عناصر inline أخرى .

عناصر خاصة ( مهمة )
جميع عناصر الـHTML التي نعرفها الان لها دور خاص بها في بناء موقع الوب ، أي أن العناصر <p> مثلا تصلح لوضع الفقرات ، العناصر <a> تصلح لوضع الروابط ، و هكذا ...

العنصران الجديدان اللذان سنتعرف عليهما الان مهمان جدا ، حيث ليس لهما دور محدد يلعبانه ، فهما يصلحان لأي شيء ، و أيضا لا يصلحان لشيء  ، فهما لا يطبقان أي خصائص خاصة بهما على المحتوى بداخلما أبدا ، إذ يجب دائما إضافة خصائص الـCSS يدويا ، فهذان العنصران يصلحان لتعريفهما بالـId و الـClass ، عندما يستعصي ذلك مع العناصر الأخرى ، هذان العنصران هما :

<span></span> : من نوع Inline .
<div></div> : من نوع Block .

تكون عناصر <span> و <div> عملية في العديد من الحالات ، و لكن في بعض الحالات يقوم بعض المصممين بإستعمال هذه العناصر بكثرة ، إذ يضعون لها خصائص تجعلها مشابهة لعناصر أخرى موجودة أصلا ، مثال :

بدل إستعمال ما يلي لإدخال عنوان :

<div class="title" style="font-size:large;">العنوان</div>

يمكننا و بكل بساطة إستخدام العنصر الخاص بالعناوين

<h1>العنوان</h1>

فهي من ناحية الشكل الخارجي لموقع الوب ، يبدوا عنوان الكود الأول مثل عنوان الكود الثاني ، و لكن يجب دائما صياغة كود منطقي يستطيع أي متصفح فهمه بسهولة ، و كما قلت خصائص الـCSS كلما كان حجم الموقع أقل و كان أسرع بالظهور ، فحتى محرك البحث Google يعتمد على العناصر <title> ، <h1> و غيرها لتمييز الكلمات المهمة في موقعك و جعله في مقدمة نتائج البحث ، و هذا لن يحذث أبدا لو كانت جميع العناصر عبارة عن <div> و <span> .

---

التحكم في أبعاد الصندوق

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

هل تتذكر الخاصية background-color ، سنستعمل هذه الخاصية كي تظهر لنا المساحة الخاصة بكل عنصر نقوم بتخصيصه .

الخاصيتان الجديدتان هما :

width : و هي تأخذ قيما عديدية تمثل عرض المساحة الخاصة بالعنصر و هي تكون عادة بالبكسل ( px ) أو بالنسبة ( % ) .
height : و هو الإرتفاع ، أي إرتفاع المساحة الخاصة بالعنصر ، تأخذ القيم مثل الخاصية width

لاحظ الكود التالي :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Title</title>
        <style>
            h1,p { background-color:gray; }
        </style>
    </head>
    <body>
        <h1>العنوان</h1>
        <p>الفقرة</p>
        <p>الفقرة الثانية</p>

    </body>
</html>

هذا ما سنشاهد :

المساحة الخاصة بالصناديق أخذت كل عرض الصفحة أي كما لو أن width:100%

الان سنقوم بجعل عرض الفقرات %50 من عرض الصفحة . سنضيف الخاصية التالية

p {
     width:50%;
}

و النتيجة :

أصبح عرض الفقرات يمثل نصف عرض الصفحة ، و بما أننا قمنا بإستخدام % في القياس ، فحتى و لو غيرت عرض الصفحة فإنك ستلاحظ أن عرض الفقرات يتغير هو الاخر أتماتيكيا .

و إذا أردنا أن نجعل من عرض الفقرات ثابثا أي لا يتغير إن غيرنا عرض الصفحة ، فهنا يجب إعطاء القياس بالبكسل :

p {
     width:250px;
}

و كل هذه الأشياء فهي نفسها بالنسبة للخاصية height

هناك أيضا خصائص أخرى تخص العرض و الإرتفاع ، فإن كان عرض العناصر يتغير حسب عرض الصفحة ، فيمكن أن نضع حدا لا يتجاوزه العرض ، كحد أدنى و حد أقصى :

max-width : الحد الأقصى الذي يمكن أن يصل إليه عرض العنصر و هو يعبر عنه دائما بالبكسل ، و لا يمكنه أخذ قيم مئوية .
min-width : الحد الأدنى للعرض .
max-height : الحد الأقصى للإرتفاع .
min-height : الحد الأدنى للإرتفاع .

مثال :

p {
     width:60%;
     min-width:200px;
}

---

التحكم في الهوامش

تحتوي كل العناصر من نوع Block على نوعين من الهوامش :

• هوامش خارجية .
• هوامش داخلية .

لاحظ جيدا الصورة التالية :

الهوامش الداخلية و الخارجية

في الصورة وضعت حدود العنصر بالأسود ، كي يظهر الفرق بين النوعين من الهوامش :

• الهامش الداخلي : و هو المساحة بين حدود العنصر و محتواه الداخلي .
• الهامش الخارجي : هو المساحة بين حدود العنصر و حدود العنصر الثاني الذي يليه .

في الـCSS ، يمكننا التحكم في هذه الهوامش عن طريق الخاصيتين التاليتين :

• padding : الخاصية المسؤلة عن الهوامش الداخلية .
• margin : الخاصية المسؤلة عن الهوامش الخارجية .

تحتوي عناصر Inline على الهوامش أيضا ، إذ يمكنك تطبيق كل ما يلي عليها بنفس الطريقة

قد تجد في بعض الدروس الأخرى أنهم يطلقون على الهامش إسم الحشو ، لا داع للقلق المهم أن تفهم كيف تتحكم فيها عن طريق الخصائص padding و margin

لنأخذ مثالا كبيرا نتعرف من خلاله عن الخاصيتين الجديدتين .
لنضع مثلا صفحة وب تحتوي على فقرتين <p> لهما الخصائص التالية :

p {
     width:350px;
     border:1px solid black;
     text-align:justify;
}

كما تلاحظ ، بالنسبة للفقرات فهي تحتوي على هوامش ، فبين الفقرتين هناك فراغ يبدوا كما لو أننا أنشأنا سطرا فارغا ، و لكن في الحقيقة إنها الهوامش الخارجية للفقرة ، فهي التي تملأ تلك المساحة .

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

p {
     width:350px;
     border:1px solid black;
     text-align:justify;
     padding:20px;
}

أما الان فأريد من فقراتي أن تبعدان قليلا بعضهما عن بعض ، هذا يعني أنه يجب أن نزيد في الهوامش الخارجية

p {
     width:350px;
     border:1px solid black;
     text-align:justify;
     padding:20px;
     margin:50px;
}

ولكن الهوامش الجانبية أيضا أصبحت كبيرة 50 بكسل !!!

تتحكم الخاصيتان padding و margin بالجميع الهوامش في نفس الوقت ، الهامش العلوي ، السفلي ، الهامش على اليمين و على اليسار و تعطيها نفس القيمة ، إذا أردنا أن نخصص هامشا محددا دون التأثير على باقي الهوامش فإننا نستخدم الخصائص المشتقة التالية :

• margin-top : الهامش الخارجي العلوي .
• margin-right : الهامش الخارجي على اليمين .
• margin-bottom : الهامش الخارجي السفلي .
• margin-left : الهامش الخارجي على اليسار .

نفس الشيء بالنسبة للهوامش الداخلية

• padding-top
• padding-right
• padding-bottom
• padding-left

هناك أيضا الكتابة المختصرة ، فإذا أردنا أن نخصص كل الهوامش على حدة ، لا داع لأن نكتب كل خاصائص الـpadding أو margin ، يمكننا أن نكتب بإختصار 

margin: top right bottom left;
padding: top right bottom left;

بهذا الترتيب تماما ، فالترتيب هنا مهم ، شاهد المثال لكي تفهم :

margin: 5px 10px 6px 8px;

في هذه الكتابة المختصرة لدينا ما يكافئ ما يلي :

margin-top:5px; 
margin-right:10px; 
margin-bottom:6px 
margin-left:8px;

توسيط الصناديق

هناك قيمة أخرى تأخذها الخاصية margin ، و هي قيمة خاصة تقول للمتصفح بأن يجعل الهوامش الجانبية متساوية ، أي الهامش على اليمين يساوي الهامش على اليسار ، و بالتالي يصبح لدينا العنصر في وسط الصفحة ، و هذه القيمة التي تجعل هذا ممكنا هي auto 

لنشاهد المثال :

p {
     width:350px;
     border:1px solid black;
     text-align:justify;
     padding:20px;
     margin:auto;
     margin-top:30px;
}

عند إستخدام القيمة auto ، فإن الهوامش الجانبية تصبح متساوية ، لهذا يصبح من الضروري التحكم في الهوامش العلوية و السفلية عن طريق الخصائص margin-top و margin-bottom .

→ الفصل التالي الفصل السابق ←