الكاتب: Eng~ Rabea Shaban

تصميم قوائم أفقية وعمودية (بالعامية المصرية)

---

🎯 يعني إيه Navigation؟

القائمة أو الـ Navbar هي اللي الناس بتستخدمها عشان توصل لأقسام الموقع:
زي (الرئيسية – من نحن – الخدمات – تواصل معنا…)

ودي لازم تبقى:

• واضحة
• سهلة الاستخدام
• شكلها محترم ومتجاوبة مع الموبايل

---

1️⃣ قائمة أفقية (Horizontal Menu)

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

---

📌 مثال عملي بسيط:

htmlCopy code<nav>
  <ul class="nav">
    <li><a href="#">الرئيسية</a></li>
    <li><a href="#">الخدمات</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">اتصل بنا</a></li>
  </ul>
</nav>

cssCopy code.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  display: flex;
  justify-content: center;
}

.nav li {
  margin: 0 15px;
}

.nav a {
  color: white;
  text-decoration: none;
  padding: 15px;
  display: block;
}

.nav a:hover {
  background-color: #555;
}

🟢 النتيجة:
قائمة فوق الشاشة، العناصر جنب بعض، وكل لينك بيتظلل لما تقف عليه.

---

2️⃣ قائمة عمودية (Vertical Menu)

ودي بتكون غالبًا في الشريط الجانبي أو لما الموقع يبقى على موبايل.

---

📌 مثال عملي لقائمة عمودية:

htmlCopy code<ul class="sidebar">
  <li><a href="#">الرئيسية</a></li>
  <li><a href="#">المنتجات</a></li>
  <li><a href="#">عروضنا</a></li>
  <li><a href="#">تواصل</a></li>
</ul>

cssCopy code.sidebar {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #222;
  width: 200px;
}

.sidebar li a {
  display: block;
  padding: 15px;
  color: white;
  text-decoration: none;
  border-bottom: 1px solid #444;
}

.sidebar li a:hover {
  background-color: #444;
}

🔹 النتيجة: قائمة رأسية ناحية اليمين أو الشمال، كل عنصر واخد سطر لوحده.

---

📱 طب القوائم دي تتظبط إزاي على الموبايل؟

– تستخدم Media Queries علشان القائمة الأفقية تتحوّل عمودية
– أو تضيف أيقونة Menu (hamburger menu) تفتح القائمة لما المستخدم يضغط عليها

---

✅ نصايح سريعة:

• خليك دايمًا منظم، واستعمل <nav> لتحديد منطقة التنقل.
• لو موقعك بالعربي، استخدم direction: rtl أو خليه يقرأ من اليمين للشمال.
• استعمل Flexbox علشان تسهّل تنظيم العناصر.
• ماتنساش تعمل :hover عشان المستخدم يعرف إنه يقدر يضغط.

---

💡 عايز تتطور؟ جرب كمان:

• تعمل قائمة Dropdown
• تضيف أيقونات جنب اللينكات
• تعمل قائمة تنزلق من الجنب (slide menu)

Transition – Transform – الأساسيات بتاعة الأنيميشن

---

✨ أولًا: Transition – الانتقال بين حالتين بهدوء

يعني بدل ما العنصر يتغير شكله فجأة، نخليه يتغير بشكل ناعم تدريجي.

📦 مثال بسيط:

cssCopy code.button {
  background-color: blue;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: red;
}

📌 اللي حصل:

• الزرار لونه أزرق
• لما تقف عليه بالماوس، لونه يبقى أحمر
• بس بدل ما يتغير فجأة، بيتغير في 0.3 ثانية

---

✅ أهم الخصائص مع transition:

الخاصية	معناها
transition-property	بتحدد إيه اللي هيتأثر
transition-duration	الوقت اللي ياخده التغيير (مثلاً: 0.5s)
transition-timing-function	شكل التغيير (بطيء – سريع – منتظم…)
transition-delay	وقت الانتظار قبل ما التغيير يبدأ

---

⏱️ مثال توضيحي كامل:

cssCopy code.card {
  width: 200px;
  background: #eee;
  transition: all 0.4s ease-in-out;
}

.card:hover {
  background: #ccc;
  transform: scale(1.1);
}

---

🔁 ثانيًا: Transform – التحولات في الشكل

الـ transform بتسمحلك تعمل تغييرات في شكل العنصر نفسه:
تكبّره، تصغّره، تلفه، تحرّكه يمين أو شمال… إلخ

