1 – مقدمة عن CSS – المستوى الأول: أساسيات CSS
🟦 المستوى الأول: أساسيات CSS
1. مقدمة عن CSS
ما هي CSS؟
CSS اختصار لـ Cascading Style Sheets، وهي لغة مسؤولة عن تصميم شكل صفحات الويب.
لو اعتبرنا أن HTML هو “العظم والهيكل” لأي صفحة ويب، فإن CSS هو “الملابس والألوان والتنسيق” الذي يعطي الصفحة جمالًا وأناقة.
-
HTML = هيكل المحتوى (نصوص، صور، عناوين، روابط).
-
CSS = تنسيق المحتوى (ألوان، خطوط، أحجام، أماكن العناصر).
لماذا نستخدم CSS؟
-
فصل المحتوى عن التصميم
-
HTML تهتم بالمعنى والمحتوى.
-
CSS تهتم بالشكل والتنسيق.
-
-
التحكم الكامل في مظهر الموقع
-
تغيير الألوان والخلفيات.
-
التحكم في الخطوط وأحجامها.
-
تنظيم أماكن العناصر (layout).
-
-
إعادة الاستخدام (Reusability)
-
يمكنك كتابة ملف CSS واحد وربطه بعشرات الصفحات، وبالتالي أي تعديل يتم تطبيقه على جميع الصفحات مرة واحدة.
-
-
تصميم متجاوب (Responsive Design)
-
باستخدام CSS، تستطيع جعل الموقع متوافق مع الشاشات المختلفة: كمبيوتر – تابلت – موبايل.
-
-
إضافة لمسات جمالية
-
حركات (Animations).
-
تأثيرات عند التمرير أو المرور بالفأرة (hover effects).
-
ظلال ودوائر وانحناءات.
-
2. الفرق بين أنواع CSS
✅ 1- Inline CSS
-
معناها كتابة التنسيقات مباشرة داخل الوسم (tag) نفسه.
-
مثال:
-
📌 مميزاته:
-
سريع وبسيط للتجارب.
📌 عيوبه:
-
غير منظم.
-
صعب إعادة الاستخدام (لا يصلح لمشاريع كبيرة).
✅ 2- Internal CSS
-
معناها كتابة التنسيقات داخل ملف HTML نفسه، لكن في وسم <style> داخل وسم <head>.
-
مثال:
-
📌 مميزاته:
-
منظم أكثر من Inline.
-
مناسب للصفحات الصغيرة.
📌 عيوبه:
-
الكود يظل مرتبط بصفحة واحدة فقط.
✅ 3- External CSS
-
معناها كتابة التنسيقات في ملف خارجي بامتداد .css وربطه بصفحة HTML.
-
مثال:
📄 ملف: style.css
📄 ملف: index.html
📌 مميزاته:
-
أفضل أسلوب على الإطلاق.
-
يفصل التصميم عن المحتوى.
-
يمكن إعادة استخدامه في عدة صفحات.
-
يسهل صيانة الكود.
📌 عيوبه:
-
يحتاج لملف إضافي (لكن هذا ليس عيبًا حقيقيًا في المشاريع الكبيرة).
⚖️ ملخص سريع:
-
Inline CSS → مناسب للتجارب السريعة أو تعديل بسيط.
-
Internal CSS → مناسب للمشاريع الصغيرة أو صفحة واحدة.
-
External CSS → الأفضل دائمًا للمشاريع الحقيقية والمتوسطة والكبيرة.
اتصل الآن
تواصل واتساب
