← القائمة
LESSON 05 · HTML WITH CSS

HTML مع CSS
من هيكل رمادي إلى موقع جميل

تعلّم كيف تربط CSS بصفحاتك وتتحكم في كل التفاصيل البصرية من الألوان والخطوط حتى التخطيط والحركة.

المفهوم الأساسي

🎨 ما هو CSS ولماذا نحتاجه؟

CSS اختصار لـ Cascading Style Sheets — صفحات أنماط متتالية. هي اللغة المسؤولة عن كل ما تراه: الألوان، الخطوط، المسافات، التخطيط، الحركات، والاستجابة للأحجام المختلفة.

Cascading تعني "متتالية": إذا تعارضت قاعدتان على نفس العنصر، هناك نظام أولوية (Specificity) يحدد أيهما يطبق. الأكثر تخصيصاً يفوز دائماً.

3 طرق لربط CSS بـ HTML:

three-ways-css.html
1
<!-- ═══ الطريقة 1: Inline CSS — جوه العنصر مباشرة ═══ -->
❌ تجنبها في الإنتاج
2
<p style="color: red; font-size: 18px;">نص أحمر</p>
لكل عنصر على حدة — صعب الصيانة
3
 
4
<!-- ═══ الطريقة 2: Internal CSS — جوه الـ head ═══ -->
⚠️ للصفحة الواحدة فقط
5
<head>
6
<style>
tag الـ style يحتوي CSS مباشرة
7
p { color: blue; }
تنطبق على كل p في هذه الصفحة
8
</style>
9
</head>
10
 
11
<!-- ═══ الطريقة 3: External CSS — ملف منفصل ═══ -->
✅ الأفضل دائماً
12
<head>
13
<link
tag الربط — يجب أن يكون في head
14
rel="stylesheet"
rel = relationship. يخبر المتصفح أنه CSS
15
href="styles.css">
مسار ملف الـ CSS
16
</head>
ملف CSS واحد لكل صفحات الموقع
الطريقةالاستخدام الصحيحالمشكلة
Inlineللاختبار السريع جداً أو JS ديناميكيصعب الصيانة — لا يمكن إعادة الاستخدام
Internalصفحات مستقلة، أمثلة تعليميةلا يعمل عبر صفحات متعددة
External ✅كل المشاريع الحقيقيةلا توجد مشاكل — هي الأفضل
القسم الأول

📐 بنية CSS — كل سطر ماذا يعني؟

styles.css — البنية الأساسية
1
/* selector { property: value; } */
هيكل قاعدة CSS الكامل
2
 
3
/* ━━━ تنسيق h1 ━━━ */
تعليق في CSS بين /* */
4
h1 {
h1 = الـ Selector — على من تنطبق القاعدة
5
color: #39ff14;
color = الخاصية، #39ff14 = القيمة، ; إلزامية
6
font-size: 2.5rem;
rem = نسبة من حجم الخط الجذري (1rem = 16px)
7
font-weight: bold;
وزن الخط: bold / normal / 100-900
8
text-align: center;
محاذاة النص: center / right / left / justify
9
margin-bottom: 20px;
مسافة خارجية أسفل العنصر
10
}
أغلق القوسين دائماً
11
 
12
/* ━━━ تنسيق عدة عناصر بنفس القاعدة ━━━ */
فاصلة بين selectors متعددة
13
h1, h2, h3 {
فاصلة = "و" — طبّق على h1 وh2 وh3
14
font-family: 'Cairo', sans-serif;
الخط الأول، والبديل لو لم يتحمل
15
line-height: 1.4;
ارتفاع السطر — بدون وحدة = نسبة من الخط
16
}

أنواع الـ Selectors الأساسية:

selectors.css
1
/* ─── 1. Element Selector ─── */
باسم الـ tag مباشرة
2
p { color: gray; }
كل <p> في الصفحة يصبح رمادياً
3
 
