تحديد عنصر معين داخل class: `اسم_العنصر.اسم_class`
مثال: `.footer p { color: #f5f5f5; }`
##### التحكم في تدفق المحتوى
###### خاصية تجاوز السعة (Overflow)
للتحكم في المحتوى الأكبر من مساحة الصفحة
قيمها: visible, hidden, scroll, auto
القيمة `auto`: يتم قص المحتوى الزائد وإضافة شريط تمرير عند الحاجة
```
نقاط مهمة
لتنسيق عناصر class نستخدم النقطة (.) قبل اسمه.
يمكن تحديد عنصر HTML معين داخل class بكتابة اسم العنصر ثم النقطة ثم اسم class.
خاصية `overflow` تأخذ أربع قيم، منها `auto` التي تضيف شريط تمرير تلقائياً عند الحاجة لرؤية المحتوى الزائد.
📋 المحتوى المنظم
📖 محتوى تعليمي مفصّل
محدد class
نوع: محتوى تعليمي
لتنسيق العناصر في class معين تحتاج إلى استخدام النقطة (.) قبل اسم class. على سبيل المثال المقطع البرمجي التالي لون الخلفية فقط في قسم menu class.
نوع: محتوى تعليمي
.menu {
background-color: #426C35;
}
نوع: محتوى تعليمي
يمكنك أيضاً تحديد عناصر HTML التي يجب أن تتأثر بمحدد class. وللقيام بذلك، ابدأ باسم العنصر، ثم اكتب النقطة (.) متبوعة باسم class.
على سبيل المثال المقطع البرمجي التالي لون النص الموجود فقط بين وسوم <p> لقسم class.
نوع: محتوى تعليمي
.footer p {
color: #f5f5f5;
}
خاصية تجاوز السعة
نوع: محتوى تعليمي
خاصية تجاوز السعة (Overflow property) توضح في ملف CSS للتحكم في فيما يحدث للمحتوى عندما يكون أكبر من أن يتناسب مع مساحة الصفحة. تأخذ خاصية تجاوز السعة أربعة قيم:
نوع: محتوى تعليمي
ستستخدم القيمة التلقائية (auto) وتعني أن تجاوز السعة قد تم قصه، ويضاف شريط تمرير عندما يكون من الضروري رؤية باقي المحتوى.
نوع: METADATA
وزارة التعليم
Ministry of Education
239
2025 - 1447
🔍 عناصر مرئية
A diagram showing a container with a grid of 6 smaller boxes inside, suggesting content layout or overflow.
A list of four options presented as buttons or selectable items, each with Arabic text and English translation in parentheses.
📄 النص الكامل للصفحة
--- SECTION: محدد class ---
لتنسيق العناصر في class معين تحتاج إلى استخدام النقطة (.) قبل اسم class. على سبيل المثال المقطع البرمجي التالي لون الخلفية فقط في قسم menu class.
.menu {
background-color: #426C35;
}
يمكنك أيضاً تحديد عناصر HTML التي يجب أن تتأثر بمحدد class. وللقيام بذلك، ابدأ باسم العنصر، ثم اكتب النقطة (.) متبوعة باسم class.
على سبيل المثال المقطع البرمجي التالي لون النص الموجود فقط بين وسوم <p> لقسم class.
.footer p {
color: #f5f5f5;
}
--- SECTION: خاصية تجاوز السعة ---
خاصية تجاوز السعة (Overflow property) توضح في ملف CSS للتحكم في فيما يحدث للمحتوى عندما يكون أكبر من أن يتناسب مع مساحة الصفحة. تأخذ خاصية تجاوز السعة أربعة قيم:
ستستخدم القيمة التلقائية (auto) وتعني أن تجاوز السعة قد تم قصه، ويضاف شريط تمرير عندما يكون من الضروري رؤية باقي المحتوى.
وزارة التعليم
Ministry of Education
239
2025 - 1447
--- VISUAL CONTEXT ---
**DIAGRAM**: Untitled
Description: A diagram showing a container with a grid of 6 smaller boxes inside, suggesting content layout or overflow.
Table Structure:
Headers: N/A
Rows:
Row 1: Content Box | Content Box | Content Box
Row 2: Content Box | Content Box | Content Box
Context: Illustrates the concept of content overflow and how it might be visually represented before scrollbars appear.
**CHART**: Untitled
Description: A list of four options presented as buttons or selectable items, each with Arabic text and English translation in parentheses.
Data: Represents the possible values for the CSS overflow property.
Key Values: visible, hidden, scroll, auto
Context: Lists the different values that can be assigned to the CSS overflow property, explaining their behavior.
🎴 بطاقات تعليمية للمراجعة
عدد البطاقات: 3 بطاقة لهذه الصفحة
ما هو محدد class في CSS وكيف يُكتب؟
أ) محدد class هو أسلوب لتنسيق عناصر HTML تنتمي إلى فئة معينة، ويُكتب باستخدام النقطة (.) قبل اسم class.
ب) محدد class هو أسلوب لتنسيق عناصر HTML تنتمي إلى فئة معينة، ويُكتب باستخدام الرمز (#) قبل اسم class.
ج) محدد class هو أسلوب لتنسيق عناصر HTML تنتمي إلى فئة معينة، ويُكتب باستخدام النقطتين (:) قبل اسم class.
د) محدد class هو أسلوب لتنسيق عناصر HTML تنتمي إلى فئة معينة، ويُكتب باستخدام علامة الدولار ($) قبل اسم class.
الإجابة الصحيحة: a
الإجابة: محدد class هو أسلوب لتنسيق عناصر HTML تنتمي إلى فئة معينة، ويُكتب باستخدام النقطة (.) قبل اسم class.
الشرح: 1. محدد class يستخدم لتطبيق أنماط على مجموعة من العناصر تشترك في نفس الفئة (class).
2. صيغته الأساسية هي: .اسم_الفئة { خصائص }.
3. يمكن تحديده لعنصر معين: اسم_العنصر.اسم_الفئة { خصائص }.
تلميح: يبدأ بعلامة خاصة قبل اسم الفئة.
التصنيف: تعريف | المستوى: سهل
ما هي خاصية تجاوز السعة (Overflow) في CSS وما الغرض منها؟
أ) خاصية تجاوز السعة (Overflow) تُستخدم لتغيير لون خلفية العنصر عندما يكون المحتوى كبيراً.
ب) خاصية تجاوز السعة (Overflow) تُستخدم للتحكم فيما يحدث للمحتوى عندما يكون أكبر من أن يتناسب مع مساحة العنصر الحاوية.
ج) خاصية تجاوز السعة (Overflow) تُستخدم لإضافة حدود زخرفية حول المحتوى الطويل.
د) خاصية تجاوز السعة (Overflow) تُستخدم لتحويل نص طويل إلى أعمدة متعددة تلقائياً.
الإجابة الصحيحة: b
الإجابة: خاصية تجاوز السعة (Overflow) تُستخدم للتحكم فيما يحدث للمحتوى عندما يكون أكبر من أن يتناسب مع مساحة العنصر الحاوية.
الشرح: 1. خاصية CSS overflow تتحكم في عرض المحتوى الزائد عن حجم الحاوية.
2. تُستخدم عندما يكون حجم المحتوى (نص، صورة، إلخ) أكبر من الأبعاد المحددة للعنصر.
3. تمنع تشوه التخطيط أو خروج المحتوى عن الحدود المرسومة.
تلميح: تتعامل مع المحتوى الذي لا يتسع في المساحة المخصصة له.
التصنيف: تعريف | المستوى: متوسط
أي مما يلي يصف سلوك القيمة 'auto' لخاصية overflow في CSS؟
أ) يتم عرض كل المحتوى حتى لو خرج عن حدود الحاوية، ولا تضاف أشرطة تمرير.
ب) يتم إخفاء المحتوى الزائد تماماً دون إمكانية الوصول إليه، ولا تضاف أشرطة تمرير.
ج) يتم قص المحتوى الزائد، ويضاف شريط تمرير (scrollbar) تلقائياً فقط عندما يكون ضرورياً لرؤية باقي المحتوى.
د) تظهر أشرطة التمرير دائماً (حتى لو لم يكن المحتوى زائداً)، ويتم قص المحتوى الزائد.
الإجابة الصحيحة: c
الإجابة: يتم قص المحتوى الزائد، ويضاف شريط تمرير (scrollbar) تلقائياً فقط عندما يكون ضرورياً لرؤية باقي المحتوى.
الشرح: 1. القيمة 'auto' لخاصية overflow هي إحدى القيم الأربعة (visible, hidden, scroll, auto).
2. سلوكها: يتم إخفاء (قص) أي جزء من المحتوى يتجاوز حدود الحاوية.
3. تظهر أشرطة التمرير (أفقية أو رأسية) تلقائياً فقط إذا كان المحتوى فعلاً يتجاوز المساحة.