الألوان و Box Model في CSS — دليل شامل 2026

في المقال السابق، تعلمت أساسيات CSS. الآن سنتعمق في الألوان و Box Model — وهما حجر الأساس في أي تصميم احترافي.

في هذا الدليل العملي، سنأخذك خطوة بخطوة لفهم الألوان و Box Model، مع تمارين وحلول.

الألوان في CSS

CSS توفر 4 أنظمة للألوان:

1. الألوان المسمّاة (Named Colors)

.color {
  color: red;
  color: blue;
  color: green;
  color: tomato;
  color: gold;
}

هناك 140+ لون مسمّى في CSS.

2. Hexadecimal (Hex)

الصيغة: #RRGGBB (أو #RGB للاختصار).

.color {
  color: #ff0000;  /* أحمر */
  color: #00ff00;  /* أخضر */
  color: #0000ff;  /* أزرق */
  color: #ffffff;  /* أبيض */
  color: #000000;  /* أسود */
  color: #f00;     /* اختصار لـ #ff0000 */
}

3. RGB و RGBA

RGB: rgb(red, green, blue) — كل قيمة من 0 إلى 255.

.color {
  color: rgb(255, 0, 0);      /* أحمر */
  color: rgb(0, 255, 0);      /* أخضر */
  color: rgb(59, 130, 246);   /* أزرق */
}

RGBA: مع الشفافية (0 إلى 1).

.color {
  color: rgba(255, 0, 0, 0.5);    /* أحمر بشفافية 50% */
  background: rgba(0, 0, 0, 0.8); /* أسود بشفافية 80% */
}

4. HSL و HSLA

HSL: hsl(hue, saturation, lightness).

• Hue: 0-360 (درجة اللون).
• Saturation: 0%-100% (التشبع).
• Lightness: 0%-100% (الإضاءة).

.color {
  color: hsl(0, 100%, 50%);    /* أحمر */
  color: hsl(120, 100%, 50%);  /* أخضر */
  color: hsl(240, 100%, 50%);  /* أزرق */
}

/* مع شفافية */
.color {
  color: hsla(0, 100%, 50%, 0.5);
}

جدول أنظمة الألوان

النظام	الصيغة	مثال
Named	red	140+ لون
Hex	#RRGGBB	#3b82f6
RGB	rgb(r, g, b)	rgb(59, 130, 246)
RGBA	rgba(r, g, b, a)	rgba(59, 130, 246, 0.5)
HSL	hsl(h, s, l)	hsl(217, 91%, 60%)
HSLA	hsla(h, s, l, a)	hsla(217, 91%, 60%, 0.5)

خصائص الألوان

1. color — لون النص

p {
  color: #1f2937;
  color: rgba(31, 41, 55, 1);
  color: hsl(215, 28%, 17%);
}

2. background-color — لون الخلفية

div {
  background-color: #f3f4f6;
}

3. border-color — لون الحدود

div {
  border: 2px solid #3b82f6;
}

التدرجات (Gradients)

1. تدرج خطي (Linear Gradient)