---

🔧 أشهر القيم اللي ممكن تستخدمها مع transform:

القيمة	بتعمل إيه؟
translate(x, y)	تحريك العنصر أفقيًا أو رأسيًا
scale(x)	تكبير أو تصغير الحجم
rotate(deg)	لف العنصر بدرجات
skew(x, y)	ميل أو انحراف في الاتجاهات

---

📌 أمثلة عملية:

تكبير العنصر:

cssCopy code.card:hover {
  transform: scale(1.1);
}

تحريكه يمين:

cssCopy code.card:hover {
  transform: translateX(20px);
}

لفه 45 درجة:

cssCopy code.card:hover {
  transform: rotate(45deg);
}

---

🔄 دمج Transition مع Transform:

cssCopy code.image {
  transition: transform 0.3s ease;
}

.image:hover {
  transform: scale(1.2) rotate(5deg);
}

---

🎬 الأساسيات البسيطة للأنيميشن (Animation Basics)

لو عايز تتحكم في حركة متكررة، تقدر تستخدم @keyframes:

cssCopy code@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-30px); }
  100% { transform: translateY(0); }
}

.ball {
  animation: bounce 1s infinite;
}

---

✅ الفرق بين transition و animation:

	transition	animation
بيشتغل إمتى؟	لما يحصل event زي hover	ممكن يشتغل من أول ما الصفحة تفتح
فيه timeline؟	لأ	آه، عندك @keyframes تتحكم في كل خطوة
متكرر؟	لأ	ممكن يتكرر بعدد لا نهائي (infinite)

---

✅ خلاصة الفصل:

• استخدم transition علشان تخلي التغييرات سلسة وناعمة
• استخدم transform علشان تغيّر شكل العنصر (تحريك – لف – تكبير…)
• لو عايز حركة مستمرة، استخدم animation مع @keyframes

text-align – text-transform – text-decoration – letter-spacing

---

✍️ 1️⃣ text-align – محاذاة النص

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

cssCopy codep {
  text-align: center;
}

القيم اللي ممكن تستخدمها:

القيمة	معناها بالعربي
left	محاذاة على الشمال (الافتراضي في الإنجليزي)
right	محاذاة على اليمين (الافتراضي في العربي)
center	في النص بالظبط
justify	يوزّع الكلام على السطر بحيث يملأه كله

📌 مثال:

cssCopy codeh1 {
  text-align: right;
}

---

🔠 2️⃣ text-transform – تحويل شكل الحروف

دي بتتحكم في طريقة عرض الحروف:

cssCopy codeh2 {
  text-transform: uppercase;
}

القيم اللي ممكن تستخدمها:

القيمة	معناها
uppercase	يحوّل الكلام لحروف كابيتال
lowercase	يحوّل كله لحروف صغيرة
capitalize	يخلي أول حرف من كل كلمة كابيتال
none	يخلي الكلام زى ما هو

📌 مثال:

cssCopy codep {
  text-transform: capitalize;
}

---

🔗 3️⃣ text-decoration – تزيين النص

دي خاصة مهمة في اللينكات مثلًا، عشان نتحكم في الخط اللي بيبقى تحت الكلام.

cssCopy codea {
  text-decoration: none;
}

القيم اللي تقدر تستخدمها:

القيمة	معناها
none	يشيل أي تزيين (زي الخط تحت اللينك)
underline	خط تحت الكلام
overline	خط فوق الكلام
line-through	خط في نُص الكلام (زي المحذوف)

📌 مثال:

cssCopy codeh3 {
  text-decoration: line-through;
}

---

↔️ 4️⃣ letter-spacing – المسافة بين الحروف

لو عايز تفرد الحروف عن بعض شوية:

cssCopy codeh1 {
  letter-spacing: 2px;
}

• القيمة بتكون بوحدة px أو em
• ممكن تكون بالسالب لو عايزهم يقربوا من بعض

📌 مثال:

cssCopy codep {
  letter-spacing: 1.5px;
}

---

💡 استخدام كل الحاجات دي مع بعض:

cssCopy code.title {
  text-align: center;
  text-transform: uppercase;
  text-decoration: underline;
  letter-spacing: 3px;
}

---

✅ نصايح سريعة:

• استخدم capitalize مع العناوين عشان شكلها يبقى أنيق
• خليك حذر في استخدام letter-spacing مع الخط العربي (ممكن يبوظ شكله)
• text-align: justify مفيد في المقالات الطويلة

