مدونة التربية و التعليم في الجزائر – دروس، فروض، نتائج امتحانات مدونة التربية والتعليم في الجزائر | تحضير الدروس، فروض واختبارات، نتائج البكالوريا وBEM، مسابقات التوظيف، والتوجيه المدرسي للطلاب وأولياء الأمور.
CSS: تنسيق صفحات الويب – الإعلام الآلي
CSS (Cascading Style Sheets) هي لغة تصميم تتحكم في مظهر صفحات HTML. تفصل بين المحتوى (HTML) والتنسيق (CSS).
1. طرق إضافة CSS
- داخلي (Inline): باستخدام خاصية style في الوسم نفسه
- داخلي (Internal): باستخدام وسم <style> داخل <head>
- خارجي (External): ملف .css منفصل يربط بـ <link>
2. القواعد الأساسية
قاعدة CSS تتكون من: منتقي (Selector) وكتلة تعريف (Declaration Block) تحتوي على خواص وقيم.
مثال: h1 { color: blue; font-size: 24px; }
3. المنتقيات (Selectors)
- عناصر: h1, p, div
- كلاس (Class): .classname
- ID: #idname
- مركب: div p (وسم p داخل div)
4. الخواص الشائعة
- color: لون النص
- background-color: لون الخلفية
- font-size: حجم الخط
- margin: الهامش الخارجي
- padding: الهامش الداخلي
- border: الحدود
- width, height: العرض والارتفاع
- display: طريقة العرض (block, inline, flex)
5. تمارين تطبيقية
التمرين 1: اكتب CSS لتغيير لون عنوان h1 إلى الأحمر.
التمرين 2: أنشئ class باسم “card” له خلفية رمادية وحدود وزوايا دائرية.
التمرين 3: استخدم Flexbox لعرض 3 مربعات بجانب بعضها.
6. الحلول
حل 1: h1 { color: red; }
حل 2: .card { background: #f0f0f0; border: 1px solid #ccc; border-radius: 8px; padding: 20px; }
حل 3: .container { display: flex; gap: 10px; } .item { flex: 1; }
للمزيد من الدروس راجع التناسبية والدوال الخطية ودرس الدوال المرجعية: دالة المربع والمقلوب.