حول CSS

CSS تعني أوراق الأنماط المتسلسلة.

إذا كانت لغة HTML تبني المنزل، فإن CSS تطلي الجدران، وتختار الأثاث، وتنظم الغرف، وتجعل كل شيء يبدو جميلاً.

بدون CSS، تظل صفحات الويب تعمل، لكنها غالباً ما تبدو عادية وممتلئة وصعبة الاستخدام.

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

CSS يتحكم في أشياء مثل:
✓ الألوان
✓ الخطوط
✓ المسافة
✓ الحدود
✓ التخطيط
✓ القوائم
✓ أزرار
✓ البطاقات
✓ الرسوم المتحركة
✓ تصاميم متوافقة مع الهواتف الذكية

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

CSS لديه قواعد تحدد أي نمط يفوز عندما تحاول أنماط متعددة تغيير نفس الشيء.

يمكن إضافة CSS بثلاث طرق شائعة:

• CSS المضمنة — مباشرة داخل وسم HTML.
• CSS الداخلية — داخل قسم

  لماذا جيت-CSS يوجد

  المهارات الحقيقية لعام 2025-2030 هي: هل يمكنك التحكم في التخطيط، التباعد، اللون، الحركة، والسلوك التفاعلي دون تخمين؟

  لماذا يوجد Jit-CSS

  CSS هو الطبقة البصرية والتخطيطية للويب.

  كل صفحة مرئية تعتمد على التنسيق: المحددات، التباعد، التخطيط، القواعد التفاعلية، الألوان، الطباعة، الأزرار، البطاقات، الرسوم المتحركة، وتصحيح الأخطاء العملي.

  هذا هو التمهيد. Jit-CSS يظهر المهارات العملية وراء هيكل الصفحة، وليس فقط المصطلحات المنسوخة من قائمة.

  مقدمة / موارد / حول

  تعلم أساسيات CSS قبل أن يصبح العمل معقدًا.

  هذا هو مقدمة. Jit-CSS يظهر المهارات العملية، أمثلة صغيرة، وأنماط جاهزة للعمل.

  مقدمة في CSS إلى أين يتجه CSS - الربع الثاني من 2025 حول CSS

  ما هو CSS؟

  CSS تعني أوراق الأنماط المتسلسلة.
  
  HTML يضع الكلمات والروابط والصور والأزرار والصناديق على الصفحة.
  CSS تقرر كيف تبدو تلك الأشياء.
  
  عناصر تحكم CSS:
  الألوان
  الخطوط
  التباعد
  حدود
  التخطيط
  تأثيرات المؤشر
  تغييرات شاشة الهاتف المحمول

  HTML هو الأساس. CSS هو المظهر.

  HTML يقول:
  “هذا عنوان.”
  “هذه فقرة.”
  “هذا زر.”
  
  يقول CSS:
  “اجعل العنوان كبيراً.”
  “اجعل الفقرة قابلة للقراءة.”
  “اجعل الزر أخضر ومستدير الزوايا.”

  أهلا وسهلا

  قاعدة CSS لها جزآن رئيسيان

  منتقي يختار HTML.
  إعلان يغير مظهره.
  
  المحدِّد يكون قبل الأقواس المعقوفة.
  الإعلانات تكون داخل الأقواس المعقوفة.

  h1 { color: red; font-size: 40px; }

  اختر ما تريد تنسيقه

  يقوم محدد الوسم بتنسيق كل وسم متطابق.
  
  يبدأ محدد الفئة بنقطة.
  
  يبدأ محدد معرف (ID selector) برمز #.

  p { color: black; } .warning { color: orange; } #top_banner { background: green; }

  الفئات قابلة لإعادة الاستخدام

  يتم استخدام الفئات مرارًا وتكرارًا.
  
  استخدم الفئات للبطاقات والأزرار والقوائم والصناديق والتحذيرات والتخطيطات.

  تحقق من هذا أولاً.

  .warning { color: #9c3b1f; font-weight: bold; }

  المعرّفات خاصة

  يجب عادة استخدام معرف واحد مرة واحدة فقط على الصفحة.
  
  معرّفات ID مفيدة للأقسام المهمة والمراجع والأهداف في JavaScript.

  بطاقات الدروس تذهب هنا.

  #lessons { padding: 40px 0; }

  تغييرات CSS للمسافات

  الهامش هو المسافة خارج الصندوق.
  
  الحشوة هي المساحة داخل الصندوق.
  
  الحد (Border) هو الخط حول الصندوق.

  .card { margin: 20px; padding: 18px; border: 1px solid #ddd; }

  تغييرات CSS للتخطيط

  التخطيط يعني مكان وجود الأشياء على الشاشة.
  
  يمكن لـ CSS أن يضع البطاقات بجانب بعضها، أو يرصها فوق بعضها، أو يوسطها، أو يجعلها تناسب الشاشات الأصغر.

  ```css .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } ```

  CSS يجعل الصفحات متجاوبة

  يعني التصميم المستجيب أن الصفحة تعمل على أجهزة سطح المكتب والأجهزة اللوحية والهواتف الذكية.
  
  استعلامات الوسائط تغير CSS عندما تصبح الشاشة أصغر.

  @media (max-width: 700px) { .grid { grid-template-columns: 1fr; } }

  لماذا تهم CSS

  بدون CSS، قد تعمل الصفحة بشكل عادي، لكنها غالباً تبدو بسيطة وصعبة الاستخدام.
  
  مع CSS، تصبح الصفحة قابلة للقراءة والمنظمة والمتجاوبة وأسهل في الثقة.
  
  CSS تحول المحتوى إلى صفحة قابلة للاستخدام.

  وثائق CSS من MDN web.dev تعلم CSS W3C CSS CSS Grid - MDN Flexbox - MDN هل يمكنني استخدام Chrome CSS وواجهة المستخدم استعلامات الوسائط - MDN الرسوم المتحركة في CSS - MDN أساسيات التنسيق - MDN

  حول CSS

  CSS تعني أوراق الأنماط المتسلسلة.

  إذا كانت لغة HTML تبني المنزل، فإن CSS تطلي الجدران، وتختار الأثاث، وتنظم الغرف، وتجعل كل شيء يبدو جميلاً.

  بدون CSS، تظل صفحات الويب تعمل، لكنها غالباً ما تبدو عادية وممتلئة وصعبة الاستخدام.

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

  CSS يتحكم في أشياء مثل:
  ✓ الألوان
  ✓ الخطوط
  ✓ المسافة
  ✓ الحدود
  ✓ التخطيط
  ✓ القوائم
  ✓ أزرار
  ✓ البطاقات
  ✓ الرسوم المتحركة
  ✓ تصاميم متوافقة مع الهواتف الذكية

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

  CSS لديه قواعد تحدد أي نمط يفوز عندما تحاول أنماط متعددة تغيير نفس الشيء.

  يمكن إضافة CSS بثلاث طرق شائعة:

  • CSS المضمنة — مباشرة داخل وسم HTML.
  • CSS الداخلية — داخل قسم
    جاهز

    حيل CSS انقر للبدء