الفصل 1: ما هو CSS؟
CSS اختصار لـ (Cascading Style Sheets)، وتعني “أوراق الأنماط المتتالية”، وهي تقنية تُستخدم في تنسيق وتجميل صفحات الويب. HTML تُستخدم لبناء هيكل الصفحة، بينما CSS تتحكم في مظهرها.
لماذا سُميت “متتالية”؟
لأن الأنماط تتبع نظام “التدرج في الأهمية”، حيث يمكن تطبيق أكثر من أسلوب على عنصر معين، ويتم تحديد النمط الفعلي حسب ترتيب الأولوية.
الفصل 2: لماذا نستخدم CSS؟
- تحسين تجربة المستخدم: CSS يجعل الموقع يبدو منسقًا ومرتبًا وجذابًا.
- فصل التنسيق عن المحتوى: يسمح للمطور بالفصل بين هيكل الصفحة (HTML) وتصميمها (CSS).
- توفير الوقت والجهد: تغيير تصميم الموقع يتم من خلال تعديل ملف CSS واحد بدلًا من تعديل كل صفحة على حدة.
- التحكم في الواجهة بشكل كامل: من الألوان إلى الحركة والتحجيم.
- التجاوب مع الشاشات المختلفة: CSS يمكن استخدامه لتصميم صفحات تعمل على كل الأجهزة.
الفصل 3: أساسيات كتابة CSS
الهيكل الأساسي:
cssCopyEditselector {
property: value;
}
مثال:
cssCopyEdith1 {
color: red;
font-size: 24px;
}
أهم الخصائص:
| الخاصية | الاستخدام |
|---|---|
| color | تحديد لون النص |
| background-color | خلفية العنصر |
| font-size | حجم الخط |
| margin | المسافة الخارجية |
| padding | المسافة الداخلية |
| border | الحدود حول العنصر |
| display | طريقة عرض العنصر |
الفصل 4: طرق كتابة CSS
الطريقة الأولى: Inline CSS
يتم كتابتها مباشرة داخل وسم HTML.
htmlCopyEdit<h1 style="color: blue;">مرحبا بك</h1>
✅ مميزاتها:
- تُستخدم للتعديلات السريعة.
- سهلة الفهم للمبتدئين.
❌ عيوبها:
- تكرار ممل وغير عملي في المواقع الكبيرة.
- يصعب تعديل التصميم لاحقًا.
- تخلط بين الهيكل والتصميم.
الطريقة الثانية: Internal CSS
يتم وضع الكود داخل ملف HTML نفسه، بين وسم <style> في <head>.
htmlCopyEdit<head>
<style>
h1 {
color: green;
}
</style>
</head>
✅ مميزاتها:
- مناسبة للمشاريع الصغيرة أو صفحة واحدة.
- تفصل نوعًا ما بين التنسيق والمحتوى.
❌ عيوبها:
- عند وجود عدة صفحات، يجب تكرار الكود.
- لا تُعد الأفضل للتوسّع في المشروع.
الطريقة الثالثة: External CSS
يتم كتابة التنسيقات في ملف خارجي بامتداد .css، ويتم ربطه بالصفحة.
htmlCopyEdit<link rel="stylesheet" href="style.css">
cssCopyEdit/* داخل style.css */
h1 {
color: purple;
}
✅ مميزاتها:
- الأفضل على الإطلاق.
- سهل التعديل والتحديث.
- يمكن استخدامه على أكثر من صفحة بنفس الملف.
❌ عيوبها:
- تحتاج إنترنت أو تحميل الملف في بعض الأنظمة للعمل بشكل صحيح.
- لا تعمل وحدها بدون ملف HTML.
الفصل 5: مقارنة شاملة بين الطرق الثلاث
| المعيار | Inline CSS | Internal CSS | External CSS |
|---|---|---|---|
| السهولة | سهلة | سهلة | متوسطة |
| الأداء | بطيء | متوسط | عالي |
| التنظيم | سيء | جيد | ممتاز |
| الأفضل للمشاريع | لا | لا | نعم |
الفصل 6: كيف يتعامل المتصفح مع CSS؟
- المتصفح يقرأ HTML أولًا، ثم يتبع ترتيب الأنماط المرفقة.
- يعطي أولوية حسب القرب من العنصر: inline > internal > external.
- عند التعارض بين الأساليب، يتم اعتماد الأعلى في الأولوية إلا إذا تم استخدام
!important.
الفصل 7: مفاهيم متقدمة (تُفصّل لاحقًا في الفصول القادمة):
- الوراثة (Inheritance): بعض الخصائص تنتقل من العنصر الأب للابن تلقائيًا.
- الخصوصية (Specificity): مدى قوة كل نوع من أنواع الانتقاء.
- الأنماط المتضاربة: كيف يُحسم التعارض بين أكثر من نمط.
اترك تعليقاً