CSS: مقدمة في CSS

1. ما هو CSS؟

CSS (أوراق الأنماط المتتالية) هي لغة وصفية تُستخدم للتحكم في تنسيق وتخطيط صفحات الويب. باستخدام CSS، يمكنك التحكم بدقة في كيفية عرض عناصر HTML — بما في ذلك الخطوط والألوان والخلفيات والحدود والأحجام والمواقع وغيرها من الخصائص البصرية. CSS هي تقنية أساسية لا غنى عنها في تطوير الويب الحديث.

فكّر بهذه الطريقة: إذا كان HTML هو "الهيكل العظمي" لصفحة الويب — يحدد المحتوى الذي يظهر على الصفحة (العناوين والفقرات والصور والجداول وما إلى ذلك) — فإن CSS هو "الملابس والمكياج" — يحدد شكل هذا المحتوى (الألوان والأحجام والمواقع والرسوم المتحركة وما إلى ذلك).

💡 سهل الفهم: HTML هو "الهيكل العظمي"، وCSS هو "الملابس والمكياج" — قبل تعلم CSS، يُنصح بفهم أساسيات HTML أولاً، حتى تعرف على أي "هيكل عظمي" ستُلبس "الملابس".

2. ماذا يفعل CSS

التحكم في تخطيط الصفحة: يحدد موضع وحجم وترتيب عناصر صفحة الويب
تعيين الأنماط البصرية: يحدد الألوان والخطوط والحدود والخلفيات وغيرها من خصائص النمط
تحسين تجربة المستخدم: يحسن تفاعلية الصفحة من خلال الرسوم المتحركة والانتقالات والتصميم المتجاوب
التكيف مع أجهزة متعددة: يدعم أحجام شاشات مختلفة من خلال التخطيطات المرنة وإعدادات الوحدات

✅ لا تقلق: CSS لا يتطلب أي خلفية برمجية للبدء. كل ما تحتاجه هو محرر نصوص ومتصفح، ويمكنك رؤية النتائج فوراً.

3. فصل البنية عن النمط

واحدة من أعظم قيم CSS هي تحقيق "فصل المحتوى عن العرض" — HTML يتولى المحتوى المنظم، وCSS يتولى العرض البصري. هذا الفصل يجلب العديد من الفوائد:

صيانة أسهل: غيّر الأنماط بتعديل ملف CSS فقط، دون لمس بنية HTML
كود أنظف: لا خصائص نمط تُشوّش HTML، مما يجعله واضحاً وسهل القراءة
قابلية إعادة استخدام أفضل: يمكن مشاركة ملف CSS نفسه عبر صفحات متعددة
كفاءة تحميل أعلى: بمجرد أن يخزن المتصفح ملف CSS مؤقتاً، تستفيد جميع الصفحات

4. كيف تعمل المتصفحات

عندما يحمل المتصفح صفحة ويب، فإنه:

يحلل مستند HTML لبناء شجرة DOM (نموذج كائن المستند)
يحلل ملف/كود CSS لبناء شجرة CSSOM (نموذج كائن CSS)
يدمج DOM وCSSOM في شجرة العرض
يُنشئ التخطيط بناءً على شجرة العرض (يحسب موضع وحجم كل عنصر)
يعرض على الشاشة

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

5. موجز عن تاريخ CSS

📌 هل تعلم: عندما صدر CSS لأول مرة في عام 1996، كان دعم المتصفحات محدوداً جداً. كان المطورون في ذلك الوقت يستخدمون الجداول المتداخلة للتخطيط، حتى غيّر CSS3 اللعبة حقاً.

CSS1 (1996): أقدم معيار CSS، يوفر قدرات أساسية في التنسيق مثل الخطوط والألوان والهوامش
CSS2 (1998): أضاف قدرات التخطيط مثل التموضع والطفو و z-index
CSS3 (2005–حتى الآن): تطوير معياري، أضاف border-radius والتدرجات والظلال والرسوم المتحركة وFlexbox وال_Grid والعديد من الميزات الجديدة
CSS4+ (قيد التطوير): تطور مستمر، يضيف استعلامات الحاوية وطبقات التتالي وغيرها من الميزات الجديدة

CSS اليوم قوي بشكل لا يصدق، قادر على تحقيق تأثيرات كانت تتطلب سابقاً JavaScript أو صوراً.

6. المفاهيم الأساسية في CSS

التتالي: يمكن تطبيق قواعد نمط متعددة على نفس العنصر، مع قواعد الأولوية لتحديد أي نمط يعمل
التوريث: بعض خصائص النمط تنتقل من العناصر الأبوية إلى العناصر التابعة
نموذج الصندوق: كل عنصر يُعامل كصندوق مستطيل يتكون من المحتوى والحشو والحدود والهامش
التصميم المتجاوب: من خلال استعلامات الوسائط وغيرها من التقنيات، تعمل الصفحات بشكل جيد على أجهزة مختلفة

▶ مثال

صفحة HTML بسيطة مع تنسيق CSS:

HTML

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial, sans-serif; }
    h1 { color: navy; }
  </style>
</head>
<body>
  <h1>مرحبا، CSS!</h1>
  <p>هذه فقرة منسقة.</p>
</body>
</html>

▶ جرّب الكود

يعرض المتصفح العنوان بلون كحلي، باستخدام خط Arial لكل النصوص. تتحكم CSS في وسم <style> في هذه الخصائص المرئية.

❓ أسئلة شائعة

س ما الفرق بين CSS وHTML؟

ج HTML يتولى "الهيكل العظمي والمحتوى" لصفحة الويب (العناوين والفقرات والصور)، بينما CSS يتولى "المظهر والتخطيط" (الألوان والأحجام والمواقع). HTML يحدد ما يوجد على الصفحة؛ CSS يحدد كيف تبدو تلك الأشياء.

س هل أحتاج لتعلم HTML قبل CSS؟

ج يُنصح بإتقان أساسيات HTML أولاً (معرفة العلامات الشائعة يكفي)، لأن CSS يُستخدم لتنسيق عناصر HTML. بدون فهم بنية HTML، لن يكون لدى CSS ما يعمل عليه.

س هل يمكن لـCSS إنشاء رسوم متحركة؟

ج نعم. يوفر CSS3 ميزات الانتقال والرسوم المتحركة (رسوم الإطارات الرئيسية) والتحويل، مما يتيح تأثيرات الويب الشائعة مثل تغيير لون الزر عند التمرير ومؤشرات التحميل وقلب البطاقات.

📖 ملخص

CSS هو أحد الأركان الثلاثة لتطوير الويب (HTML + CSS + JavaScript)
يتولى العرض البصري، محولاً الصفحات من "قابلة للقراءة" إلى "جميلة"
باستخدام CSS، يمكنك التحكم في مظهر كل بكسل على صفحة الويب
بعد ذلك، سنبدأ من بنية CSS الأساسية ونتعمق خطوة بخطوة

📝 تمارين

أنشئ ملف css-intro.html في مجلد مشروعك. فكّر في صفحات الويب التي رأيتها — أي الأجزاء تعتقد أن CSS مسؤول عنها؟
افتح موقع ويب تستخدمه، واستخدم أدوات المطور في المتصفح (F12) لعرض لوحة العناصر، وراقب لوحة الأنماط على يسار بنية HTML لترى قواعد CSS النشطة.
لخص تقسيم العمل بين CSS وHTML بكلماتك واكتبه في ملاحظات التمارين.

فريق Web-Tutorial التقني

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

من نحن