إزاي تتحكم في ترتيب الطبقات وشفافية العناصر؟ (بالعامية المصرية)

---

أولًا: 📚 يعني إيه Z-index؟

z-index هي الخاصية اللي بتقول للمتصفح:

“الطبقة دي فوق، ودي تحت، ودي في النص”…
يعني بتتحكم في ترتيب ظهور العناصر فوق بعض لما يحصل تراكب.

---

🧠 مثال بسيط:

تخيل عندك 3 صناديق فوق بعض، واحد فيهم لونه أحمر، واحد أزرق، واحد أخضر.
لو كلهم في نفس المكان، آخر واحد في الكود هو اللي هيبان فوق.

لكن لو استخدمت z-index تقدر تحدد مين يطلع فوق ومين يختفي وراه.

cssCopy code.box1 {
  position: absolute;
  z-index: 1;
}

.box2 {
  position: absolute;
  z-index: 2;
}

🔺 كل ما الرقم يعلى، كل ما العنصر يطلع لفوق أكتر.

---

⚠️ ملاحظة مهمة:

z-index مايشتغلش غير لما يكون العنصر عنده position غير static
يعني لازم يكون:

• relative
• absolute
• fixed
• sticky

لو كتبته على عنصر بـ position: static مش هيأثر في حاجة.

---

🎯 مثال عملي:

htmlCopy code<div class="red-box">أحمر</div>
<div class="blue-box">أزرق</div>

cssCopy code.red-box {
  position: absolute;
  top: 50px;
  left: 50px;
  background: red;
  z-index: 3;
}

.blue-box {
  position: absolute;
  top: 70px;
  left: 70px;
  background: blue;
  z-index: 1;
}

النتيجة: الأحمر هيطلع فوق الأزرق حتى لو جه قبله في الكود.

---

ثانيًا: 🌫️ Opacity – الشفافية

opacity بتتحكم في درجة وضوح العنصر، من 0 (شفاف تمامًا) لـ 1 (واضح تمامًا).

cssCopy codeimg {
  opacity: 0.5; /* نص شفاف */
}

---

قيم opacity:

القيمة	المعنى
1	شفاف 0% = ظاهر 100%
0.5	شفاف 50%
0	شفاف تمامًا – غير مرئي

---

✅ تستخدم opacity في:

• الصور اللي عايز تخليها خفيفة على الخلفية
• الزرار وقت الـ hover
• المودالات والنوافذ اللي فوق الصفحة

---

✨ مثال على تأثير الـ opacity:

cssCopy codebutton {
  background-color: green;
  color: white;
  opacity: 0.7;
}

button:hover {
  opacity: 1;
}

لما الماوس يقرب من الزر، الشفافية تختفي ويبان واضح.

---

❗ خد بالك:

لما تستخدم opacity على عنصر، كل اللي جواه كمان هيتأثر بنفس النسبة.
يعني لو عندك زر فيه صورة وكلام، كله هيبقى شفاف بنفس الدرجة.

لو عايز تخلي الخلفية بس شفافة وتسيب المحتوى واضح؟
استخدم rgba بدل opacity:

cssCopy codebox {
  background-color: rgba(0, 0, 0, 0.5); /* خلفية بس شفافة */
}

---

🔚 خلاصة الفصل:

الخاصية	الاستخدام
z-index	ترتيب الطبقات لما العناصر تبقى فوق بعض
opacity	درجة الشفافية للعنصر بالكامل
rgba()	تستخدم للشفافية في الخلفيات بس

يعني إيه Box Model؟ وإزاي بيتحسب حجم أي عنصر؟

---

🎯 الأول… يعني إيه Box Model؟

في CSS، أي عنصر في الصفحة بيُتعامل معاه كأنه صندوق، والصندوق ده بيتكوّن من 4 طبقات فوق بعض كده:

luaCopy code+---------------------------+   ← border
|     المسافة الداخلية     |   ← padding
|      (padding)           |
|   +-------------------+  |
|   |     المحتوى       |  |   ← content
|   +-------------------+  |
+---------------------------+
       ↑       ↓
    margin = المسافة الخارجية

---

🧱 مكونات الـ Box Model:

---

1️⃣ content

ده هو الكلام أو الصورة أو الزر نفسه.
مثلاً، في زر مكتوب عليه “اشتري الآن”، الكلام ده هو الـ content.

