📚 تدريب 3: تنسيق CSS

المفاهيم الأساسية

استعلامات الوسائط (Media Queries): قاعدة CSS تُستخدم لتطبيق أنماط مختلفة بناءً على خصائص الجهاز (مثل عرض الشاشة).

خريطة المفاهيم

```markmap

تصميم الموقع الإلكتروني

الموقع الإلكتروني المستجيب

التصميم المستجيب

#### الأدوات

##### استعلامات الوسائط (Media Queries)

###### أماكن الاستخدام

####### داخل ملف HTML (CSS الداخلي)

######### مثال تطبيقي

########## تدريب 2

########### المطلوب: إضافة استعلام وسائط إلى مقطع HTML معطى

########### الشرط: `@media screen and (max-width: 600px)`

########### الإجراء: (يجب على الطالب تحديده)

########### المقطع البرمجي الأساسي

############ يحتوي على:

############- إعدادات الصفحة (``، `dir="rtl"`)

############- تنسيق CSS داخلي (لون خلفية `grey`)

############- محتوى HTML (`

`، `

`)

########## تدريب 3

########### المطلوب: تنسيق جزء `div` معين

########### التنسيقات المطلوبة:

############- ضبط الهامش (Margin): 20 بكسل

############- تلوين النص: أخضر

############- ضبط الحدود (Border): 3 بكسل، لون أسود، ثابت (Solid)

############- إضافة استعلام وسائط: لتغيير لون الخلفية إذا كانت الشاشة أصغر من 600 بكسل

########### المقطع البرمجي الأساسي

############ يحتوي على:

############- إعدادات الصفحة (``، `dir="rtl" lang="ar"`)

############- تنسيق CSS داخلي (لون خلفية `lightgrey` للعنوان `h1`)

############- محتوى HTML (`

`، `

`، `

`)

```

نقاط مهمة

• التمرين يتطلب تطبيق أربعة أوامر CSS على عنصر `
  ` محدد.
• أحد هذه الأوامر هو استعلام وسائط (`@media`) يتفاعل مع عرض الشاشة.
• يجب تعديل التنسيقات داخل الوسم `