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


محمد فوّاز عرابي

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

css-boxes.png

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

الصناديق (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;
}

 

ما التالي؟

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

ترجمة -وبتصرف- للمقال Boxes من سلسلة Getting started with CSS على شبكة مطوّري Mozilla.



1 شخص أعجب بهذا


تفاعل الأعضاء


لا توجد أيّة تعليقات بعد



يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن