مدونة التربية و التعليم في الجزائر – دروس، فروض، نتائج امتحانات مدونة التربية والتعليم في الجزائر | تحضير الدروس، فروض واختبارات، نتائج البكالوريا وBEM، مسابقات التوظيف، والتوجيه المدرسي للطلاب وأولياء الأمور.
أساسيات CSS: تنسيق صفحات الويب
CSS (Cascading Style Sheets) هي لغة تستخدم لوصف شكل وتنسيق مستند HTML. سنتعرف في هذا الدرس على أساسيات CSS.
ما هي CSS؟
CSS هي لغة تصميم تحدد كيف تظهر عناصر HTML على الشاشة. تفصل بين المحتوى (HTML) والتنسيق (CSS).
طرق إضافة CSS
داخلي (Inline): داخل وسم HTML باستخدام خاصية style.
<p style=”color: red;”>نص أحمر</p>
داخلي (Internal): في قسم <style> داخل <head>.
خارجي (External): في ملف منفصل .css يرتبط بالصفحة.
المحددات (Selectors)
المحدد حسب العنصر: p { color: blue; }
المحدد حسب class: .my-class { font-size: 20px; }
المحدد حسب id: #my-id { background-color: yellow; }
خصائص CSS الأساسية
color: لون النص.
background-color: لون الخلفية.
font-size: حجم الخط.
font-family: نوع الخط.
margin: الهوامش الخارجية.
padding: الحشو الداخلي.
border: الحدود.
تمارين تطبيقية
التمرين 1: أنشئ صفحة HTML مع CSS داخلي يجعل لون الخلفية رمادياً والنص باللون الأزرق.
التمرين 2: أنشئ ملف CSS خارجياً واربطه بصفحة HTML.
التمرين 3: استخدم محدد class لتنسيق فقرتين بلونين مختلفين.
التمرين 4: أنشئ بطاقة (card) بسيطة باستخدام CSS (خلفية، حواف مستديرة، ظل).
للمزيد: أساسيات HTML و قواعد البيانات.