---

2️⃣ padding

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

cssCopy codebutton {
  padding: 10px;
}

كل ما تزود الـ padding، الكلام بيبعد عن الحواف أكتر.

---

3️⃣ border

الإطار اللي حوالين العنصر.
بتقدر تتحكم في سمكه، لونه، وشكله.

cssCopy codebutton {
  border: 2px solid black;
}

---

4️⃣ margin

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

cssCopy codebutton {
  margin: 20px;
}

---

📏 طيب إزاي بيتحسب الحجم الكلي للعنصر؟

الحجم الفعلي لأي عنصر بيكون:

arduinoCopy codeالعرض الكلي = width + padding + border + margin  
الارتفاع الكلي = height + padding + border + margin

يعني لو كتبت كده:

cssCopy code.box {
  width: 200px;
  padding: 10px;
  border: 5px solid #000;
  margin: 20px;
}

يبقى الحجم النهائي للعنصر:

• العرض الكلي: 200 + 10 + 10 + 5 + 5 = 230px
• الارتفاع الكلي: نفس الفكرة

---

💡 خد بالك من دي:

خاصية box-sizing

دي بتحدد طريقة حساب الحجم.

cssCopy codebox-sizing: content-box; /* (الافتراضية) */

🔸 مع content-box:
الـ width بيشمل المحتوى فقط
والـ padding والـ border بيتضافوا عليه

---

لكن لو استخدمت:

cssCopy codebox-sizing: border-box;

📦 ساعتها:

• كل حاجة (المحتوى + padding + border) جوه الـ width والـ height اللي إنت كتبته.
• يعني لو قلت width: 200px، هيشمل كل حاجة.

✅ وده أنسب اختيار في أغلب الشغل الحديث، عشان يخلي الحسابات أوضح.

---

✨ مثال عملي:

cssCopy code.box {
  width: 300px;
  padding: 20px;
  border: 5px solid blue;
  margin: 30px;
  box-sizing: border-box;
}

🎯 في المثال ده، الصندوق هيظهر عرضه 300px بالظبط، وكل حاجة جواه متظبطة جوه المساحة دي.

---

🔍 إزاي أشوف Box Model في المتصفح؟

لو فتحت Chrome أو أي متصفح حديث:

• دوس كليك يمين على أي عنصر → Inspect
• في التبويب “Computed” هتلاقي رسمة كده توضح الـ Box Model
  وهتشوف كل طبقة من: content – padding – border – margin

---

✅ نصايح من الآخر:

• دايمًا استخدم box-sizing: border-box; في أول المشروع:

cssCopy code* {
  box-sizing: border-box;
}

• افهم الفرق بين padding و margin كويس جدًا، عشان تظبط التصميم

static – relative – absolute – fixed – sticky
(بالعامية المصرية)

---

🎯 يعني إيه Position أصلاً؟

خاصية position بتحدد إزاي ومكان العنصر يتعرض على الصفحة.
يعني بتتحكم في مكان العنصر بالنسبة للصفحة أو بالنسبة للعناصر التانية.

---

1️⃣ position: static

دي الوضعية الافتراضية لأي عنصر، يعني العنصر بيتعرض حسب ترتيبه في الكود.

cssCopy codediv {
  position: static;
}

🟠 لما تستخدم static:

• مش هينفع تحرك العنصر بـ top, left, right, bottom
• المتصفح بيعرضه في مكانه الطبيعي

---

2️⃣ position: relative

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

• top
• left
• right
• bottom

cssCopy code.box {
  position: relative;
  top: 20px;
  left: 30px;
}

🎯 كأنك بتقوله: “خليك في مكانك… بس اتحرك سنة كده”.

---

3️⃣ position: absolute

دي بقى بتحوّل العنصر إنه يخرج من الترتيب الطبيعي تمامًا ويتحرك بالنسبة لأقرب عنصر أب عنده position: relative أو للصفحة نفسها لو مفيش حد قريب عنده position.

cssCopy code.box {
  position: absolute;
  top: 0;
  right: 0;
}

📌 لو الأب بتاع العنصر فيه position: relative، العنصر هيتحرك بالنسبة له.
لو الأب مفيهوش position، العنصر هيطلع يتحرك بالنسبة لكل الصفحة.

---

4️⃣ position: fixed

يعني العنصر يثبت مكانه في الشاشة حتى لو الصفحة اتعملها Scroll.

