مدونة التربية و التعليم في الجزائر – دروس، فروض، نتائج امتحانات مدونة التربية والتعليم في الجزائر | تحضير الدروس، فروض واختبارات، نتائج البكالوريا وBEM، مسابقات التوظيف، والتوجيه المدرسي للطلاب وأولياء الأمور.
بعد تعلم إنشاء صفحات الويب بلغة HTML، يأتي دور CSS (Cascading Style Sheets) وهي لغة تنسيق صفحات الويب التي تتحكم في مظهر العناصر: الألوان، الخطوط، الخلفيات، التباعد، والتخطيط العام للصفحة.
الأهداف التعليمية
- أن يتعرف المتعلم على مفهوم CSS وأهميته في تصميم الويب
- أن يميّز بين طرق إضافة CSS إلى HTML (داخلي، خارجي، مضمن)
- أن يطبق خصائص التنسيق الأساسية (اللون، الخط، الخلفية، الهامش)
- أن يعدّل مظهر صفحة ويب باستخدام CSS
الشرح المبسط
ما هي CSS؟ لغة تنسيق تُستخدم للتحكم في شكل عناصر HTML. تفصل CSS بين محتوى الصفحة (HTML) ومظهرها، مما يسهل عملية الصيانة والتحديث.
طرق إضافة CSS:
- CSS داخلي (Internal): يوضع داخل وسم
<style>في قسم<head>. - CSS خارجي (External): يكتب في ملف منفصل
.cssويربط بالصفحة عبر<link>— وهي الطريقة المفضلة. - CSS مضمن (Inline): يضاف مباشرة إلى الوسم عبر الخاصية
style="".
أهم خصائص CSS: color (لون النص)، background-color (لون الخلفية)، font-size (حجم الخط)، font-family (نوع الخط)، margin (الهامش الخارجي)، padding (الحشو الداخلي)، text-align (محاذاة النص).
أمثلة محلولة
المثال 1: اكتب كود CSS يجعل عنوان الصفحة باللون الأزرق وحجم الخط 24px ومحاذاة في المنتصف.
الحل:
<style>
h1 { color: blue; font-size: 24px; text-align: center; }
</style>
المثال 2: كيف تجعل خلفية الصفحة باللون الرمادي الفاتح باستخدام CSS خارجي؟
الحل: ننشئ ملف style.css ونكتب فيه: body { background-color: #f0f0f0; } ثم نربطه في HTML: <link rel="stylesheet" href="style.css">
تمارين تطبيقية
- اكتب كود CSS يغير لون جميع الفقرات (p) إلى اللون الأخضر الداكن مع حجم خط 16px.
- ما الفرق بين خاصيتي margin و padding في CSS؟ اشرح بمثال.
- أنشئ صفحة HTML بسيطة تحتوي على عنوان وفقرة، وطبّق عليها تنسيقات CSS خارجية.
نشاط منزلي
صمم صفحة HTML بسيطة عن هوايتك المفضلة، واستخدم CSS لتنسيقها: اختر ألواناً مناسبة، نوع خط جميل، وأضف خلفية لطيفة. احفظ الملفين (HTML و CSS) في مجلد واحد.
📍 دروس مشابهة
- إنشاء صفحة ويب بلغة HTML — مقدمة في تصميم صفحات الويب — الإعلام الآلي — السنة الرابعة متوسط
- الأمن السيبراني — حماية المعلومات والبيانات — الإعلام الآلي — السنة الرابعة متوسط