CSS3: تنسيق المواقع الإلكترونية وتصميمها – الإعلام الآلي — السنة الثانية ثانوي (شعبة علوم تجريبية) — المنهاج الجزائري

CSS3: تنسيق المواقع الإلكترونية وتصميمها

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

طرق إضافة CSS

• داخلي (Inline): باستخدام الخاصية style داخل الوسم: <p style=”color: red;”>.
• داخلي (Internal): داخل وسم <style> في رأس الصفحة.
• خارجي (External): ملف منفصل بامتداد .css يربط بالصفحة باستخدام <link>.

المحددات (Selectors)

• محدد العنصر: p { color: blue; } – يطبق على كل وسوم p.
• محدد الفئة (Class): .class-name { } – يطبق على elements with that class.
• محدد المعرف (ID): #id-name { } – يطبق على عنصر واحد.
• المحددات المتقدمة: div > p (الطفل المباشر)، div + p (الأخ المجاور)، [type=”text”] (حسب الخاصية).

الخصائص الأساسية

color: لون النص.
background-color, background-image: الخلفية.
font-family, font-size, font-weight: خصائص الخط.
margin, padding, border: المسافات والحدود.
width, height: الأبعاد.
display: نوع العرض (block, inline, flex, grid).

Flexbox: تخطيط مرن

Flexbox يسهل توزيع المسافات بين العناصر في صفحة الويب:
.container { display: flex; justify-content: center; align-items: center; }
خصائص الاتجاه: flex-direction (row/column).
توزيع المسافات: justify-content (center, space-between, space-around).

Grid: التخطيط الشبكي

CSS Grid يوفر تخطيطاً ثنائي الأبعاد:
.container { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 20px; }

الحركات والانتقالات

transition: تسهيل تغير الخصائص بمرور الوقت (مثال: transition: all 0.3s ease).
@keyframes: إنشاء حركات مخصصة (مثال: حركة دوران أو اهتزاز).

تمارين

1. أنشئ صفحة HTML تحتوي على ثلاثة أقسام ملونة مختلفة باستخدام Flexbox.
2. صمم بطاقة منتج باستخدام CSS: صورة، عنوان، وصف، سعر، زر شراء.
3. أنشئ قائمة تنقل أفقية بتأثير hover يغير لون الخلفية.
4. استخدم CSS Grid لإنشاء تخطيط شبكي لعرض معرض صور (3 أعمدة).

للمزيد من الدروس العلمية، راجع درس البيئة الصحراوية: تكيفات الكائنات الحية، كما يمكنك الاطلاع على النظام البيئي: مكوناته وتوازنه.