cssCopy code.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

💡 مفيد في:

• القوائم اللي دايمًا تبقى فوق
• الزرار اللي بيفتح واتساب أو شات

---

5️⃣ position: sticky

ده هجين كده بين relative و fixed.
يعني: “افضل في مكاني لحد ما المستخدم يوصل لي، بعدها اثبت فوق”.

cssCopy code.header {
  position: sticky;
  top: 0;
  background: white;
}

🟢 مفيد جدًا في الترويسة (العناوين اللي بتفضل ظاهرة فوق لما تنزل تحت).

---

🔍 مثال عملي سريع:

htmlCopy code<div class="parent">
  <div class="child">أنا مطلق Absolute</div>
</div>

cssCopy code.parent {
  position: relative;
  height: 300px;
  background: lightgray;
}

.child {
  position: absolute;
  top: 10px;
  right: 10px;
  background: orange;
  padding: 10px;
}

🎯 هنا: العنصر .child هيتحرك بالنسبة للأب .parent لإنه عنده position: relative

---

📊 مقارنة سريعة بين الوضعيات:

النوع	مكان العنصر في الترتيب؟	يشتغل مع top/left؟	يتحرك مع الصفحة؟
static	في مكانه الطبيعي	❌	✅
relative	في مكانه الطبيعي + حركة	✅	✅
absolute	بيخرج من الترتيب	✅	✅
fixed	ثابت في الشاشة	✅	❌
sticky	متغير حسب السكروول	✅	❌ لما يوصل للمكان

بالعامية المصرية – inline و block و inline-block و none

---

🎯 يعني إيه Display أصلاً؟

كل عنصر في HTML ليه طريقة افتراضية في العرض، يعني:

• في عناصر بتتعرض كـ سطر (زي <span>, <a>)
• وعناصر تانية بتاخد صف كامل لوحدها (زي <div>, <p>, <h1>)

وإنت بقى تقدر تتحكم في ده عن طريق خاصية display في CSS.

---

1️⃣ display: block;

يعني العنصر بيظهر على سطر لوحده وياخد العرض بالكامل.

📌 أمثلة على عناصر بتكون Block بشكل افتراضي:

• <div>
• <p>
• <h1> لحد <h6>
• <section>, <article>, <header>, إلخ

cssCopy codediv {
  display: block;
}

🎯 النتيجة:

• بياخد عرض الصفحة كله
• العنصر اللي بعده بييجي تحته

---

2️⃣ display: inline;

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

📌 أمثلة على عناصر Inline:

• <span>
• <a>
• <strong>, <em>, <label>

cssCopy codespan {
  display: inline;
}

⚠️ بس خلي بالك:
ما تقدرش تضيف width أو height على عنصر inline.

---

3️⃣ display: inline-block;

ده بقى نص ونص 🔥
يعني العنصر يفضل جنب اللي قبله، بس في نفس الوقت تقدر تتحكم في:

• width
• height
• padding
• margin

وده بيخليه مفيد جدًا في تصميم الـ buttons أو الكروت الصغيرة.

cssCopy code.button {
  display: inline-block;
  width: 150px;
  height: 50px;
  background-color: blue;
  color: white;
  text-align: center;
}

---

4️⃣ display: none;

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

cssCopy code.ad {
  display: none;
}

⛔ الفرق بينه وبين visibility: hidden إن:

• display: none بيشيل العنصر من الصفحة تمامًا
• visibility: hidden بيخفيه بس بيسيب مكانه

---

💡 مثال توضيحي سريع:

htmlCopy code<div class="box1">Block Element</div>
<span class="box2">Inline Element</span>
<div class="box3">Inline-block Element</div>

cssCopy code.box1 {
  display: block;
  background-color: lightblue;
}

.box2 {
  display: inline;
  background-color: lightgreen;
}

.box3 {
  display: inline-block;
  width: 200px;
  height: 50px;
  background-color: orange;
}

---

🧠 مقارنة سريعة:

النوع	يشتغل على سطر لوحده؟	ينفعله width/height؟	يفضل جنبه عناصر تانية؟
block	✅	✅	❌
inline	❌	❌	✅
inline-block	❌	✅	✅
none	❌	❌	❌ (العنصر مش ظاهر)

(بالعامية المصرية)

---

🎯 الأول كده… إيه الفرق بينهم؟

