A group photo of the Saudi Arabian national football team in green uniforms, standing together on a football field under stadium lights.
The FIFA World Cup trophy displayed in a museum or exhibition setting, with text 'FIFA WORLD CUP' visible.
A close-up of the Saudi National Team logo, featuring the Saudi emblem with two crossed swords and a palm tree, on a dark green textured background. Text 'SAUDI ARABIA NATIONAL TEAM' is below the emblem.
A wide-angle view of a football stadium at night, with bright floodlights illuminating the pitch and spectators in the stands.
📄 النص الكامل للصفحة
التحكم في حجم ومحاذاة الصور
يمكنك باستخدام قواعد CSS تحديد حجم ومحاذاة الصور، كما يمكنك جعلها أكثر جاذبية باستخدام بعض الخصائص الأخرى.
ستطبق الآن بعض قواعد CSS على الصور داخل الصفحة.
يمكنك استخدام خاصية نصف قطر الإطار (border-radius) أيضًا لتغيير مظهر حواف الصورة.
.photos img {
border-style: solid;
border-width: 2px;
border-color: #426C35;
border-radius: 6px;
margin: 2px;
object-fit: cover;
object-position: top;
}
المعرض
سيظهر قسم photos على المتصفح بالشكل التالي:
--- VISUAL CONTEXT ---
**IMAGE**: Untitled
Description: A group photo of the Saudi Arabian national football team in green uniforms, standing together on a football field under stadium lights.
Context: Example of an image styled with CSS properties like border and margin.
**IMAGE**: Untitled
Description: The FIFA World Cup trophy displayed in a museum or exhibition setting, with text 'FIFA WORLD CUP' visible.
Context: Another example image.
**IMAGE**: Untitled
Description: A close-up of the Saudi National Team logo, featuring the Saudi emblem with two crossed swords and a palm tree, on a dark green textured background. Text 'SAUDI ARABIA NATIONAL TEAM' is below the emblem.
Context: Example image showcasing a logo.
**IMAGE**: Untitled
Description: A wide-angle view of a football stadium at night, with bright floodlights illuminating the pitch and spectators in the stands.
Context: Example image of a stadium.
🎴 بطاقات تعليمية للمراجعة
عدد البطاقات: 4 بطاقة لهذه الصفحة
ما الغرض الرئيسي من استخدام خاصية `object-fit: cover;` في CSS للصور؟
أ) لتوسيط الصورة داخل العنصر دون تغيير حجمها.
ب) لتغيير لون خلفية الصورة إذا كانت شفافة.
ج) لتغطية مساحة العنصر بالكامل مع الحفاظ على نسبة العرض إلى الارتفاع للصورة، مع اقتصاص أجزاء منها إذا لزم الأمر.
د) لجعل الصورة تملأ المساحة بتشويه نسبة العرض إلى الارتفاع لتتناسب تمامًا.
الإجابة الصحيحة: c
الإجابة: لتغطية مساحة العنصر بالكامل مع الحفاظ على نسبة العرض إلى الارتفاع للصورة، مع اقتصاص أجزاء منها إذا لزم الأمر.
الشرح: 1. خاصية `object-fit` تحدد كيفية ضبط محتوى العنصر (مثل الصورة) داخل صندوقه. 2. القيمة `cover` تجعل الصورة تغطي كامل مساحة العنصر مع الحفاظ على نسبة العرض إلى الارتفاع (aspect ratio). 3. إذا كانت أبعاد الصورة لا تتطابق مع أبعاد العنصر، سيتم اقتصاص أجزاء من الصورة لتحقيق التغطية الكاملة.
تلميح: تتعلق هذه الخاصية بكيفية ملء الصورة للمساحة المخصصة لها.
التصنيف: تعريف | المستوى: متوسط
ما تأثير استخدام خاصية `border-radius: 6px;` على صورة في CSS؟
أ) تضيف ظلاً خلف الصورة بعمق 6 بكسل.
ب) تقوم بتقريب زوايا إطار الصورة بنصف قطر مقداره 6 بكسل، مما يعطيها حواف مستديرة.
ج) تزيد من سماكة إطار الصورة بمقدار 6 بكسل.
د) تغير لون إطار الصورة إلى اللون الرمادي بدرجة 6.
الإجابة الصحيحة: b
الإجابة: تقوم بتقريب زوايا إطار الصورة بنصف قطر مقداره 6 بكسل، مما يعطيها حواف مستديرة.
الشرح: 1. خاصية `border-radius` في CSS تستخدم لتحديد مدى استدارة زوايا إطار العنصر. 2. القيمة `6px` تعني أن نصف قطر الاستدارة لكل زاوية هو 6 بكسل. 3. عند تطبيقها على صورة، ستظهر حواف الصورة أو إطارها (إذا كان موجودًا) بشكل مستدير بدلاً من الزوايا الحادة.
تلميح: تتعلق هذه الخاصية بشكل حواف العنصر.
التصنيف: تعريف | المستوى: سهل
ما الوظيفة الأساسية لخاصية `object-position` في CSS عند التعامل مع الصور؟
أ) تحدد ترتيب تكديس الصور فوق بعضها البعض (z-index).
ب) تحدد موضع الصورة داخل صندوق محتواها (مثل استخدام `top` أو `center`).
ج) تتحكم في سرعة تحميل الصورة على الصفحة.
د) تغير حجم الصورة بناءً على حجم نافذة المتصفح.
الإجابة الصحيحة: b
الإجابة: تحدد موضع الصورة داخل صندوق محتواها (مثل استخدام `top` أو `center`).
الشرح: 1. خاصية `object-position` تعمل جنبًا إلى جنب مع `object-fit`. 2. وظيفتها تحديد النقطة المرجعية داخل الصورة التي يجب محاذاتها مع صندوق العنصر. 3. على سبيل المثال، `object-position: top;` ستحاذي الجزء العلوي من الصورة مع الجزء العلوي من الصندوق، مما يكون مفيدًا عند اقتصاص الصورة (`object-fit: cover`).
تلميح: تتحكم في مكان ظهور الصورة ضمن المساحة المخصصة لها، خاصة عند اقتصاصها.
التصنيف: مفهوم جوهري | المستوى: متوسط
في قاعدة CSS `.photos img { margin: 2px; }`، ما الذي يفعله الإعلان `margin: 2px;`؟
أ) يضيف حشوة (padding) داخلية بعرض 2 بكسل داخل إطار كل صورة.
ب) يضيف هامشًا (مسافة خارجية) بعرض 2 بكسل من جميع الجهات (أعلى، يمين، أسفل، يسار) حول كل صورة داخل العنصر ذي الصنف `.photos`.
ج) يضيف ظلًا بعيدًا (offset) مقداره 2 بكسل خلف الصورة.
د) يحدد سماكة إطار الصورة بمقدار 2 بكسل.
الإجابة الصحيحة: b
الإجابة: يضيف هامشًا (مسافة خارجية) بعرض 2 بكسل من جميع الجهات (أعلى، يمين، أسفل، يسار) حول كل صورة داخل العنصر ذي الصنف `.photos`.
الشرح: 1. خاصية `margin` في CSS تخلق مسافة خارجية حول العنصر، تفصله عن العناصر المجاورة. 2. عند استخدام قيمة واحدة مثل `2px`، يتم تطبيق هذا الهامش على الجهات الأربع للعنصر (أعلى، يمين، أسفل، يسار). 3. في هذا السياق، ستخلق مسافة صغيرة بين الصور المجاورة داخل المعرض (`photos`).