4
/* ─── 2. Class Selector (.اسم) ─── */
يبدأ بنقطة
5
.highlight { background: yellow; }
كل عنصر class="highlight" يصفّر
6
.card.dark { background: #111; }
عنصر له class="card dark" معاً
7
 
8
/* ─── 3. ID Selector (#اسم) ─── */
يبدأ بـ #
9
#main-header { position: sticky; }
العنصر الوحيد id="main-header"
10
 
11
/* ─── 4. Descendant Selector (فراغ) ─── */
العناصر المتداخلة
12
nav a { text-decoration: none; }
كل <a> داخل <nav> — مهما كان العمق
13
nav > a { color: white; }
<a> ابن مباشر لـ <nav> فقط (>) للابن المباشر
14
 
15
/* ─── 5. Pseudo-class (:) ─── */
حالات خاصة
16
a:hover { color: var(--neon); }
عند تمرير الماوس فوق الرابط
17
button:active { transform: scale(0.95); }
لحظة الضغط على الزر
18
input:focus { border-color: blue; }
عندما يكون الحقل نشطاً
19
li:first-child { font-weight: bold; }
أول li في أب
20
tr:nth-child(even) { background: #f5f5f5; }
الصفوف الزوجية — للجداول المخططة
21
 
22
/* ─── 6. Universal Selector (*) ─── */
الكل
23
* { box-sizing: border-box; margin: 0; padding: 0; }
يطبق على كل عنصر — شائع في CSS Reset
القسم الثاني

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

كل عنصر HTML هو مستطيل يتكون من أربع طبقات متداخلة. فهم هذا يحل 80% من مشاكل التخطيط.

margin — المسافة الخارجية
border — الإطار
padding — المسافة الداخلية
content — المحتوى الفعلي
box-model.css — كل طبقة بالتفصيل
1
.card {
بطاقة كمثال
2
/* ─── Content ─── */
حجم المحتوى الفعلي
3
width: 300px;
عرض المحتوى (ليس العنصر كله!)
4
height: 200px;
ارتفاع المحتوى
5
max-width: 100%;
لا يتجاوز عرض الأب — مهم للاستجابة
6
 
7
/* ─── Padding (داخلي) ─── */
مسافة بين المحتوى والإطار
8
padding: 20px;
20px على كل الجهات الأربع
9
padding: 10px 20px;
10px فوق/تحت، 20px يمين/يسار
10
padding: 10px 15px 20px 25px;
فوق يمين تحت يسار (عكس عقارب الساعة)
11
padding-top: 10px;
أو كل جهة بشكل مستقل
12
 
13
/* ─── Border (الإطار) ─── */
الإطار المرئي
14
border: 2px solid #333;
السماكة، النوع (solid/dashed/dotted)، اللون
15
border-radius: 12px;
تدوير الزوايا — 50% = دائرة
16
 
17
/* ─── Margin (خارجي) ─── */
مسافة خارج الإطار
18
margin: 20px;
مسافة من الجوار
19
margin: 0 auto;
0 فوق/تحت، auto يمين/يسار = توسيط أفقي
20
 
21
/* ─── box-sizing (مهم جداً!) ─── */
يغير حساب الحجم
22
box-sizing: border-box;
يشمل padding وborder في الـ width المحددة
23
}
⚠️ أهم نصيحة في CSS: ضع دائماً * { box-sizing: border-box; } في بداية ملف CSS. بدونها width: 300px مع padding: 20px يعطيك عنصراً عرضه 340px (300+20+20) — وهذا يسبب فوضى في التخطيط!
القسم الثالث

🎨 الألوان والخلفيات — كل الصيغ

colors.css
1
.demo {
2
/* ─── صيغ الألوان ─── */
أربع صيغ رئيسية
3
color: red;
اسم اللون بالإنجليزية (148 لون معروف)
4
color: #39ff14;
Hex — #RRGGBB. الأكثر استخداماً
5
color: rgb(57, 255, 20);
RGB — أحمر 0-255، أخضر 0-255، أزرق 0-255
6
color: rgba(57, 255, 20, 0.5);
RGBA — نفس RGB لكن مع شفافية (0=شفاف 1=معتم)
7
color: hsl(116, 100%, 54%);
HSL — Hue درجة، Saturation%، Lightness%
8
 
9
/* ─── الخلفيات ─── */
background properties
10
background-color: #0d1117;
لون خلفية صلب
11
background-image: url('bg.jpg');
صورة كخلفية
12
background-size: cover;
cover = تغطي كل المساحة (قد تُقطع)
13
background-position: center;
موضع الصورة داخل العنصر
14
background-repeat: no-repeat;
لا تكرر الصورة
15
 
16
/* ─── التدرج اللوني ─── */
gradient
17
background: linear-gradient(135deg, #667eea, #764ba2);
135deg الاتجاه، اللون الأول، اللون الثاني
18
background: radial-gradient(circle, #fff, #000);
تدرج دائري من المركز
19
 
20
/* ─── CSS Variables (الأحدث والأفضل) ─── */
متغيرات CSS
21
}
22
:root {
:root = المكان الأمثل لتعريف المتغيرات
23
--primary-color: #39ff14;
اسم المتغير يبدأ بـ --
24
--bg-dark: #080a0d;
أي اسم تختاره
25
}
26
h1 { color: var(--primary-color); }
استخدم المتغير بـ var() — تغيير واحد يغير الكل
القسم الرابع

✍️ الخطوط والطباعة (Typography)

typography.css + HTML
1
/* في HTML — استيراد خط من Google Fonts */
في head قبل style
2
<link href="https://fonts.googleapis.com/css2?family=Cairo" rel="stylesheet">
استيراد خط Cairo من Google — مجاناً
3
 
4
/* في CSS — تطبيق الخط وخصائص الطباعة */
5
body {
تطبيق على كل الصفحة
6
font-family: 'Cairo', sans-serif;
Cairo أولاً، ثم sans-serif كبديل
7
font-size: 16px;
القيمة الجذرية — 1rem = 16px
8
font-weight: 400;
الوزن: 100(رفيع)...400(عادي)...700(غامق)...900(أثقل)
9
line-height: 1.6;
ارتفاع السطر = 1.6 × حجم الخط
10
letter-spacing: 0.5px;
المسافة بين الحروف
11
color: #c9d1d9;
لون النص الافتراضي
12
}
13
 
14
h1 {
15
font-size: clamp(1.5rem, 4vw, 3rem);
clamp(min, preferred, max) — متجاوب تلقائياً
16
text-transform: uppercase;
uppercase/lowercase/capitalize
17
text-shadow: 0 0 20px rgba(57,255,20,0.5);
ظل النص: X Y blur color
18
text-decoration: none;
none/underline/line-through/overline
19
}

🛠️ جرب التنسيق المباشر:

HTML + CSS:
النتيجة:

🧠 اختبر CSS معك

5 أسئلة تختبر فهمك للـ CSS

س1: ما الطريقة الأفضل لربط CSS بصفحات موقعك المتعددة؟

س2: ما الكود الصحيح لجعل فقرات داخل nav بدون خط تحتها؟

س3: ما وظيفة margin: 0 auto؟

س4: ماذا يفعل box-sizing: border-box؟

س5: كيف تكتب متغير CSS وكيف تستخدمه؟