الدرس 5: مقدمة في CSS | المستوى الثاني

👨‍💻

كتبه: فريق أكاديمية البرمجة

تم تحديثه: 10 يوليو 2026 | مدة القراءة: 15 دقيقة

🔍 ليه CSS هو "الروح" اللي بتحول HTML لموقع جذاب؟

لو HTML هو الهيكل العظمي للموقع، فـ CSS هو "الملابس والألوان والمكياج" اللي بيخلي الموقع يبقى جذاب ويقدم تجربة مستخدم (UX) ممتازة. من خلال 8 سنوات في تصميم المواقع، لاحظت إن 70% من قرار المستخدم في البقاء في الموقع أو مغادرته بيتخذ في أول 3 ثواني — وده بيعتمد 100% على التصميم (CSS).

في الدرس ده هنتعلم:

✅ إيه هو CSS وإزاي يشتغل مع HTML
✅ 3 طرق لإضافة CSS (وأي واحدة الأفضل)
✅ المحددات (Selectors) وإزاي نستهدف العناصر
✅ أهم الخصائص الأساسية (الألوان، الخطوط، الأبعاد)
✅ نموذج الصندوق (Box Model) — أساس كل تصميم
✅ أخطاء شائعة وكيف نتجنبها

⚠️ نصيحة من خبرة: موقع بـ HTML نظيف بس بدون CSS بيبقى شكله زي موقع 1995! CSS مش بس "تجميل" — هو أداة قوية لتحسين تجربة المستخدم، سرعة التحميل، وحتى SEO (جوجل بتحب المواقع المريحة للمستخدم).

📖 ما هو CSS؟

CSS (Cascading Style Sheets) هي لغة تنسيق تتحكم في مظهر عناصر HTML. الكلمة "Cascading" (متتالية) مهمة — معناها إن CSS بيتبع قواعد ترتيبية: لو فيه تضارب في الأنماط، المتصفح بيختار الأنماط الأقرب للعنصر.

/* ✅ مثال بسيط: تغيير لون العنوان */
h1 {
    color: #2c3e50;
    font-size: 32px;
    text-align: center;
}
        

💡 لماذا نفصل CSS عن HTML؟ في 1990s، كان التنسيق داخل HTML (باستخدام وسوم زي <font>). ده كان بيخلي الكود فوضى وصعب التحديث. CSS جت عشان تفصل "المحتوى" عن "التصميم" — وده بيخلي الموقع أسهل في الصيانة وأسرع في التحميل.

🎯 طرق إضافة CSS — وأي واحدة الأفضل؟

في 3 طرق لإضافة CSS لصفحتك. كل طريقة لها استخداماتها، بس فيه طريقة واحدة هي "المعيار الذهبي" في 2026.

1️⃣ CSS داخلي (Internal) — داخل <head>

مناسب للصفحات المستقلة أو التجارب السريعة. بس مش مناسب للمواقع الكبيرة لأنك هتكرر نفس الكود في كل صفحة.

<!-- ✅ CSS داخلي — مناسب للصفحة الواحدة -->
<head>
    <style>
        /* أنماط خاصة بالصفحة دي فقط */
        h1 {
            color: #2c3e50;
            font-size: 28px;
        }
        
        .hero-section {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 60px 20px;
        }
    </style>
</head>
        

⚡ متى نستخدمه؟ لو عندك صفحة Landing Page واحدة أو صفحة تأكيد (Thank You Page) — CSS داخلي بيكون أسرع لأن المتصفح مش محتاج يحمل ملف إضافي.

2️⃣ CSS خارجي (External) — ملف منفصل ⭐ الأفضل

ده المعيار الذهبي في 2026. بتكتب CSS في ملف منفصل (مثلاً style.css) وتربطه بكل صفحات HTML. ده بيخلي:

✅ الكود منظم وسهل الصيانة
✅ المتصفح يخزن الملف في الذاكرة المؤقتة (Cache) — صفحات أسرع
✅ تغيير تصميم الموقع كله من مكان واحد

<!-- ✅ في HTML: ربط ملف CSS -->
<head>
    <link rel="stylesheet" 
          href="css/style.css">
</head>

/* ✅ في ملف css/style.css */
/* Reset بسيط لإزالة الهوامش الافتراضية */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #f8f9fa;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    line-height: 1.6;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
        

🌟 لماذا box-sizing: border-box؟ الخاصية دي بتخلي العرض (width) والارتفاع (height) يشملوا الـ padding والـ border — مش بس المحتوى. ده بيخلّي حساب الأبعاد أسهل بكتير وبيمنع المفاجآت في التصميم!

3️⃣ CSS مباشر (Inline) — داخل الوسم

أقل طريقة مستحسنة — بتستخدم فقط للتعديلات السريعة جدًا أو الأنماط الديناميكية (من JavaScript).

