A wide-angle photograph of a brightly lit football stadium at night, with a full stadium of spectators visible in the foreground and the illuminated pitch stretching into the distance. The sky is dark, and stadium lights are prominent.
📄 النص الكامل للصفحة
أضف نمط الصور والجدول إلى ملف CSS الخارجي
.css
/*Style the images*/
.photos {
text-align: center;
overflow: auto;
padding-top: 20px;
padding-bottom: 20px;
}
يؤثر على نمط خلية الجدول ">" class = "photos"
تعمل هذه الخاصية على توسط (Center) الصورة في الخلية.
.photos img {
border-style: solid;
border-width: 2px;
border-color: #426C35;
border-radius: 6px;
}
يؤثر على نمط حدود (Border) الصورة.
--- VISUAL CONTEXT ---
**FIGURE**: Untitled
Description: A wide-angle photograph of a brightly lit football stadium at night, with a full stadium of spectators visible in the foreground and the illuminated pitch stretching into the distance. The sky is dark, and stadium lights are prominent.
Context: Illustrates the use of CSS styling for images, potentially within a web development context.
🎴 بطاقات تعليمية للمراجعة
عدد البطاقات: 3 بطاقة لهذه الصفحة
ما تأثير خاصية CSS التالية عند تطبيقها على فئة 'photos'؟
css
.photos {
text-align: center;
overflow: auto;
padding-top: 20px;
padding-bottom: 20px;
}
أ) تغيير لون خلفية الخلية إلى اللون الأخضر وإضافة حدود مستديرة.
ب) محاذاة النص إلى اليمين وإخفاء أي محتوى يتجاوز حجم الحاوية.
ج) توسيط محتويات الخلية وإضافة مساحة داخلية علوية وسفلية قدرها 20 بكسل، مع تمكين التمرير التلقائي إذا تجاوز المحتوى الحاوية.
د) تغيير حجم الخط داخل الخلية وجعله غامقًا (bold).
الإجابة الصحيحة: c
الإجابة: توسيط محتويات الخلية وإضافة مساحة داخلية علوية وسفلية قدرها 20 بكسل، مع تمكين التمرير التلقائي إذا تجاوز المحتوى الحاوية.
الشرح: 1. `text-align: center;` → تضع محتوى الخلية في المنتصف أفقيًا.
2. `overflow: auto;` → تضيف أشرطة تمرير تلقائيًا إذا تجاوز المحتوى حجم الحاوية.
3. `padding-top: 20px;` و `padding-bottom: 20px;` → تضيف مسافة داخلية (حشوة) قدرها 20 بكسل من الأعلى والأسفل.
تلميح: فكر في تأثير كل خاصية CSS على حدة: text-align, overflow, padding.
التصنيف: مفهوم جوهري | المستوى: متوسط
ما تأثير قاعدة CSS التالية عند تطبيقها على الصور داخل عنصر يحمل فئة 'photos'؟
css
.photos img {
border-style: solid;
border-width: 2px;
border-color: #426C35;
border-radius: 6px;
}
أ) تغيير حجم الصورة تلقائيًا لتناسب الحاوية وإضافة ظل خلفها.
ب) إضافة حدود صلبة (solid) خضراء (#426C35) بعرض 2 بكسل وحواف مستديرة نصف قطرها 6 بكسل للصور.
ج) تحويل الصورة إلى تدرج رمادي (grayscale) وجعلها شفافة جزئيًا.
د) محاذاة الصورة إلى اليسار وإضافة مسافة خارجية (margin) حولها.
الإجابة الصحيحة: b
الإجابة: إضافة حدود صلبة (solid) خضراء (#426C35) بعرض 2 بكسل وحواف مستديرة نصف قطرها 6 بكسل للصور.
الشرح: 1. `border-style: solid;` → تجعل نمط الحدود خطًا متصلًا.
2. `border-width: 2px;` → تحدد عرض الحدود بـ 2 بكسل.
3. `border-color: #426C35;` → تحدد لون الحدود بلون أخضر (كود سداسي عشري).
4. `border-radius: 6px;` → تدوير حواف الحدود بنصف قطر 6 بكسل.
تلميح: ركز على خصائص الـ border الأربعة وخاصية border-radius.
التصنيف: تعريف | المستوى: سهل
ما هو الغرض الأساسي من استخدام محدد (selector) مثل `.photos img` في CSS؟
أ) تطبيق الأنماط على جميع عناصر `<img>` الموجودة داخل عنصر (أو عناصر) يحمل الفئة 'photos'.
ب) تطبيق الأنماط فقط على أول عنصر `<img>` مباشر داخل عنصر يحمل الفئة 'photos'.
ج) تطبيق الأنماط على العنصر الذي يحمل كل من الفئة 'photos' ووسم `<img>` في نفس الوقت.
د) تطبيق الأنماط على جميع العناصر التي تحمل الفئة 'photos' بغض النظر عن نوع الوسم.
الإجابة الصحيحة: a
الإجابة: تطبيق الأنماط على جميع عناصر `<img>` الموجودة داخل عنصر (أو عناصر) يحمل الفئة 'photos'.
الشرح: محدد `.photos img` هو محدد نسل (descendant selector).
1. `.photos` → يستهدف العنصر (أو العناصر) التي تحمل الفئة 'photos'.
2. `img` → يستهدف عناصر الصور.
3. الجمع بينهما (` .photos img `) يعني: "استهدف جميع عناصر الصور التي هي داخل عنصر يحمل الفئة 'photos'".
تلميح: فكر في العلاقة بين المحدد `.photos` والمحدد `img` وكيفية دمجهما.