مدونة التربية و التعليم في الجزائر – دروس، فروض، نتائج امتحانات مدونة التربية والتعليم في الجزائر | تحضير الدروس، فروض واختبارات، نتائج البكالوريا وBEM، مسابقات التوظيف، والتوجيه المدرسي للطلاب وأولياء الأمور.
CSS: تنسيق صفحات الويب – الألوان والخطوط – الثانية ثانوي – المنهاج الجزائري
CSS (Cascading Style Sheets) هي لغة تنسيق صفحات الويب. باستخدام CSS، نستطيع تغيير ألوان الصفحة، نوع الخط، حجمه، تخطيط العناصر، وغير ذلك. في هذا الدرس سنتعلم أساسيات CSS.
ما هي CSS؟
CSS هي لغة تستخدم لوصف شكل وتنسيق مستند HTML. تفصل CSS بين محتوى الصفحة (HTML) وشكلها (CSS). هذا يسمح بتغيير شكل الموقع بالكامل بتعديل ملف CSS واحد. CSS توفر تحكماً دقيقاً في الألوان والخطوط والهوامش والخلفيات والتخطيط.
طرق إضافة CSS إلى HTML
- داخلي (Inline): باستخدام خاصية style في عنصر HTML. مثال: <p style=”color: blue;”>نص أزرق</p>
- داخلي في الرأس (Internal): باستخدام عنصر <style> في <head>. مثال: <style> p { color: red; } </style>
- خارجي (External): ربط ملف CSS خارجي باستخدام <link>. أفضل طريقة لأنها تفصل التنسيق عن المحتوى.
بناء جملة CSS
قاعدة CSS تتكون من مُحدد (Selector) وكتلة إعلان (Declaration Block). المُحدد يحدد العنصر المراد تنسيقه. كتلة الإعلان تحتوي على خصائص وقيم. مثال: h1 { color: blue; font-size: 24px; } هنا h1 هو المحدد، color و font-size هما الخصائص، blue و 24px هما القيم.
الألوان في CSS
- أسماء الألوان: red، blue، green، yellow، black، white، orange، purple.
- الترميز السداسي العشري (Hex): #FF0000 (أحمر)، #00FF00 (أخضر)، #0000FF (أزرق).
- RGB: rgb(255, 0, 0) (أحمر).
- RGBA: rgba(255, 0, 0, 0.5) (أحمر شفاف).
الخطوط في CSS
- font-family: نوع الخط (Arial, Times New Roman, sans-serif).
- font-size: حجم الخط (px, em, rem).
- font-weight: سمك الخط (normal, bold, 100-900).
- font-style: نمط الخط (normal, italic).
- text-align: محاذاة النص (left, right, center, justify).
مثال عملي
<style>
body { background-color: #f0f0f0; font-family: Arial, sans-serif; }
h1 { color: #333; text-align: center; }
p { font-size: 16px; color: #666; line-height: 1.5; }
.highlight { background-color: yellow; font-weight: bold; }
</style>
تمارين
- أنشئ صفحة HTML واجعل خلفيتها زرقاء فاتحة.
- غير لون العناوين إلى اللون الأحمر الداكن.
- اجعل الفقرات بخط 18 بكسل ومحاذاة لليمين.
- أضف class للعناصر المهمة لتتميز بلون خلفية مختلف.