الخاصية	معناها بالعربي	بتتحكم في إيه؟
border	الحد	بيعمل إطار حوالين العنصر
padding	الحشوة	المسافة بين محتوى العنصر وحدوده
margin	الهامش	المسافة بين العنصر والعناصر اللي حواليه

---

🟥 أولًا: border – الإطار حوالين العنصر

تقدر تضيف إطار حوالين أي عنصر وتتحكم في شكله ولونه وسمكه.

cssCopy codediv {
  border: 2px solid black;
}

🔍 ده معناه:

• 2px: السمك
• solid: نوع الخط (فيه dashed، dotted، double…)
• black: لون الإطار

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

• solid = خط عادي
• dashed = خط متقطع
• dotted = نقط
• double = خطين

---

🟨 تقدر تحدد كل جهة لوحدها:

cssCopy codediv {
  border-top: 1px solid red;
  border-right: 2px dashed green;
  border-bottom: 3px dotted blue;
  border-left: 4px solid gray;
}

---

🟩 ثانيًا: padding – المسافة جوا العنصر

دي بتحدد المسافة بين حدود العنصر والمحتوى اللي جواه.

cssCopy codediv {
  padding: 20px;
}

📌 كل ما تزود الـ padding، الكلام أو الصورة اللي جوا هتبعد أكتر عن الحافة.

ممكن كمان تحدد كل اتجاه لوحده:

cssCopy codediv {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

أو بطريقة مختصرة:

cssCopy codepadding: 10px 20px 10px 20px; /* top right bottom left */

---

🟦 ثالثًا: margin – المسافة حوالين العنصر من برة

cssCopy codediv {
  margin: 30px;
}

ده بيخلي العنصر يبعد عن العناصر اللي حواليه.

بردو ينفع تحدد الاتجاهات:

cssCopy codemargin-top: 10px;
margin-bottom: 20px;

أو تختصر زي padding:

cssCopy codemargin: 10px 15px; /* top & bottom = 10px, right & left = 15px */

---

💡 مثال عملي:

htmlCopy code<div class="box">
  <h2>عنوان</h2>
  <p>نص تجريبي جوا صندوق</p>
</div>

cssCopy code.box {
  border: 2px solid #333;
  padding: 20px;
  margin: 30px;
  background-color: #f9f9f9;
}

🔸 النتيجة:

• في إطار حوالين الصندوق
• المحتوى واخد راحته جوا
• الصندوق نفسه مش لازق في اللي فوقه أو تحته

---

🎯 نصايح سريعة:

• padding بيأثر على حجم العنصر، margin لأ
• ممكن تستخدمهم سوا لتنظيم الشكل كويس
• استخدم أدوات زي Chrome DevTools علشان تشوف الـ Box Model قدامك

استخدام Google Fonts – font-family – font-size – line-height

---

🟣 يعني إيه font-family؟

الخاصية دي بتقول للمتصفح: “استخدم الخط الفلاني لكتابة الكلام”.

مثال بسيط:

cssCopy codebody {
  font-family: Arial, sans-serif;
}

📌 هنا بيقوله جرب خط Arial، ولو مش موجود استخدم أي خط من نوع sans-serif.

---

🟢 أنواع الخطوط الشائعة:

النوع	شكله
Arial	خط بسيط وواضح
Tahoma	خط رسمي شوية
Times New Roman	خط تقليدي شبه الجرائد
Courier New	شبه خطوط الكتابة على الآلة الكاتبة
sans-serif	خطوط بدون حواف
serif	خطوط بحواف (زي Times)

---

🔠 font-size – حجم الخط

تقدر تحدد حجم الخط بوحدات مختلفة:

cssCopy codep {
  font-size: 16px;
}

📏 أشهر الوحدات:

• px: بيكسل – الحجم ثابت
• em: نسبة لحجم العنصر الأب
• rem: نسبة لحجم الجذر (html)
• %: نسبة مئوية

مثال:

cssCopy codeh1 {
  font-size: 2em;
}

---

↕️ line-height – المسافة بين السطور

لما يكون فيه سطور كتير تحت بعض، تقدر تتحكم في المسافة بينهم بـ line-height.

cssCopy codep {
  line-height: 1.8;
}

كل ما الرقم زاد، كل ما المسافة كبرت.

---

🔤 إزاي نستخدم Google Fonts؟

1. ادخل على: https://fonts.google.com
2. اختار الخط اللي يعجبك (زي Cairo, Tajawal, Roboto, Poppins)
3. دوس على زر “Select Style”
4. انسخ رابط الخط، وحطه في <head> بتاع HTML:

htmlCopy code<link href="https://fonts.googleapis.com/css2?family=Cairo&display=swap" rel="stylesheet">

5. استخدم الخط في CSS:

cssCopy codebody {
  font-family: 'Cairo', sans-serif;
}

---

📌 مثال عملي:

htmlCopy code<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>مثال على الخطوط</title>
  <link href="https://fonts.googleapis.com/css2?family=Tajawal&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Tajawal', sans-serif;
      font-size: 18px;
      line-height: 1.6;
      background-color: #f9f9f9;
      color: #333;
    }

    h1 {
      font-size: 30px;
    }
  </style>
