HTML & CSS
مقدمة في CSS — دليل شامل 2026
📅 2026-10-26⏱ 10 دقائق قراءة
بعد أن أتقنت HTML في المقالات السابقة، حان الوقت للانتقال إلى **CSS** — لغة التصميم التي تُحوّل صفحات HTML البسيطة إلى **مواقع جميلة واحترافية**.
في هذا الدليل العملي، سنأخذك خطوة بخطوة لفهم أساسيات CSS، مع تمارين وحلول.
## ما هو CSS؟
**CSS** اختصار لـ **Cascading Style Sheets** (أوراق الأنماط المتتالية).
**تشبيه بسيط:** إذا كان HTML هو **هيكل المنزل** (الجدران، الأبواب، النوافذ)، فإن CSS هو **الديكور** (الألوان، الأثاث، الإضاءة).
**مثال بسيط:**
```html
<h1>مرحباً</h1>
```
```css
h1 {
color: blue;
font-size: 40px;
text-align: center;
}
```
**النتيجة:** عنوان أزرق بحجم كبير في المنتصف.
## لماذا CSS؟
- **التصميم:** ألوان، خطوط، مسافات.
- **التخطيط:** ترتيب العناصر.
- **التجاوب:** تصميم يعمل على كل الأجهزة.
- **الحركات:** تأثيرات بصرية.
- **الفصل:** HTML للبنية، CSS للتصميم.
## طرق إضافة CSS
هناك **3 طرق** لإضافة CSS لصفحة HTML:
### 1. CSS خارجي (External) — **الأفضل**
**ملف `style.css`:**
```css
h1 {
color: blue;
}
```
**في HTML:**
```html
<head>
<link rel="stylesheet" href="style.css">
</head>
```
**المميزات:**
- ✅ يُستخدم في كل الصفحات.
- ✅ ينفصل عن HTML.
- ✅ سهل الصيانة.
### 2. CSS داخلي (Internal)
**في HTML:**
```html
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
```
**المميزات:**
- ✅ لصفحة واحدة.
- ❌ لا يُعاد استخدامه.
### 3. CSS مضمّن (Inline)
```html
<h1 style="color: blue;">مرحباً</h1>
```
**المميزات:**
- ❌ صعب الصيانة.
- ❌ لا يُوصى به إلا للضرورة.
## جدول مقارنة
<table>
<thead>
<tr>
<th>الطريقة</th>
<th>الأولوية</th>
<th>الاستخدام</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>خارجي</strong></td>
<td>منخفضة</td>
<td>✅ موصى به</td>
</tr>
<tr>
<td><strong>داخلي</strong></td>
<td>متوسطة</td>
<td>لصفحة واحدة</td>
</tr>
<tr>
<td><strong>مضمّن</strong></td>
<td>عالية</td>
<td>⚠️ للضرورة</td>
</tr>
</tbody>
</table>
## بنية قاعدة CSS
```css
المحدد {
الخاصية: القيمة;
الخاصية: القيمة;
}
```
**مثال:**
```css
h1 {
color: blue;
font-size: 30px;
}
```
**شرح:**
- **`h1`:** المحدد (Selector).
- **`color`:** الخاصية (Property).
- **`blue`:** القيمة (Value).
- **`;`:** نهاية كل سطر.
## المحددات (Selectors)
### 1. محدد العنصر (Element Selector)
يستهدف **كل** عناصر نوع معين.
```css
p {
color: gray;
}
h1 {
font-size: 40px;
}
```
### 2. محدد الكلاس (Class Selector)
**في HTML:**
```html
<p class="highlight">نص مميز</p>
```
**في CSS:**
```css
.highlight {
background: yellow;
}
```
**⚠️ لاحظ النقطة `.` قبل اسم الكلاس.**
**الاستخدام المتعدد:**
```html
<p class="highlight">نص 1</p>
<p class="highlight">نص 2</p>
```
**كلاهما** سيُطبَّق عليه نفس التنسيق.
### 3. محدد المعرف (ID Selector)
**في HTML:**
```html
<div id="header">رأس الصفحة</div>
```
**في CSS:**
```css
#header {
background: black;
color: white;
}
```
**⚠️ لاحظ `#` قبل اسم المعرف.**
**مهم:** `id` **فريد** — لا يتكرر في الصفحة.
### 4. محدد العنصر داخل كلاس
```css
.card p {
color: gray;
}
```
**يستهدف:** كل `<p>` **داخل** عنصر له كلاس `card`.
### 5. محددات متعددة
```css
h1, h2, h3 {
font-family: 'Cairo', sans-serif;
}
```
**يستهدف:** كل h1 و h2 و h3.
### 6. محدد الابن المباشر (`>`)
```css
nav > a {
color: blue;
}
```
**يستهدف:** كل `<a>` **مباشر** داخل `<nav>`.
### 7. محدد الكل (`*`)
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
```
**يستهدف:** كل العناصر (يُستخدم في Reset).
### 8. محددات الزائفة (Pseudo-classes)
```css
a:hover {
color: red;
}
button:focus {
outline: 2px solid blue;
}
li:first-child {
font-weight: bold;
}
li:last-child {
border-bottom: none;
}
```
**الأكثر استخداماً:**
- **`:hover`:** عند المرور بالفأرة.
- **`:focus`:** عند التركيز.
- **`:active`:** عند الضغط.
- **`:first-child`:** العنصر الأول.
- **`:last-child`:** العنصر الأخير.
- **`:nth-child(n)`:** العنصر رقم n.
## جدول المحددات
<table>
<thead>
<tr>
<th>المحدد</th>
<th>المثال</th>
<th>الاستهداف</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>العنصر</strong></td>
<td><code>p</code></td>
<td>كل p</td>
</tr>
<tr>
<td><strong>الكلاس</strong></td>
<td><code>.card</code></td>
<td>كل العناصر بـ <code>class="card"</code></td>
</tr>
<tr>
<td><strong>المعرف</strong></td>
<td><code>#header</code></td>
<td>العنصر بـ <code>id="header"</code></td>
</tr>
<tr>
<td><strong>الكل</strong></td>
<td><code>*</code></td>
<td>جميع العناصر</td>
</tr>
<tr>
<td><strong>الابن</strong></td>
<td><code>nav > a</code></td>
<td>a المباشر داخل nav</td>
</tr>
<tr>
<td><strong>النسل</strong></td>
<td><code>.card p</code></td>
<td>p داخل .card</td>
</tr>
<tr>
<td><strong>مجموعة</strong></td>
<td><code>h1, h2</code></td>
<td>h1 و h2 معاً</td>
</tr>
<tr>
<td><strong>hover</strong></td>
<td><code>a:hover</code></td>
<td>a عند المرور</td>
</tr>
</tbody>
</table>
## الخصائص الأساسية
### 1. الألوان (Colors)
```css
/* ألوان مسمّاة */
color: red;
background: blue;
/* Hexadecimal */
color: #ff0000;
background: #3b82f6;
/* RGB */
color: rgb(255, 0, 0);
/* RGBA (مع شفافية) */
color: rgba(255, 0, 0, 0.5);
/* HSL */
color: hsl(0, 100%, 50%);
```
### 2. الخطوط (Fonts)
```css
body {
font-family: 'Cairo', 'Tajawal', sans-serif;
font-size: 16px;
font-weight: 400; /* 400 = normal, 700 = bold */
line-height: 1.6;
letter-spacing: 0.5px;
}
h1 {
font-size: 2.5rem;
font-weight: 900;
}
```
**وحدات الحجم:**
<table>
<thead>
<tr>
<th>الوحدة</th>
<th>الوصف</th>
<th>المثال</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>px</code></td>
<td>بكسل (ثابت)</td>
<td>16px</td>
</tr>
<tr>
<td><code>rem</code></td>
<td>نسبة لحجم الجذر</td>
<td>1.5rem</td>
</tr>
<tr>
<td><code>em</code></td>
<td>نسبة للعنصر الأب</td>
<td>1.2em</td>
</tr>
<tr>
<td><code>%</code></td>
<td>نسبة مئوية</td>
<td>80%</td>
</tr>
</tbody>
</table>
### 3. النصوص (Text)
```css
p {
text-align: center; /* left, right, center, justify */
text-decoration: none; /* none, underline, line-through */
text-transform: uppercase; /* uppercase, lowercase, capitalize */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
text-indent: 20px;
}
```
### 4. الخلفية (Background)
```css
body {
background-color: #f0f0f0;
background-image: url('bg.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
/* اختصار: */
background: #f0f0f0 url('bg.jpg') no-repeat center / cover;
}
```
### 5. الحدود (Borders)
```css
div {
border: 2px solid black; /* width style color */
border-radius: 8px; /* حواف دائرية */
}
/* جانبي محدد */
div {
border-top: 1px solid red;
border-bottom: 1px solid blue;
}
```
**أنواع الحدود:**
- `solid`: خط عادي.
- `dashed`: خط متقطع.
- `dotted`: نقاط.
- `double`: خط مزدوج.
- `none`: بدون حدود.
### 6. المسافات (Spacing)
```css
div {
/* Padding (داخلي) */
padding: 20px;
padding-top: 10px;
padding: 10px 20px; /* عمودي أفقي */
padding: 10px 20px 15px 5px; /* أعلى يمين أسفل يسار */
/* Margin (خارجي) */
margin: 20px;
margin: 0 auto; /* لتوسيط عنصر */
}
```
### 7. العرض والارتفاع (Width & Height)
```css
div {
width: 300px;
height: 200px;
max-width: 100%;
min-height: 100px;
}
```
### 8. العرض (Display)
```css
div {
display: block; /* block */
display: inline; /* inline */
display: inline-block; /* مزيج */
display: none; /* إخفاء */
display: flex; /* Flexbox */
display: grid; /* Grid */
}
```
### 9. الموضع (Position)
```css
div {
position: static; /* افتراضي */
position: relative; /* نسبي */
position: absolute; /* مطلق */
position: fixed; /* ثابت */
position: sticky; /* لاصق */
}
```
## الأولويات (Specificity)
عندما يتعارض تنسيقان، CSS تطبق **الأعلى أولوية**:
<table>
<thead>
<tr>
<th>المحدد</th>
<th>الأولوية</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>inline style</code></td>
<td>1000</td>
</tr>
<tr>
<td><code>#id</code></td>
<td>100</td>
</tr>
<tr>
<td><code>.class</code>, <code>:hover</code></td>
<td>10</td>
</tr>
<tr>
<td><code>element</code></td>
<td>1</td>
</tr>
</tbody>
</table>
**مثال:**
```css
p { color: blue; } /* 1 */
.text { color: green; } /* 10 */
#intro { color: red; } /* 100 */
/* <p id="intro" class="text"> → أحمر (الأعلى أولوية) */
```
## التعليقات في CSS
```css
/* تعليق سطر واحد */
/*
تعليق
متعدد
الأسطر
*/
```
## مثال عملي: تنسيق صفحة
**HTML:**
```html
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<title>موقعي</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>موقعي</h1>
<nav>
<a href="/">الرئيسية</a>
<a href="/about">من نحن</a>
</nav>
</header>
<main>
<h2>مرحباً بك</h2>
<p>هذا موقعي الأول بـ CSS.</p>
<button>اضغط</button>
</main>
<footer>
<p>© 2026</p>
</footer>
</body>
</html>
```
**CSS (`style.css`):**
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Cairo', 'Tajawal', sans-serif;
background: #f9fafb;
color: #1f2937;
line-height: 1.7;
direction: rtl;
}
header {
background: #3b82f6;
color: white;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
header h1 {
font-size: 1.5rem;
}
nav a {
color: white;
text-decoration: none;
margin-right: 20px;
padding: 8px 16px;
border-radius: 8px;
transition: background 0.3s;
}
nav a:hover {
background: rgba(255, 255, 255, 0.2);
}
main {
max-width: 800px;
margin: 40px auto;
padding: 20px;
text-align: center;
}
main h2 {
font-size: 2.5rem;
margin-bottom: 20px;
color: #1e293b;
}
main p {
font-size: 1.2rem;
color: #64748b;
margin-bottom: 30px;
}
button {
background: #3b82f6;
color: white;
border: none;
padding: 12px 32px;
border-radius: 8px;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
}
button:hover {
background: #2563eb;
transform: translateY(-2px);
}
footer {
text-align: center;
padding: 20px;
color: #64748b;
border-top: 1px solid #e5e7eb;
margin-top: 40px;
}
```
**🎉 النتيجة:** صفحة احترافية بتصميم جميل!
## تمارين عملية
### تمرين 1: تلوين العنوان
لوّن جميع العناوين `<h1>` باللون الأزرق.
**الحل:**
```css
h1 {
color: blue;
}
```
### تمرين 2: تنسيق الفقرة
اجعل حجم الفقرة 18px، والألوان رمادية.
**الحل:**
```css
p {
font-size: 18px;
color: gray;
}
```
### تمرين 3: زر تفاعلي
صمم زراً يتغير لونه عند المرور.
**الحل:**
```css
button {
background: #3b82f6;
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
cursor: pointer;
}
button:hover {
background: #1e40af;
}
```
### تمرين 4: بطاقة
صمم بطاقة بخلفية بيضاء، حدود، وظل.
**الحل:**
```css
.card {
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
```
### تمرين 5: قائمة أنيقة
صمم قائمة بدون نقاط، مع مسافات.
**الحل:**
```css
ul {
list-style: none;
padding: 0;
}
li {
padding: 12px;
border-bottom: 1px solid #e5e7eb;
}
li:hover {
background: #f3f4f6;
}
```
### تمرين 6: توسيط عنصر
وسّط عنصراً أفقياً.
**الحل:**
```css
.center {
width: 300px;
margin: 0 auto;
}
```
### تمرين 7: كلاس مميز
أنشئ كلاس `.highlight` يضيف خلفية صفراء.
**الحل:**
```css
.highlight {
background: yellow;
padding: 2px 6px;
border-radius: 4px;
}
```
### تمرين 8: صفحة كاملة
صمم صفحة كاملة بتنسيق جميل.
**الحل:**
```css
body {
font-family: 'Cairo', sans-serif;
background: #f9fafb;
padding: 40px;
text-align: center;
}
h1 {
color: #1e293b;
font-size: 3rem;
margin-bottom: 20px;
}
p {
color: #64748b;
font-size: 1.2rem;
margin-bottom: 30px;
}
button {
background: #3b82f6;
color: white;
padding: 15px 40px;
border: none;
border-radius: 12px;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
}
button:hover {
background: #2563eb;
}
```
## حل المشاكل الشائعة
### 🔴 المشكلة 1: CSS لا يعمل
**الأسباب:**
- مسار `link` خاطئ.
- الملف غير محفوظ.
- خطأ في CSS.
**الحل:** افتح **DevTools** (`F12`) وتأكد من عدم وجود أخطاء.
### 🔴 المشكلة 2: الأولوية
**السبب:** تعارض تنسيقات.
**الحل:** استخدم `!important` (بحذر) أو حدد **الأولوية**:
```css
.text {
color: blue;
}
.text {
color: red; /* سيُطبق هذا */
}
```
### 🔴 المشكلة 3: لا يعمل `margin: auto`
**السبب:** العنصر `inline` أو ليس له `width`.
**الحل:**
```css
div {
width: 300px; /* ← ضروري */
margin: 0 auto;
display: block; /* ← إذا لزم */
}
```
### 🔴 المشكلة 4: النص العربي معكوس
**السبب:** عدم تحديد `dir="rtl"`.
**الحل:**
```html
<html dir="rtl">
```
أو:
```css
body {
direction: rtl;
}
```
### 🔴 المشكلة 5: المسافات غريبة
**السبب:** عدم تصفير المسافات.
**الحل:**
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
```
## جدول الخصائص الأساسية
<table>
<thead>
<tr>
<th>الخاصية</th>
<th>الوظيفة</th>
<th>مثال</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>color</code></td>
<td>لون النص</td>
<td><code>red</code></td>
</tr>
<tr>
<td><code>background</code></td>
<td>الخلفية</td>
<td><code>#f0f0f0</code></td>
</tr>
<tr>
<td><code>font-size</code></td>
<td>حجم الخط</td>
<td><code>16px</code></td>
</tr>
<tr>
<td><code>font-family</code></td>
<td>نوع الخط</td>
<td><code>Cairo</code></td>
</tr>
<tr>
<td><code>text-align</code></td>
<td>محاذاة النص</td>
<td><code>center</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</code></td>
</tr>
<tr>
<td><code>border</code></td>
<td>الحدود</td>
<td><code>1px solid black</code></td>
</tr>
<tr>
<td><code>width</code></td>
<td>العرض</td>
<td><code>300px</code></td>
</tr>
<tr>
<td><code>height</code></td>
<td>الارتفاع</td>
<td><code>200px</code></td>
</tr>
<tr>
<td><code>display</code></td>
<td>طريقة العرض</td>
<td><code>flex</code></td>
</tr>
</tbody>
</table>
## قائمة تحقق نهائية
<table>
<thead>
<tr>
<th>المهمة</th>
<th>الحالة</th>
</tr>
</thead>
<tbody>
<tr>
<td>ربط CSS بـ HTML</td>
<td>⬜</td>
</tr>
<tr>
<td>فهم المحددات</td>
<td>⬜</td>
</tr>
<tr>
<td>استخدام الألوان والخطوط</td>
<td>⬜</td>
</tr>
<tr>
<td>Padding و Margin</td>
<td>⬜</td>
</tr>
<tr>
<td>فهم الأولويات</td>
<td>⬜</td>
</tr>
<tr>
<td>تنسيق صفحة كاملة</td>
<td>⬜</td>
</tr>
<tr>
<td>حل التمارين الثمانية</td>
<td>⬜</td>
</tr>
</tbody>
</table>
## ماذا بعد هذا المقال؟
الآن بعد أن أتقنت أساسيات CSS، أنت جاهز للمقال التالي:
1. **الألوان و Box Model** — تعمق في التصميم.
2. **Flexbox و Grid** — التخطيط الحديث.
3. **التجاوب (Responsive)** — تصميم لكل الأجهزة.
## الخلاصة
في هذا المقال، تعلمت:
- ✅ ما هو CSS ولماذا نحتاجه.
- ✅ 3 طرق لإضافة CSS.
- ✅ المحددات (Selectors).
- ✅ الخصائص الأساسية (Color, Font, Text, Border, Padding, Margin).
- ✅ الأولويات (Specificity).
- ✅ تنسيق صفحة كاملة.
- ✅ حل 8 تمارين عملية.
**تذكر:** CSS هو ما يُحوّل HTML من **هيكل عظمي** إلى **موقع جميل**.