← العودة لمرحلة تطوير الويب
🌐الأسبوع 2 من 16

تنسيق الصفحات باستخدام CSS

تعلم كيفية تنسيق وتجميل صفحات الويب باستخدام CSS

مدة الجلسة
45 دقيقة

🎯 أهداف التعلم

فهم CSS

معرفة دور CSS في تنسيق صفحات الويب

SelectorsPropertiesValues

تطبيق التنسيقات الأساسية

تغيير الألوان والخطوط والأحجام

ColorsFontsSizesSpacing

📚 الأنشطة التعليمية

💬

مراجعة صفحات HTML

10 دقيقة • مناقشة

مناقشة الصفحات التي أنشأناها الأسبوع الماضي

التعليمات:

  1. اعرض صفحتك الشخصية
  2. شارك التحسينات التي أضفتها
  3. ناقش ما يمكن تحسينه في التصميم
💻

أول تنسيق CSS

20 دقيقة • تطبيق عملي

تعلم كيفية إضافة CSS لتغيير الألوان

التعليمات:

  1. في CodePen، انتقل لقسم CSS
  2. اكتب: h1 { color: blue; }
  3. لاحظ كيف تغير لون العنوان
  4. جرب ألوان مختلفة: red, green, purple
  5. جرب تغيير لون الخلفية: background-color
💻

تنسيق الخطوط والأحجام

15 دقيقة • تطبيق عملي

تعلم تغيير أنواع وأحجام الخطوط

التعليمات:

  1. غير نوع الخط: font-family: Arial;
  2. غير حجم الخط: font-size: 24px;
  3. جعل النص عريض: font-weight: bold;
  4. جرب تنسيقات مختلفة للفقرات
  5. أضف مسافات: margin و padding

🚀 المشروع العملي

صفحة شخصية ملونة

تحسين الصفحة الشخصية بإضافة CSS جميل

مبتدئالنتيجة المتوقعة: صفحة ويب ملونة ومنسقة بشكل جميل

خطوات التنفيذ:

1

افتح صفحتك الشخصية من الأسبوع الماضي

2

غير لون العنوان الرئيسي

h1 {
  color: #2E86AB;
  font-size: 36px;
}
3

نسق العنوان الفرعي

h2 {
  color: #A23B72;
  font-style: italic;
}
4

حسن شكل الفقرات

p {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
5

نسق القوائم

ul {
  background-color: #F18F01;
  padding: 15px;
  border-radius: 10px;
}
6

حسن شكل الروابط

a {
  color: #C73E1D;
  text-decoration: none;
  font-weight: bold;
}
7

أضف خلفية للصفحة

body {
  background-color: #F5F5F5;
  margin: 20px;
}
8

أضف حدود وظلال جميلة

body {
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
  padding: 30px;
}

أمثلة الكود:

تنسيق CSS كامل للصفحة الشخصية
body {
  background-color: #F5F5F5;
  margin: 20px;
  padding: 30px;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

h1 {
  color: #2E86AB;
  font-size: 36px;
}

h2 {
  color: #A23B72;
  font-style: italic;
}

p {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

ul {
  background-color: #F18F01;
  padding: 15px;
  border-radius: 10px;
}

a {
  color: #C73E1D;
  text-decoration: none;
  font-weight: bold;
}

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

📝 الواجب المنزلي

تجربة تنسيقات مختلفة

جرب المزيد من خصائص CSS

المدة المقترحة: 30 دقيقة

👀 نظرة على الأسبوع القادم

الأسبوع القادم سنتعلم JavaScript لجعل صفحاتنا تفاعلية!