</head>
<body>
  <h1>أهلاً بيك في موقعنا</h1>
  <p>الخط المستخدم هنا من جوجل، وحجم الخط مضبوط، وكمان المسافة بين السطور مريحة للعين.</p>
</body>
</html>

---

🎯 نصايح سريعة:

• متزودش في عدد الخطوط علشان متقلش الصفحة
• دايمًا حط خط بديل زي sans-serif في الآخر
• استخدم Google Fonts عشان تدّي شكل احترافي وسهل التغيير

هنتكلم عن: ألوان HEX وRGB وخاصية background-color و background-image

---

🔸 الأول كده… ليه بنستخدم ألوان في CSS؟

الألوان هي أول حاجة عين الزائر بتقع عليها، يعني لو الصفحة فيها ألوان رايقة ومظبوطة، هتخلي الموقع شكله محترم ومريح للعين. وCSS بيديك طرق كتير تستخدم بيها الألوان.

---

✅ أنواع الألوان اللي بنستخدمها في CSS:

---

1. 🟥 ألوان الـ HEX

دي عبارة عن كود بيتكون من 6 أرقام أو حروف، وكل كود بيمثّل لون.

بيبدأ الكود بعلامة # زي كده:

cssCopy codecolor: #ff0000; /* أحمر */
color: #00ff00; /* أخضر */
color: #0000ff; /* أزرق */

🔹 الكود ده بيتقسم 3 أجزاء:

• أول جزء للون الأحمر
• التاني للأخضر
• التالت للأزرق

مثال:

• #ffffff = أبيض
• #000000 = أسود
• #cccccc = رمادي فاتح

---

2. 🟦 ألوان RGB

دي طريقة تانية نكتب بيها الألوان، بدل الأكواد بنحدد النسب بالأرقام.

cssCopy codecolor: rgb(255, 0, 0);   /* أحمر */
color: rgb(0, 255, 0);   /* أخضر */
color: rgb(0, 0, 255);   /* أزرق */

كل رقم بيبدأ من 0 لحد 255، واللي بيزيد أكتر هو اللي بيسيطر على اللون.

ولو عايز تعمل لون شفاف شوية، استخدم rgba:

cssCopy codecolor: rgba(0, 0, 0, 0.5); /* أسود بنص شفافية */

---

3. 🎨 أسماء الألوان الجاهزة

في CSS فيه ألوان متسمية وجاهزة، تقدر تستخدمها على طول من غير أكواد:

cssCopy codecolor: red;
color: blue;
color: green;
color: darkgray;
color: lightblue;

بس الأفضل تشتغل بـ HEX أو RGB علشان الدقة وبتكون مرنة أكتر.

---

🧱 الخلفيات في CSS

---

🟡 background-color

دي بتغيرلك لون الخلفية لأي عنصر.

cssCopy codebody {
  background-color: #f5f5f5;
}

.card {
  background-color: lightblue;
}

---

🖼️ background-image

لو حابب تحط صورة كخلفية لعنصر معين:

cssCopy codebody {
  background-image: url("background.jpg");
}

تقدر تتحكم كمان في:

• حجم الصورة
• هل تكرر ولا لأ
• مكانها فين

مثال:

cssCopy codebody {
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

---

🧪 تمرين بسيط

اعمل صفحة فيها عنصر div وخلي لونه رمادي، وجواه عنوان بلون أزرق، وخلفية فيها صورة:

htmlCopy code<div class="box">
  <h1>عنوان</h1>
</div>

cssCopy code.box {
  background-color: #eee;
  background-image: url("bg.jpg");
  background-size: cover;
  padding: 40px;
}

h1 {
  color: #0066cc;
}