HTML & CSS
الألوان و Box Model في CSS — دليل شامل 2026
📅 2026-10-27⏱ 8 دقائق قراءة
في المقال السابق، تعلمت أساسيات CSS. الآن سنتعمق في **الألوان** و **Box Model** — وهما حجر الأساس في أي تصميم احترافي.
في هذا الدليل العملي، سنأخذك خطوة بخطوة لفهم الألوان و Box Model، مع تمارين وحلول.
## الألوان في CSS
CSS توفر **4 أنظمة** للألوان:
### 1. الألوان المسمّاة (Named Colors)
```css
.color {
color: red;
color: blue;
color: green;
color: tomato;
color: gold;
}
```
**هناك 140+ لون مسمّى** في CSS.
### 2. Hexadecimal (Hex)
**الصيغة:** `#RRGGBB` (أو `#RGB` للاختصار).
```css
.color {
color: #ff0000; /* أحمر */
color: #00ff00; /* أخضر */
color: #0000ff; /* أزرق */
color: #ffffff; /* أبيض */
color: #000000; /* أسود */
color: #f00; /* اختصار لـ #ff0000 */
}
```
### 3. RGB و RGBA
**RGB:** `rgb(red, green, blue)` — كل قيمة من 0 إلى 255.
```css
.color {
color: rgb(255, 0, 0); /* أحمر */
color: rgb(0, 255, 0); /* أخضر */
color: rgb(59, 130, 246); /* أزرق */
}
```
**RGBA:** مع **الشفافية** (0 إلى 1).
```css
.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% (الإضاءة).
```css
.color {
color: hsl(0, 100%, 50%); /* أحمر */
color: hsl(120, 100%, 50%); /* أخضر */
color: hsl(240, 100%, 50%); /* أزرق */
}
/* مع شفافية */
.color {
color: hsla(0, 100%, 50%, 0.5);
}
```
## جدول أنظمة الألوان
<table>
<thead>
<tr>
<th>النظام</th>
<th>الصيغة</th>
<th>مثال</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Named</strong></td>
<td><code>red</code></td>
<td>140+ لون</td>
</tr>
<tr>
<td><strong>Hex</strong></td>
<td><code>#RRGGBB</code></td>
<td><code>#3b82f6</code></td>
</tr>
<tr>
<td><strong>RGB</strong></td>
<td><code>rgb(r, g, b)</code></td>
<td><code>rgb(59, 130, 246)</code></td>
</tr>
<tr>
<td><strong>RGBA</strong></td>
<td><code>rgba(r, g, b, a)</code></td>
<td><code>rgba(59, 130, 246, 0.5)</code></td>
</tr>
<tr>
<td><strong>HSL</strong></td>
<td><code>hsl(h, s, l)</code></td>
<td><code>hsl(217, 91%, 60%)</code></td>
</tr>
<tr>
<td><strong>HSLA</strong></td>
<td><code>hsla(h, s, l, a)</code></td>
<td><code>hsla(217, 91%, 60%, 0.5)</code></td>
</tr>
</tbody>
</table>
## خصائص الألوان
### 1. `color` — لون النص
```css
p {
color: #1f2937;
color: rgba(31, 41, 55, 1);
color: hsl(215, 28%, 17%);
}
```
### 2. `background-color` — لون الخلفية
```css
div {
background-color: #f3f4f6;
}
```
### 3. `border-color` — لون الحدود
```css
div {
border: 2px solid #3b82f6;
}
```
## التدرجات (Gradients)
### 1. تدرج خطي (Linear Gradient)
```css
.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)
```css
.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)
**المسافة بين المحتوى والحدود.**
```css
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)
**الخط حول العنصر.**
```css
div {
border: 2px solid #3b82f6; /* width style color */
border-radius: 12px; /* حواف دائرية */
border-top: 1px solid red;
border-bottom: 1px solid blue;
}
```
**أنواع الحدود:**
<table>
<thead>
<tr>
<th>النوع</th>
<th>الوصف</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>solid</code></td>
<td>خط عادي</td>
</tr>
<tr>
<td><code>dashed</code></td>
<td>خط متقطع</td>
</tr>
<tr>
<td><code>dotted</code></td>
<td>نقاط</td>
</tr>
<tr>
<td><code>double</code></td>
<td>خط مزدوج</td>
</tr>
<tr>
<td><code>groove</code></td>
<td>محفور</td>
</tr>
<tr>
<td><code>ridge</code></td>
<td>بارز</td>
</tr>
<tr>
<td><code>none</code></td>
<td>بدون حدود</td>
</tr>
</tbody>
</table>
### 4. الهامش الخارجي (Margin)
**المسافة بين العنصر والعناصر الأخرى.**
```css
div {
margin: 20px; /* كل الجوانب */
margin: 10px 20px; /* عمودي أفقي */
margin: 0 auto; /* توسيط أفقي */
margin-top: 10px;
margin-bottom: 20px;
}
```
**⚠️ Margin لا يؤثر على حجم العنصر.**
## `box-sizing` — الأهم!
### المشكلة:
```css
div {
width: 300px;
padding: 20px;
border: 5px solid black;
/* الحجم الفعلي: 300 + 40 + 10 = 350px! */
}
```
### الحل:
```css
* {
box-sizing: border-box;
}
```
**مع `border-box`:** العرض **يشمل** Padding و Border.
```css
div {
width: 300px;
padding: 20px;
border: 5px solid black;
/* الحجم الفعلي: 300px */
}
```
**✅ دائماً استخدم `box-sizing: border-box`!**
## مثال عملي: بطاقة
```css
* {
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)
```css
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);
}
```
**أمثلة جاهزة:**
```css
/* ظل خفيف */
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`.
**الحل:**
```css
p {
color: #64748b;
}
```
### تمرين 2: خلفية متدرجة
أضف تدرجاً خطياً للـ body.
**الحل:**
```css
body {
background: linear-gradient(135deg, #667eea, #764ba2);
min-height: 100vh;
}
```
### تمرين 3: بطاقة مع Padding
أنشئ بطاقة بحشو 24px.
**الحل:**
```css
.card {
background: white;
padding: 24px;
border-radius: 12px;
}
```
### تمرين 4: حدود دائرية
أضف حوافاً دائرية 16px لصورة.
**الحل:**
```css
img {
border-radius: 16px;
}
```
### تمرين 5: زر مع ظل
صمم زراً مع ظل ملون.
**الحل:**
```css
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: توسيط
وسّط عنصراً أفقياً.
**الحل:**
```css
.center {
max-width: 400px;
margin: 0 auto;
}
```
### تمرين 7: box-sizing
طبّق `box-sizing: border-box` على كل العناصر.
**الحل:**
```css
* {
box-sizing: border-box;
}
```
### تمرين 8: تصميم كامل
صمم بطاقة احترافية بخلفية، حشو، حدود، وظل.
**الحل:**
```css
.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` (افتراضي).
**الحل:**
```css
* {
box-sizing: border-box;
}
```
### 🔴 المشكلة 2: Margin يتداخل
**السبب:** Margins الرأسية تتقارب (Margin Collapsing).
**الحل:** استخدم `padding` أو `display: flex`.
### 🔴 المشكلة 3: `margin: auto` لا يعمل
**السبب:** العنصر ليس `block` أو ليس له `width`.
**الحل:**
```css
div {
width: 300px;
margin: 0 auto;
display: block;
}
```
### 🔴 المشكلة 4: الألوان غير متناسقة
**السبب:** اختيار ألوان عشوائية.
**الحل:** استخدم **لوحة ألوان** من [coolors.co](https://coolors.co).
## جدول الخصائص
<table>
<thead>
<tr>
<th>الخاصية</th>
<th>الوظيفة</th>
<th>مثال</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>color</code></td>
<td>لون النص</td>
<td><code>#1f2937</code></td>
</tr>
<tr>
<td><code>background</code></td>
<td>الخلفية</td>
<td><code>#f3f4f6</code></td>
</tr>
<tr>
<td><code>padding</code></td>
<td>حشو داخلي</td>
<td><code>20px</code></td>
</tr>
<tr>
<td><code>margin</code></td>
<td>هامش خارجي</td>
<td><code>10px auto</code></td>
</tr>
<tr>
<td><code>border</code></td>
<td>حدود</td>
<td><code>1px solid #e5e7eb</code></td>
</tr>
<tr>
<td><code>border-radius</code></td>
<td>حواف دائرية</td>
<td><code>12px</code></td>
</tr>
<tr>
<td><code>box-shadow</code></td>
<td>ظل</td>
<td><code>0 4px 12px rgba(0,0,0,0.1)</code></td>
</tr>
<tr>
<td><code>box-sizing</code></td>
<td>نظام القياس</td>
<td><code>border-box</code></td>
</tr>
</tbody>
</table>
## قائمة تحقق نهائية
<table>
<thead>
<tr>
<th>المهمة</th>
<th>الحالة</th>
</tr>
</thead>
<tbody>
<tr>
<td>فهم أنظمة الألوان</td>
<td>⬜</td>
</tr>
<tr>
<td>استخدام Gradients</td>
<td>⬜</td>
</tr>
<tr>
<td>فهم Box Model</td>
<td>⬜</td>
</tr>
<tr>
<td>استخدام Padding و Margin</td>
<td>⬜</td>
</tr>
<tr>
<td>استخدام Border و Border-radius</td>
<td>⬜</td>
</tr>
<tr>
<td>box-sizing: border-box</td>
<td>⬜</td>
</tr>
<tr>
<td>حل التمارين الثمانية</td>
<td>⬜</td>
</tr>
</tbody>
</table>
## ماذا بعد هذا المقال؟
الآن بعد أن أتقنت الألوان و 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 هو **أساس** كل تصميم. أتقنه جيداً.