<!-- ⚠️ CSS مباشر — استخدمه بحذر -->
<p style="color: #e74c3c; font-size: 18px; font-weight: bold;">
    ⚠️ تنبيه: هذا نص مهم جدًا!
</p>

<!-- ✅ الأفضل: استخدام class -->
<p class="alert-text">
    ⚠️ تنبيه: هذا نص مهم جدًا!
</p>
        

❌ تجنب CSS المباشر: بيخلي الكود صعب القراءة، صعب الصيانة، وما بيقدرش يتخزن في Cache. استخدمه فقط لو بتعدل من JavaScript ديناميكيًا.

🎯 مقارنة سريعة بين الطرق الثلاث

المعيار	داخلي (Internal)	خارجي (External) ⭐	مباشر (Inline)
السرعة الأولية	✅ سريع	⚡ سريع (مع Cache)	✅ سريع
إعادة الاستخدام	❌ لكل صفحة	✅ موقع كامل	❌ عنصر واحد
سهولة الصيانة	⚠️ متوسطة	✅ سهلة جدًا	❌ صعبة
SEO / أداء	⚠️ متوسط	✅ ممتاز	❌ سيء
متى نستخدمه؟	صفحة واحدة	كل المشاريع	JavaScript فقط

🎨 محددات CSS (Selectors) — كيف نستهدف العناصر؟

المحدد هو "العنوان" اللي بتكتبه في CSS عشان تقول للمتصفح: "طبّق الأنماط دي على العناصر دي". فيه أنواع كتير من المحددات — هنتعلم الأهم.

1️⃣ المحددات الأساسية

