تحديد عنصر معين داخل class: `اسم_العنصر.اسم_class`
مثال: `.footer p { color: #f5f5f5; }`
##### التحكم في تدفق المحتوى
###### خاصية تجاوز السعة (Overflow)
للتحكم في المحتوى الأكبر من مساحة الصفحة
قيمها: visible, hidden, scroll, auto
القيمة `auto`: يتم قص المحتوى الزائد وإضافة شريط تمرير عند الحاجة
#### التحكم في تخطيط العناصر
##### نموذج الصندوق (Box Model)
###### المفهوم
تتعامل CSS مع كل عنصر HTML كما لو كان له صندوق خاص
يسمح بالتحكم في الأبعاد والحدود والفراغ حول كل صندوق
###### خصائص نموذج الصندوق
####### الإطار (Border)
حدود تفصل حافة كل صندوق عن الآخر
قد تكون مرئية أو غير مرئية
####### الهامش (Margin)
المساحة خارج حدود الإطار
####### الفراغ (Padding)
المساحة بين الإطار والمحتوى الداخلي
###### التحكم في الفراغ (Padding)
يمكن تحديد قيم لكل جانب من جوانب الفراغ:
`padding-top`: الفراغ العلوي
`padding-right`: الفراغ في الجهة اليمنى
`padding-bottom`: الفراغ السفلي
`padding-left`: الفراغ في الجهة اليسرى
يمكن استخدام نفس الطريقة المختصرة لتحديد الهامش (Margin)
###### تطبيق عملي للتنسيق
####### محاذاة النص (text-align)
تُستخدم لتوسيط النص داخل العنصر.
####### تطبيق الخصائص على الأقسام
`.main`
- `overflow: auto;`
- `text-align: center;`
- `background-color: #f5f5f5;`
- `padding-top: 20px;`
- `padding-bottom: 20px;`
`.photos`
- `overflow: auto;`
- `padding-top: 20px;`
- `padding-bottom: 40px;`
- `text-align: center;`
- `background-color: #F0EDE4;`
`.footer`
- `overflow: auto;`
- `padding-top: 20px;`
- `padding-bottom: 20px;`
- `text-align: center;`
- `background-color: #777777;`
###### ملاحظة مهمة
يجب الابتعاد عن استخدام الأرقام الكبيرة عند تغيير خصائص نموذج الصندوق، حيث إنها من الممكن أن تتسبب في تشويه مظهر الصفحات الإلكترونية.
#### محتوى صفحة مشجعي كرة القدم
##### الهدف
تشجيع اللاعبين أثناء المباراة.
##### التاريخ
بدأت في إنجلترا منتصف القرن التاسع عشر.
الرياضة الأكثر شعبية في العالم.
يتابعها أكثر من 250 مليون شخص في أكثر من 200 دولة.
ظاهرة عالمية تجمع الناس من مختلف الثقافات.
##### نبذة عن الصفحة
مكان لاكتشاف كل ما يتعلق بكرة القدم.
التواصل مع محبي كرة القدم الآخرين عبر الصور أو التعليقات.
##### معلومات مفيدة
البريد الإلكتروني: info@resample.com
مواقع زيارة: Fifa.com، UEFA.com
##### العناصر المرئية
###### Figure 1: Saudi National Team
تمثل جانب المنتخب الوطني في كرة القدم.
###### Figure 2: FIFA World Cup Trophy
تمثل الجائزة الكبرى في كرة القدم الدولية.
###### Figure 3: Football Stadium
توضح مكان إقامة المباريات.
#### التحكم في حجم ومحاذاة الصور
##### استخدام قواعد CSS
لتحديد حجم ومحاذاة الصور.
لجعل الصور أكثر جاذبية باستخدام خصائص أخرى.
##### تطبيق قواعد CSS على الصور
داخل قسم `.photos` باستخدام محدد `.photos img`.
##### خصائص CSS المستخدمة للصور
###### الإطار (Border)
`border-style: solid;`
`border-width: 2px;`
`border-color: #426C35;`
###### نصف قطر الإطار (border-radius)
`border-radius: 6px;`
لتغيير مظهر حواف الصورة.
###### الهامش (Margin)
`margin: 2px;`
###### ملاءمة الكائن (object-fit)
`object-fit: cover;`
###### موضع الكائن (object-position)
`object-position: top;`
##### المعرض (Photos)
قسم لعرض الصور بعد تطبيق أنماط CSS عليه.
#### تنسيق شريط التصفح
##### تنسيق قائمة التنقل الرئيسية (`.menu ul`)
`text-align: center;`
`padding-top: 20px;`
`padding-bottom: 20px;`
`text-decoration: none;`
##### تنسيق عناصر القائمة (`.menu li`)
`display: inline-block;`
`text-align: center;`
##### تنسيق روابط القائمة (`.menu li a`)
`display: inline-block;`
`height: auto;`
`width: 150px;`
`color: #333333;`
`background-color: #f5f5f5;`
`padding: 10px;`
`margin: 4px;`
`text-align: center;`
`font-size: 18px;`
`font-weight: bold;`
`text-decoration: none;`
`border-radius: 4px;`
##### تأثير التمرير (`.menu li a:hover`)
`background-color: #d6d599;`
#### عرض النتيجة النهائية في المتصفح
##### شكل الصفحة في المتصفح
تظهر الصفحة في المتصفح مع شريط تصفح (Navigation Bar) بعد تطبيق التنسيقات عليه.
##### تفاعل واجهة المستخدم
يتغير لون زر شريط التصفح عند تمرير الفأرة عليه (Hover Effect).
```
نقاط مهمة
تظهر صفحة الويب في المتصفح بعد تطبيق جميع تنسيقات HTML و CSS.
يظهر شريط التصفح (Navigation Bar) بتنسيقاته النهائية في المتصفح.
أحد تفاعلات واجهة المستخدم هو تغيير لون الزر عند تمرير الفأرة عليه.
📋 المحتوى المنظم
📖 محتوى تعليمي مفصّل
نوع: محتوى تعليمي
ستظهر الصفحة على المتصفح بالشكل التالي:
نوع: محتوى تعليمي
شريط التصفح بعد إجراء عمليات التنسيق.
نوع: محتوى تعليمي
عندما تمرر الفأرة على الزر يتغير لونه، مثل هذا.
نوع: METADATA
وزارة التعليم
Ministry of Education
2025 - 1447
246
🔍 عناصر مرئية
Football Fan Page
A screenshot of a web browser interface. The browser tab is labeled 'Football Fan Page'. The URL bar shows 'C:/HTML/Football_Fan_Page.html'. The displayed web page has a green navigation bar at the top with buttons labeled 'الصفحة الرئيسة', 'التاريخ', 'المعرض', 'نبذة', and 'اتصل بنا'. Below the navigation bar, the main title of the web page is 'تعلّم كرة القدم على جمع الناس معًا', followed by a subtitle 'الهدف من حضور الجمهور في هذه اللعبة هو تشجيع اللاعبين أثناء المباراة.'. A section header 'التاريخ' is present, under which a paragraph of text reads: 'تعد كرة القدم رياضة ذات تاريخ طويل، نشأت بشكلها الحالي في إنجلترا في منتصف القرن التاسع عشر. وقدمت أندية كرة القدم منذ القرن الخامس عشر لكنها كانت غير منظمة وبدون معرفة رسمية. تم نشر أنشطة هذه الأندية في أواخر القرن التاسع عشر، ولكن القليل منها فقط استمر بعد ذلك. ومعظم المؤرخين أن الأندية التي استمرت بنشاطها كانت تقع في مناطق أكثر ثراء قليلاً، حيث كان الناس لا يعملون بعد ظهر يوم السبت وكانوا قادرين على تحمل نفقات حضور المباريات.'. Another section header 'المعرض' is displayed, followed by two images side-by-side. The left image shows a football team in green jerseys on a stadium field. The right image shows a golden football trophy, identified as the FIFA World Cup trophy, inside a display case with 'FIFA WORLD FOOTBALL MUSEUM' visible.
A standalone green navigation bar, identical in structure to the one shown in the simulated web browser. It contains five buttons: 'الصفحة الرئيسة', 'التاريخ', 'المعرض', 'نبذة', and 'اتصل بنا'. The 'المعرض' button is highlighted with a lighter green color, indicating a hover effect.
📄 النص الكامل للصفحة
ستظهر الصفحة على المتصفح بالشكل التالي:
شريط التصفح بعد إجراء عمليات التنسيق.
عندما تمرر الفأرة على الزر يتغير لونه، مثل هذا.
وزارة التعليم
Ministry of Education
2025 - 1447
246
--- VISUAL CONTEXT ---
**FIGURE**: Football Fan Page
Description: A screenshot of a web browser interface. The browser tab is labeled 'Football Fan Page'. The URL bar shows 'C:/HTML/Football_Fan_Page.html'. The displayed web page has a green navigation bar at the top with buttons labeled 'الصفحة الرئيسة', 'التاريخ', 'المعرض', 'نبذة', and 'اتصل بنا'. Below the navigation bar, the main title of the web page is 'تعلّم كرة القدم على جمع الناس معًا', followed by a subtitle 'الهدف من حضور الجمهور في هذه اللعبة هو تشجيع اللاعبين أثناء المباراة.'. A section header 'التاريخ' is present, under which a paragraph of text reads: 'تعد كرة القدم رياضة ذات تاريخ طويل، نشأت بشكلها الحالي في إنجلترا في منتصف القرن التاسع عشر. وقدمت أندية كرة القدم منذ القرن الخامس عشر لكنها كانت غير منظمة وبدون معرفة رسمية. تم نشر أنشطة هذه الأندية في أواخر القرن التاسع عشر، ولكن القليل منها فقط استمر بعد ذلك. ومعظم المؤرخين أن الأندية التي استمرت بنشاطها كانت تقع في مناطق أكثر ثراء قليلاً، حيث كان الناس لا يعملون بعد ظهر يوم السبت وكانوا قادرين على تحمل نفقات حضور المباريات.'. Another section header 'المعرض' is displayed, followed by two images side-by-side. The left image shows a football team in green jerseys on a stadium field. The right image shows a golden football trophy, identified as the FIFA World Cup trophy, inside a display case with 'FIFA WORLD FOOTBALL MUSEUM' visible.
Context: Illustrates how a web page appears in a browser, demonstrating basic web page layout and content.
**FIGURE**: Untitled
Description: A standalone green navigation bar, identical in structure to the one shown in the simulated web browser. It contains five buttons: 'الصفحة الرئيسة', 'التاريخ', 'المعرض', 'نبذة', and 'اتصل بنا'. The 'المعرض' button is highlighted with a lighter green color, indicating a hover effect.
Context: Demonstrates a user interface interaction, specifically a hover effect on a navigation button.
🎴 بطاقات تعليمية للمراجعة
عدد البطاقات: 2 بطاقة لهذه الصفحة
ما هو الهدف الأساسي من استخدام تأثير التمرير (Hover Effect) في واجهات المستخدم على الويب؟
أ) إخفاء العنصر تمامًا عن المستخدم لتبسيط الواجهة.
ب) تغيير مظهر العنصر (مثل لونه) عندما يمرر المستخدم مؤشر الفأرة فوقه، لتحسين التفاعل وتوضيح العناصر القابلة للنقر.
ج) فتح صفحة جديدة تلقائيًا دون الحاجة للنقر.
د) تشغيل صوت أو نغمة لتنبيه المستخدم.
الإجابة الصحيحة: b
الإجابة: تغيير مظهر العنصر (مثل لونه) عندما يمرر المستخدم مؤشر الفأرة فوقه، لتحسين التفاعل وتوضيح العناصر القابلة للنقر.
الشرح: 1. تأثير التمرير (Hover Effect) هو تفاعل مرئي يحدث عند تمرير مؤشر الفأرة فوق عنصر. 2. يهدف إلى تحسين تجربة المستخدم (UX) من خلال: - إعلام المستخدم بأن العنصر تفاعلي وقابل للنقر. - توفير تغذية بصرية فورية. - تحسين التنقل وسهولة الاستخدام.
تلميح: فكر في كيفية إعلام المستخدم بأن عنصرًا ما تفاعلي قبل النقر عليه.
التصنيف: تعريف | المستوى: سهل
ما هو الغرض الأساسي من شريط التنقل (Navigation Bar) في تصميم صفحات الويب؟
أ) عرض الإعلانات التجارية للموقع لزيادة الإيرادات.
ب) توفير روابط منظمة وواضحة تسمح للمستخدم بالانتقال بين الأقسام أو الصفحات الرئيسية للموقع.
ج) استبدال محرك البحث في المتصفح نفسه.
د) عرض حالة الطقس أو الأخبار العاجلة فقط.
الإجابة الصحيحة: b
الإجابة: توفير روابط منظمة وواضحة تسمح للمستخدم بالانتقال بين الأقسام أو الصفحات الرئيسية للموقع.
الشرح: 1. شريط التنقل هو عنصر واجهة مستخدم ثابت عادةً. 2. يحتوي على مجموعة من الأزرار أو الروابط النصية. 3. وظيفته الأساسية هي تسهيل التنقل داخل الموقع، مما يسمح للمستخدم بالوصول بسرعة إلى أقسام مثل: الصفحة الرئيسية، معرض الصور، صفحة الاتصال، وغيرها.
تلميح: فكر في العنصر الذي يساعدك على العثور على المحتوى المختلف داخل موقع واحد.