كورس CSS الكامل

الدرس 1: مقدمة في CSS

ما هي CSS؟
هي لغة تُستخدم لتنسيق صفحات الويب: الألوان، الخطوط، توزيع العناصر، الخلفيات، وغيرها.

أنواع تضمين CSS:

Inline: داخل الوسم نفسه باستخدام style.
Internal: داخل وسم <style> في صفحة HTML.
External: ربط ملف CSS خارجي باستخدام وسم <link>.

<p style="color: red;">نص باللون الأحمر</p>  ← هذا مثال على Inline

<style>
p {
  color: blue;
}</style> ← هذا Internal

<link rel="stylesheet" href="style.css"> ← هذا External

الدرس 2: خصائص النصوص

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

p {
  color: #333;           /* لون النص */
  font-size: 18px;       /* حجم الخط */
  text-align: center;    /* محاذاة النص وسط */
  line-height: 1.6;      /* المسافة بين الأسطر */
  letter-spacing: 1px;   /* المسافة بين الحروف */
  font-weight: bold;     /* وزن الخط */
}

الدرس 3: الألوان والخلفيات

body {
  background-color: #fef9c3;   /* لون خلفية الصفحة */
  color: #1f2937;              /* لون النص العام */
}

div {
  background-image: url('image.jpg'); /* صورة كخلفية */
  background-size: cover;             /* تغطية كاملة */
  background-repeat: no-repeat;       /* بدون تكرار */
}

الدرس 4: الإطارات (Borders) والحواف

div {
  border: 2px solid #4f46e5;     /* إطار سُمكه 2px ولونه بنفسجي */
  border-radius: 12px;           /* الحواف مستديرة */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* ظل خفيف */
}

الدرس 5: نموذج الصندوق Box Model

div {
  padding: 20px;    /* مسافة داخلية بين المحتوى والإطار */
  margin: 30px;     /* مسافة خارجية بين العنصر وما حوله */
  border: 1px solid #ccc; /* الإطار */
}

الدرس 6: تنسيق العناصر (العرض والموقع)

div {
  width: 300px;             /* العرض */
  height: 200px;            /* الطول */
  display: inline-block;    /* طريقة عرض العنصر */
  position: relative;       /* لتحديد موقعه */
  overflow: hidden;         /* إخفاء أي محتوى زائد */
}

الدرس 7: الخطوط Fonts

@import url('https://fonts.googleapis.com/css2?family=Cairo&display=swap');

body {
  font-family: 'Cairo', sans-serif;  /* استخدام خط Google */
  font-style: italic;                /* جعل الخط مائل */
  font-weight: 600;                  /* سماكة الخط */
}

الدرس 8: الجداول والقوائم

table {
  width: 100%;
  border-collapse: collapse; /* إزالة المسافات بين الخلايا */
}
th, td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: right;
}

ul {
  list-style-type: square;  /* نوع الترقيم */
  padding-right: 20px;
}

الدرس 9: الانتقالات (Transitions)

button {
  background-color: #4f46e5;
  color: white;
  padding: 10px 20px;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0ea5e9; /* عند المرور بالماوس يتغير اللون */
}

الدرس 10: التصميم المتجاوب Responsive Design

نستخدم media queries لتعديل التنسيق حسب حجم الشاشة.

@media (max-width: 600px) {
  div {
    width: 100%;
    font-size: 16px;
  }
}

🎉 تهانينا! لقد أنهيت كورس CSS بالكامل

الآن أصبحت قادرًا على تصميم مواقع احترافية. يمكنك الآن التوجه إلى تعلم JavaScript.

كورس CSS الكامل – من البداية حتى الاحتراف