المحدد	الوظيفة	مثال CSS	مثال HTML
عنصر (Element)	جميع الوسوم من نوع واحد	`p { }`	`<p>نص</p>`
class (.)	عناصر بنفس الصنف	`.btn { }`	`<button class="btn">`
id (#)	عنصر واحد فريد	`#header { }`	`<header id="header">`
* (Universal)	جميع العناصر	`* { }`	—
مجموعة (,)	أكتر من محدد	`h1, h2 { }`	—

2️⃣ المحددات المتقدمة

/* ✅ المحددات المتقدمة */

/* نسل (Descendant): كل p داخل div */
div p {
    color: blue;
}

/* طفل مباشر (Child): p المباشر داخل div فقط */
div > p {
    font-weight: bold;
}

/* العنصر التالي (Adjacent): h1 اللي بعده p مباشرة */
h1 + p {
    font-size: 18px;
}

/* pseudo-class: حالة معينة */
a:hover {
    color: red;
}

input:focus {
    border-color: #4CAF50;
    outline: none;
}
        

💡 متى نستخدم id ومتى class؟ استخدم id للعناصر الفريدة (زي #header, #footer). استخدم class للأنماط المتكررة (زي .btn, .card). في المشاريع الكبيرة، class بيكون أكثر مرونة — id صعب يتغير لو احتجت تكراره في مكان تاني.

⚡ خصائص CSS الأساسية

CSS فيها مئات الخصائص — بس فيه 20 خاصية بس هما اللي هتستخدمهم 80% من الوقت. هنا أهمها:

1️⃣ الألوان والخلفية

/* ✅ الألوان — 3 طرق للكتابة */
/* 1. اسم اللون */
color: red;

/* 2. HEX (الأكثر شيوعًا) */
color: #e74c3c;     /* أحمر */
color: #2c3e50;     /* كحلي غامق */

/* 3. RGBA (مع شفافية) */
background-color: rgba(76, 175, 80, 0.1);  /* أخضر شفاف 10% */

/* خلفية متدرجة */
background: linear-gradient(135deg, #667eea, #764ba2);
        

2️⃣ الخطوط والنصوص

/* ✅ الخطوط */
body {
    /* fallback: لو الخط الأول مش متاح، يستخدم التاني */
    font-family: 'Segoe UI', Tahoma, Geneva, sans-serif;
    font-size: 16px;           /* الحجم الأساسي */
    font-weight: 400;          /* 400 = normal, 700 = bold */
    line-height: 1.6;          /* المسافة بين السطور */
    text-align: right;        /* المحاذاة للعربية */
}

h1 {
    font-size: 2.5rem;        /* rem = relative to root (16px) */
    font-weight: 700;
    margin-bottom: 1rem;
}
        

🎯 لماذا rem أفضل من px؟ rem بيحسب الحجم نسبة لحجم الخط الأساسي (root). لو المستخدم غيّر حجم الخط في المتصفح (لضعف البصر)، rem بتتكيف تلقائيًا — px ثابتة ومش بتتكيف. ده بيحسن الوصولية (Accessibility) وبيحسن SEO!

3️⃣ الأبعاد والتباعد

/* ✅ الأبعاد والتباعد */
.card {
    /* الأبعاد */
    width: 300px;
    max-width: 100%;       /* متجاوب: ما يتعداش عرض الشاشة */
    height: auto;          /* يتكيف مع المحتوى */
    
    /* التباعد الداخلي (padding) */
    padding: 20px;         /* كل الاتجاهات */
    padding: 10px 20px;    /* عمودي أفقي */
    
    /* التباعد الخارجي (margin) */
    margin: 0 auto;        /* توسيط أفقي */
    
    /* الحدود */
    border: 1px solid #ddd;
    border-radius: 8px;    /* زوايا مستديرة */
}
        

📦 نموذج الصندوق (Box Model) — فهم أساسي

كل عنصر في HTML بيتعامل معاه المتصفح كـ "صندوق" — والصندوق ده بيتكون من 4 طبقات:

المحتوى (Content)

الـ Padding (التباعد الداخلي)

الـ Border (الحدود)

الـ Margin (التباعد الخارجي)

الطبقة	الوظيفة	الخاصية في CSS
Content	المحتوى الفعلي (نص، صورة، إلخ)	`width, height`
Padding	التباعد الداخلي (بين المحتوى والحدود)	`padding`
Border	الحدود المحيطة بالصندوق	`border`
Margin	التباعد الخارجي (بين الصندوق والعناصر التانية)	`margin`

/* ✅ مثال عملي على Box Model */
.box {
    /* المحتوى */
    width: 300px;
    height: 200px;
    
    /* Padding: 20px من كل جانب */
    padding: 20px;
    
    /* Border: 2px سماكة، solid نوع، أزرق */
    border: 2px solid #2196F3;
    
    /* Margin: 10px فوق وتحت، auto يمين وشمال (توسيط) */
    margin: 10px auto;
    
    /* العرض الكلي = 300 + 20*2 + 2*2 = 344px */
    /* لكن مع box-sizing: border-box، العرض = 300px شامل كل حاجة! */
}
        

💡 أفضل الممارسات من مشاريع حقيقية

📋 قائمة التحقق قبل نشر أي CSS:

✅ استخدمت box-sizing: border-box في بداية الملف
✅ استخدمت rem للأحجام بدل px (للوصولية)
✅ الحقول فيها :focus styles (للمستخدمين اللي بيستخدمون Keyboard)
✅ الصور فيها max-width: 100% (متجاوبة)
✅ استخدمت margin: 0 auto للتوسيط بدل text-align: center على الحاوية
✅ ألواني متناسقة (استخدمت Color Palette واحدة)
✅ اختبرت التصميم على شاشات مختلفة (Responsive)

❌ أخطاء شائعة يجب تجنبها:

الخطأ ❌	الصح ✅	السبب
استخدام px لكل الأحجام	استخدام rem للنصوص و px للحدود فقط	rem بتتكيف مع إعدادات المستخدم
نسيان box-sizing: border-box	إضافته في بداية كل مشروع	بيمنع المفاجآت في حساب الأبعاد
تكرار نفس الأنماط	استخدام class مشترك (مثل .btn, .card)	صيانة أسهل وملف أصغر
استخدام !important كتير	تنظيم Selectors بشكل هرمي	!important بيخرب الترتيب الطبيعي ويصعب التصحيح
نسيان :focus للروابط والحقول	تعريف styles واضحة لـ :focus	مهم جدًا للمستخدمين اللي بيستخدمون Keyboard فقط

🎯 تمرين عملي: بناء بطاقة ملف شخصي (Profile Card)

طبق اللي اتعلمته في درس عملي. حاول تبني بطاقة ملف شخصي بسيطة تحتوي على:

صورة دائرية (border-radius: 50%)
اسم بالخط العريض
وصف باللون الرمادي
زر "تواصل معي" بخلفية متدرجة
ظل خفيف (box-shadow) عشان تبقى 3D

<!-- HTML -->
<div class="profile-card">
    <img src="images/avatar.jpg" 
         alt="صورة الملف الشخصي"
         class="profile-img">
    <h2>أحمد محمد</h2>
    <p class="bio">مطور ويب ومؤسس أكاديمية البرمجة</p>
    <a href="contact.html" class="btn-contact">تواصل معي</a>
</div>

/* CSS */
.profile-card {
    width: 300px;
    padding: 30px;
    text-align: center;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    margin: 20px auto;
}

.profile-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #4CAF50;
}

.bio {
    color: #666;
    margin-bottom: 20px;
}

.btn-contact {
    display: inline-block;
    padding: 12px 30px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    text-decoration: none;
    border-radius: 25px;
    font-weight: bold;
    transition: transform 0.3s;
}

.btn-contact:hover {
    transform: translateY(-3px);
}
        

📖 الدرس القادم: Flexbox & Grid — التخطيط المتجاوب

هنتعلم كيف نبني تصاميم متجاوبة (Responsive) باستخدام Flexbox و CSS Grid — الأدوات الحديثة اللي بتحل 90% من مشاكل التخطيط! 📐

🎨 مقدمة في CSS: دليلك الشامل لتنسيق صفحات الويب