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

CSS3: التنسيق المتقدم لصفحات الويب

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

التحكم في الخلفيات

/* ألوان متدرجة */
.gradient {
    background: linear-gradient(to right, red, blue);
    background: radial-gradient(circle, yellow, green);
}

/* صور خلفية متعددة */
.multi-bg {
    background: url('img1.png'), url('img2.png');
    background-size: cover, contain;
}

الظلال (Shadows)

/* ظل الصندوق */
.box {
    box-shadow: 10px 10px 20px rgba(0,0,0,0.5);
}

/* ظل النص */
.text {
    text-shadow: 2px 2px 4px #333;
}

التصميم المتجاوب (Responsive Design)

يمكن جعل الصفحة تتكيف مع أحجام الشاشات المختلفة باستخدام Media Queries:

/* للشاشات الصغيرة */
@media (max-width: 768px) {
    .container {
        width: 100%;
        flex-direction: column;
    }
}

/* للشاشات المتوسطة */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        width: 80%;
    }
}

الحركات (Animations)

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.element {
    animation: fadeIn 1s ease-in-out;
}

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

التمرين 1: صمم بطاقة (Card) احترافية بظل وزوايا مدورة باستخدام CSS.

التمرين 2: اكتب CSS لصفحة تتكيف مع شاشات الهواتف والحواسيب باستخدام Flexbox و Media Queries.

التمرين 3: أنشئ زراً متحركاً يتغير لونه عند تمرير الفأرة فوقه باستخدام transition.

للمزيد من المعلومات، راجع درس الخوارزميات المتقدمة ودرس الشبكات.

📍 دروس مشابهة

• الإعلام الآلي — لغة C: المصفوفات ثنائية البعد — الثانية ثانوي (شعب علمية) — بكالوريا — المنهاج الجزائري
• الإعلام الآلي — HTML5: إدراج الوسائط المتعددة (الصوت والفيديو) — الثانية ثانوي (شعب علمية) — بكالوريا — المنهاج الجزائري