الإعلام الآلي — إنشاء موقع ويب: أساسيات CSS — الأولى متوسط — المنهاج الجزائري

إنشاء موقع ويب: أساسيات CSS

في هذا الدرس من الإعلام الآلي للسنة الأولى متوسط، سنتعلم كيفية استخدام CSS (Cascading Style Sheets) لتنسيق صفحات HTML وجعلها جميلة وجذابة.

ما هي CSS؟

CSS هي لغة تنسيق تستخدم للتحكم في مظهر صفحات HTML. تتيح لنا تغيير الألوان والخطوط والأحجام والهوامش والخلفيات وغيرها. CSS تعني “صفحات الأنماط المتتالية” (Cascading Style Sheets).

طرق إضافة CSS إلى HTML

1- التضمين الداخلي (Inline): نضيف style كخاصية داخل الوسم.
مثال: <p style=”color: red; font-size: 18px;”>نص أحمر</p>

2- التضمين الداخلي (Internal): نكتب CSS داخل وسم <style> في رأس الصفحة.
مثال: p { color: blue; font-size: 20px; }

3- التضمين الخارجي (External): نربط صفحة HTML بملف CSS منفصل.
مثال: <link rel=”stylesheet” href=”style.css”>

قواعد CSS الأساسية

المُحدد (Selector): يحدد العنصر الذي نريد تنسيقه (مثل p, h1, .class, #id).
الخاصية (Property): الميزة التي نريد تغييرها (مثل color, font-size, background-color).

أمثلة:
body { background-color: #f0f0f0; font-family: Arial; }
h1 { color: #333; text-align: center; }
p { font-size: 16px; line-height: 1.5; }

أهم خصائص CSS

color: لون النص.
background-color: لون الخلفية.
font-size: حجم الخط.
font-family: نوع الخط.
text-align: محاذاة النص (left, center, right).
margin: الهوامش الخارجية.
padding: الحواف الداخلية.
border: الحدود.

تمارين تطبيقية

التمرين 1: اكتب صفحة HTML تحتوي على عنوان رئيسي وفقرة، واستخدم CSS لجعل الخلفية زرقاء فاتحة والنص أبيض.

التمرين 2: أنشئ صفحة HTML واربطها بملف CSS خارجي يغير لون العناوين إلى الأحمر ويزيد حجم الخط.

التمرين 3: أضف إطاراً (border) حول فقرة في صفحة HTML باستخدام CSS.

الخلاصة

CSS هي لغة تنسيق المواقع الإلكترونية، تجعل صفحات HTML أكثر جمالاً وتنظيماً. راجع درس إنشاء موقع ويب: أساسيات HTML ودرس معالج النصوص: إنشاء وتحرير المستندات.

📍 دروس مشابهة:

• التربية الإسلامية — آيات الصيام: أحكام الصيام ومبطلاته — السنة الثانية متوسط — المنهاج الجزائري
• التربية الإسلامية — الوسائل النبوية لتربية النفس: الصيام والقيام والذكر — السنة الثانية متوسط — المنهاج الجزائري
• التربية الإسلامية — إكرام الضيف (تمارين وحلول) — السنة الثانية متوسط