تعرف على الصناديق (Boxes) في CSS
 

تعرف على الصناديق (Boxes) في CSS
من سلسلة تعلّم CSS، سنشرح كيف يمكن استخدام CSS للتحكّم بالمساحة الّتي تحتلّها العناصر عندما تُعرض في الصّفحة، وسنتدرّب على ذلك بتغيير المساحة وإضافة بعض القواعد الّتي تؤثر على هيئة العناصر.

css-boxes.png

فهرس السلسلة:

مدخل إلى أوراق الأنماط المتتالية (CSS).
آلية عمل تعليمات CSS داخل المتصفحات.
المحددات (Selectors) في CSS.
كيفية كتابة تعليمات CSS يسهل قراءتها.
تنسيق نصوص صفحات الويب باستخدام CSS.
التعامل مع الألوان في CSS.
إضافة محتوى إلى صفحة ويب باستخدام CSS.
تنسيق القوائم (Lists) في CSS.
تعرف على الصناديق (Boxes) في CSS. (هذا الدرس)
رصف العناصر (Layout) في CSS.
الجداول (Tables) في CSS.
التعامل مع أجهزة العرض المختلفة والمطبوعات في CSS.
الصناديق (Boxes)
عندما يعرض متصفّح عنصرًا، فإنّ هذا العنصر يحتلّ مساحة معيّنة من الصّفحة، وتتكوّن هذه المساحة من أربعة أجزاء.

في وسط المساحة هناك جزء يحتاجه العنصر لعرض محتواه، وحوله مساحة نُسمّيها الحشوة (padding) وتحيط بها الحدود (border)، وحول هذه الأخيرة نجد الحوافّ (margin) الّتي تفصل العنصر عمّا يجاوره من العناصر.

يظهر اللون الرمادي الفاتح أجزاء التّخطيط:

boxes-1.png

هذا ما تراه في المتصفّح:

boxes-2.png

توزع اللون
تكون الحشوة دومًا من لون خلفيّة العنصر، فعندما يُطبّق لون الخلفيّة على العنصر، فإنّك ستشاهد العنصر وحشوته يكتسبان اللون نفسه، أمّا الحوافّ فهي شافّة دومًا.

للعنصر خلفيّة خضراء:

boxes-3.png

هذا ما تراه في المتصفّح:

boxes-4.png

الحدود
يمكن استخدام الحدود لتزيين العناصر بخطوط أو صناديق.

لتعيين الخطوط ذاتها حول كامل العنصر، استخدم الخاصّة border. عيّن العرض (عادة بالبكسل للعرض على الشّاشات)، والتنسيق واللّون.

فيما يلي التنسيقات المُتاحة:

borders.png

يمكن أيضًا تعيين التنسيق إلى none أو hidden للنّص صراحة على إزالته، أو تعيينه إلى transparent لجعله غير مرئيّ رغم شغله للمساحة المخصّصة له.

لتعيين الحدود لكلّ جانب على حدة، استخدم الخصائص border-top و border-right و border-bottom و border-left. يمكن استخدام إحدى الخواص لتعيين الحدّ على الجانب الموافق فقط، أو استخدامها معًا لتعيين حدود مختلفة التنسيق على الجوانب المختلفة.

مثال
هذه القاعدة تحدّد لون خلفيّة العناوين وتنسيق حدودها العلويّة:

h3 {
border-top: 4px solid #7c7; /* mid green */
background-color: #efe; /* pale green */
color: #050; /* dark green */
}
هكذا تبدو النّتيجة:

stylish-heading.png

هذه القاعدة تجعل الصّور أسهل تمييزًا بإحاطتها بحدود رماديّة:

img {border: 2px solid #ccc;}
النّتيجة:

img-border.png

الحواف والحشوات
استخدم الحوافّ والحشوات للتأثير على مواضع العناصر وخلق مساحة حولها.

استخدم الخاصّة margin أو padding لتعيين عرض الحوافّ والحشوات (على التّرتيب).

إن قمت بتعيين قيمة مفردة للخاصّة، فإنّ هذا يٌطبّق على كلّ جوانب العنصر (فوق، يمين، تحت، يسار).

إن قمت بتعيين قيمتين للخاصّة، فإنّ الأولى تطبّق على الجانبين العلوي والسّفليّ، والثّانية تُطبّق على الجانبين اليمين واليسار.

إن قمت بتعيين 4 قيم، فإنّها تطبّق بهذا التّرتيب: فوق، يمين، تحت، يسار.

مثال
القاعدة التاليّة تجعل الفقرات ذات الصّنف remark مُميّزة بإعطاءها حوافّ حمراء محيطة بها بالكامل.

تفصل الحشوة الحدود عن محتوى العنصر قليلًا.

تدفع الحوافّ على الجانب الأيسر الفقرة بعيدًا قليلًا عن النّص المجاور.

p.remark {
border: 2px solid red;
padding: 4px;
margin-left: 24px;
}
remark.png

تفاصيل أكثر
عند استخدام الحوافّ والحشوات للتأثير على مواضع العناصر، فإنّ ذلك قد يعقّد من طريقة تفاعل الأنماط مع الإعدادات المبدئيّة للمتصفّح، فالمتصفّحات المختلفة قد ترتّب العناصر بصورٍ مختلفة، وقد تبدو النتائج متشابهة إلى أن تغيّر شيئًا ما في ورقة الأنماط، ممّا يؤدّي إلى نتائج غير متوقّعة.

للحصول على النّتيجة المرغوبة، قد تضطر إلى تغيير رماز المستند، وهذا ممّا سنناقشه في الدّرس القادم.

تمرين: إضافة الحدود
عدّل ملف CSS المٌسمّى style2.css، مُضيفًا هذه القاعدة لرسم خطّ في الصفحة فوق كلّ عنوان:

h3 {border-top: 1px solid gray;}
إن كنت قد أتممت التّمرين في الدّرس السابق، فغيّر القاعدة الّتي أنشأتها، وإلّا فأضف قاعدة جديدة تضيف مساحة تحت كلّ عنصر قائمة:

li {
list-style: lower-roman;
margin-bottom: 8px;
}
حدّث المتصفّح لمشاهدة النّتيجة:

c-box.png

تمرين
أضف قاعدة واحدة إلى ورقة الأنماط تضيف حدودًا عريضة حول كامل المُحيطات بلون يذكر بالبحر، كهذا:

oceans.png

(ليس عليك مطابقة الأبعاد والألوان بحذافيرها).

شاهد الحل
القاعدة التّالية تحقّق التأثير المطلوب:

ul {
border: 10px solid lightblue;
}