.gradient {
  background: linear-gradient(to right, #3b82f6, #8b5cf6);
}

.gradient-2 {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-3 {
  background: linear-gradient(
    to bottom,
    #3b82f6 0%,
    #8b5cf6 50%,
    #ec4899 100%
  );
}

الاتجاهات:

• to right (لليمين).
• to left (لليسار).
• to top (للأعلى).
• to bottom (للأسفل).
• 135deg (زاوية).

2. تدرج شعاعي (Radial Gradient)

.radial {
  background: radial-gradient(circle, #3b82f6, #1e40af);
}

.radial-2 {
  background: radial-gradient(ellipse at top, #3b82f6, transparent);
}

Box Model

Box Model هو أساس كل تصميم في CSS. كل عنصر هو صندوق يتكون من 4 طبقات:

┌─────────────────────────────────┐
│         Margin (خارجي)          │
│  ┌───────────────────────────┐  │
│  │      Border (حدود)         │  │
│  │  ┌─────────────────────┐  │  │
│  │  │  Padding (داخلي)    │  │  │
│  │  │  ┌───────────────┐  │  │  │
│  │  │  │   Content     │  │  │  │
│  │  │  │   (المحتوى)   │  │  │  │
│  │  │  └───────────────┘  │  │  │
│  │  └─────────────────────┘  │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘

1. المحتوى (Content)

• النص، الصورة، الفيديو.
• يُحدد بـ width و height.

2. الحشو الداخلي (Padding)

المسافة بين المحتوى والحدود.

div {
  padding: 20px;                    /* كل الجوانب */
  padding: 10px 20px;               /* عمودي أفقي */
  padding: 10px 20px 15px 5px;      /* أعلى يمين أسفل يسار */
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 15px;
  padding-left: 5px;
}

⚠️ Padding يؤثر على حجم العنصر (إلا مع box-sizing: border-box).

3. الحدود (Border)

الخط حول العنصر.

div {
  border: 2px solid #3b82f6;  /* width style color */
  border-radius: 12px;         /* حواف دائرية */
  border-top: 1px solid red;
  border-bottom: 1px solid blue;
}

أنواع الحدود:

النوع	الوصف
solid	خط عادي
dashed	خط متقطع
dotted	نقاط
double	خط مزدوج
groove	محفور
ridge	بارز
none	بدون حدود

4. الهامش الخارجي (Margin)

المسافة بين العنصر والعناصر الأخرى.

div {
  margin: 20px;                    /* كل الجوانب */
  margin: 10px 20px;               /* عمودي أفقي */
  margin: 0 auto;                  /* توسيط أفقي */
  margin-top: 10px;
  margin-bottom: 20px;
}

⚠️ Margin لا يؤثر على حجم العنصر.

box-sizing — الأهم!

المشكلة:

div {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
  /* الحجم الفعلي: 300 + 40 + 10 = 350px! */
}

الحل:

* {
  box-sizing: border-box;
}

مع border-box: العرض يشمل Padding و Border.

div {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
  /* الحجم الفعلي: 300px */
}

✅ دائماً استخدم box-sizing: border-box!

مثال عملي: بطاقة

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Cairo', sans-serif;
  background: #f9fafb;
  padding: 40px;
}

.card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px;
  margin: 0 auto;
  max-width: 400px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card h2 {
  color: #1e293b;
  font-size: 1.5rem;
  margin-bottom: 12px;
}

.card p {
  color: #64748b;
  line-height: 1.7;
  margin-bottom: 16px;
}

.card button {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.3s;
}

.card button:hover {
  transform: translateY(-2px);
}

الظلال (Box Shadow)

div {
  /* box-shadow: offset-x offset-y blur color; */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  
  /* ظل داخلي */
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  
  /* ظلال متعددة */
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.08);
}

أمثلة جاهزة:

/* ظل خفيف */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

/* ظل متوسط */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

/* ظل قوي */
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

/* ظل ملون */
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);

تمارين عملية

تمرين 1: تلوين النص

لوّن الفقرات باللون الرمادي #64748b.

الحل:

p {
  color: #64748b;
}

تمرين 2: خلفية متدرجة

أضف تدرجاً خطياً للـ body.

الحل:

body {
  background: linear-gradient(135deg, #667eea, #764ba2);
  min-height: 100vh;
}

تمرين 3: بطاقة مع Padding

أنشئ بطاقة بحشو 24px.

الحل:

.card {
  background: white;
  padding: 24px;
  border-radius: 12px;
}

تمرين 4: حدود دائرية

أضف حوافاً دائرية 16px لصورة.

الحل:

img {
  border-radius: 16px;
}

تمرين 5: زر مع ظل

صمم زراً مع ظل ملون.

الحل:

button {
  background: #3b82f6;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  cursor: pointer;
}

تمرين 6: توسيط

وسّط عنصراً أفقياً.

الحل:

.center {
  max-width: 400px;
  margin: 0 auto;
}

تمرين 7: box-sizing

طبّق box-sizing: border-box على كل العناصر.

الحل:

* {
  box-sizing: border-box;
}

تمرين 8: تصميم كامل

صمم بطاقة احترافية بخلفية، حشو، حدود، وظل.

الحل:

.card {
  background: white;
  padding: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  margin: 40px auto;
}

.card h2 {
  color: #1e293b;
  margin-bottom: 12px;
}

.card p {
  color: #64748b;
  line-height: 1.7;
  margin-bottom: 20px;
}

.card button {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
}

حل المشاكل الشائعة

🔴 المشكلة 1: العنصر أكبر من المتوقع

السبب: box-sizing: content-box (افتراضي).

الحل:

* {
  box-sizing: border-box;
}

🔴 المشكلة 2: Margin يتداخل

السبب: Margins الرأسية تتقارب (Margin Collapsing).

الحل: استخدم padding أو display: flex.

🔴 المشكلة 3: margin: auto لا يعمل

السبب: العنصر ليس block أو ليس له width.

الحل:

div {
  width: 300px;
  margin: 0 auto;
  display: block;
}

🔴 المشكلة 4: الألوان غير متناسقة

السبب: اختيار ألوان عشوائية.

الحل: استخدم لوحة ألوان من coolors.co.

جدول الخصائص

الخاصية	الوظيفة	مثال
color	لون النص	#1f2937
background	الخلفية	#f3f4f6
padding	حشو داخلي	20px
margin	هامش خارجي	10px auto
border	حدود	1px solid #e5e7eb
border-radius	حواف دائرية	12px
box-shadow	ظل	0 4px 12px rgba(0,0,0,0.1)
box-sizing	نظام القياس	border-box

قائمة تحقق نهائية

المهمة	الحالة
فهم أنظمة الألوان	⬜
استخدام Gradients	⬜
فهم Box Model	⬜
استخدام Padding و Margin	⬜
استخدام Border و Border-radius	⬜
box-sizing: border-box	⬜
حل التمارين الثمانية	⬜

ماذا بعد هذا المقال؟

الآن بعد أن أتقنت الألوان و Box Model، أنت جاهز للمقال التالي:

1. Flexbox — التخطيط المرن.
2. CSS Grid — التخطيط الشبكي.
3. التجاوب (Responsive) — تصميم لكل الأجهزة.

الخلاصة

في هذا المقال، تعلمت:

• ✅ أنظمة الألوان (Named, Hex, RGB, HSL).
• ✅ التدرجات (Gradients).
• ✅ Box Model (Content, Padding, Border, Margin).
• ✅ box-sizing: border-box.
• ✅ الظلال (Box Shadow).
• ✅ حل 8 تمارين عملية.

تذكر: Box Model هو أساس كل تصميم. أتقنه جيداً.