أساسيات CSS – الألوان والخطوط والمسافات والـ Box Model

نستخدم الألوان في CSS للتحكم في لون النص و لون الخلفية. أشهر الخصائص المستخدمة: color و background-color.

p {
  color: red; /* يغير لون النص */
}

a {
  color: #2563eb; /* لون الرابط */
}

.box {
  background-color: rgb(240, 240, 240); /* لون الخلفية */
  color: #333; /* لون النص داخل الصندوق */
}

<p>هذا نص لونه أحمر</p>
<a href="#">هذا رابط لونه أزرق</a>
<div class="box">هذا صندوق بخلفية رمادية</div>

color: #111827;
background-color: #e5e7eb;
font-size: 18px;

نستخدم خصائص الخطوط في CSS للتحكم في نوع الخط و حجمه و وزنه و نمطه. أشهر الخصائص المستخدمة: font-family، font-size، font-weight و font-style.

/* أمثلة على تنسيق الخطوط */
body {
  font-family: 'Tajawal', 'Segoe UI', sans-serif;
  font-size: 1.1rem;
  line-height: 1.7;
}

h1, h2 {
  font-weight: 700;          /* bold */
  font-family: 'Cairo', sans-serif;
}

.important {
  font-style: italic;
  font-weight: 600;
  font-size: 1.25rem;
}

.light-text {
  font-weight: 300;          /* خفيف */
}

<h1>عنوان رئيسي عريض</h1>
<p>نص عادي بحجم طبيعي وخط مريح للقراءة.</p>
<p class="important">هذا نص مهم مائل وأكبر قليلاً</p>
<span class="light-text">نص خفيف جدًا (ثلاثمائة)</span>

font-family: 'Tajawal', sans-serif;
font-size: 18px;
font-weight: 400;
font-style: normal;

وحدات القياس تحدد حجم النص. أكثر وحدتين استخدامًا هما px و rem.

جرّب تكبير حجم الخط من إعدادات المتصفح ولاحظ الفرق بين النصين:

p {
  font-size: 16px;
}

p {
  font-size: 1rem;
}

تعتبر الـ Padding والـ Margin من أهم المفاهيم في CSS، وهما الأساس في تحديد المسافات حول العناصر.

1. الـ Padding (المسافة الداخلية)
هي المسافة بين محتوى العنصر (النص أو الصورة) وبين حدوده (Border).

2. الـ Margin (المسافة الخارجية)
هي المسافة خارج حدود العنصر، وهي التي تفصله عن العناصر الأخرى المجاورة له.

لكي تفهمهما بسهولة، تخيل لديك div وبداخله محتوى مثلا نص كما بالصورة التالية:

div {
  padding: 20px; /* داخل العنصر */
  margin: 15px;  /* خارج العنصر */
}

كما نرى بالكود أعلاه عند استخدام padding لل div وجعله 20 بكسل .. هذا يعني المسافة بين المحتوى وبين حد ال div يساوي 20 بكسل بكل الاتجاهات (يمين يسار فوق تحت)

وعند استخدام margin لل div وجعله 15 بكسل .. هذا يعني المسافة بين حد ال div وبين حد الشاشة أو حد المتصفح يساوي 15 بكسل بكل الاتجاهات ( يمين يسار فوق تحت)

ايضا اذا اردنا تغيير المسافة بين حد ال div وبين حد الصفحة من الجهة العلوية فقط نكتب مثلا margin-top:20px واذا اردنا تغيير المسافة بين حد ال div وبين حد الصفحة من الجهة السفلية فقط نكتب مثلا margin-bottom:5px .. واذا اردنا تغيير المسافة بين حد ال div وبين حد الصفحة من جهة اليمين فقط نكتب مثلا margin-right:5px .. واذا اردنا تغيير المسافة بين حد ال div وبين حد الصفحة من جهة اليسار فقط نكتب مثلا margin-left:5px... وهذا ايضا ينطبق على المسافات الداخلية :padding-top padding-bottom padding-left padding-right

لنتخيل ايضا ان هناك ثلاثة div : ال div الاول أخذ عرض الشاشة بالكامل ... وال div الثاني اخذ 30% من عرض الشاشة .. و ال div الثالث اخذ ايضا 30% من عرض الشاشة...كما بالصورة التالية:

بالصورة اعلاه اذا كتبنا للـ div الثالث margin-top فان هذه المسافة هي المسافة بين حد ال div الثالث وبين حد ال div الاول لان الـ div الاول فوق ال div الثالث.... أما اذا كتبنا margin-right فان هذه المسافة هي المسافة بين حد ال div الثالث وبين حد الصفحة من جهة اليمين لان ليس هناك عنصر على يمينه .. واذا كتبنا margin-bottom فان هذه المسافة هي المسافة بين حد ال div الثالث وبين حد الصفحة من الاسفل ايضا لان ليس هناك عنصر اسفل منه.. واذا كتبنا margin-left فان هذه المسافة هي المسافة بين حد ال div الثالث وبين حد ال div الثاني لان ال div الثاني على يسار ال div الثالث..

كل عنصر في الصفحة يعتبر "صندوق" ويتكوّن من: محتوى (Content) ثم Padding ثم Border ثم Margin. فهم هذا المفهوم يعطيك تحكم كامل في الأحجام والمسافات.

.box {
  width: 300px;
  padding: 20px;
  border: 2px solid #000;
  box-sizing: border-box;
}

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

<div class="card">
  <h4>عنوان الكرت</h4>
  <p>نص بسيط داخل الكرت لتجربة التنسيق.</p>
</div>

.card {
  background: #f3f4f6;
  padding: 16px;
  margin: 12px 0;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

• نسيان وحدة القياس مثل px أو rem.
• الخلط بين margin و padding.
• استخدام ألوان بدون تباين (النص غير واضح على الخلفية).
• عدم استخدام box-sizing: border-box في المشاريع.