تعمل كرة القدم على جمع الناس معاً - كتاب التقنية الرقمية - الصف 11 - الفصل 1 - المملكة العربية السعودية

📚 استعلام الوسائط في ملف CSS خارجي

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

استعلام الوسائط في ملف CSS خارجي: خاصية في CSS تُستخدم فقط عند استيفاء شرط محدد، ويمكن إضافتها في نهاية ملف CSS الخارجي الذي يصمم الصفحة الإلكترونية.

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

```markmap

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

أنواع CSS

صفحات الأنماط المضمنة (Inline style)

صفحات الأنماط الداخلية (Internal style sheets)

صفحات الأنماط الخارجية (External style sheets)

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

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

#### الأدوات

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

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

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

####### داخل ملف CSS خارجي

######### استعلام الوسائط في ملف CSS خارجي

######## يوضع في نهاية ملف CSS

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

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

######### الإجراء: `img { width: 70%; height: auto; }`

######## الشرح

######### يعمل على الأجهزة التي يصل عرض إطار العرض (Viewport Width) إلى 800 بكسل

######### يتم تصغير عرض الصورة إلى 70% إذا تغير ارتفاع الصورة تلقائياً

######### يؤثر في أبعاد الصور التي يقل عرضها عن 800 بكسل

```

نقاط مهمة

• يمكن وضع استعلام الوسائط في نهاية ملف CSS خارجي.
• مثال الاستعلام: `@media screen and (max-width: 800px) { img { width: 70%; height: auto; } }`
• يطبق هذا النمط على الصور عندما يكون عرض إطار العرض أقل من أو يساوي 800 بكسل.
• التأثير: تصغير عرض الصورة إلى 70% مع الحفاظ على التناسب التلقائي للارتفاع.

استعلام الوسائط في ملف CSS خارجي

يمكنك أيضاً إضافة استعلام الوسائط في ملف CSS خارجي الذي يصمم الصفحة الإلكترونية في نهاية ملف CSS.

@media screen and (max-width: 800px) { img { width: 70%; height: auto; } }

ستعمل الأجهزة التي يصل عرضها إلى 800 بكسل على ضبط الصور المعروضة على الشاشة على النمط المحدد لاستعلام الوسائط.

إذا تم تطبيق استعلام الوسائط على صفحة مشجعي كرة القدم، فسيتؤثر ذلك في أبعاد الصور التي يقل عرضها عن 800 بكسل.

عرض إطار العرض (Viewport Width) أقل من 800 بكسل.

يتم تصغير عرض الصورة إلى 70% إذا تغير ارتفاع الصورة تلقائياً.

تعمل كرة القدم على جمع الناس معاً

البلد من جميع الجمهور في هذه اللعبة هو تشجيع اللاعبين أثناء المباراة.

بعد كرة القدم، ربما ذات تاريخ طويل، بدأت بشكلها الحالي في إنجلترا في منتصف القرن التاسع عشر. ومنذ ذلك الحين، أصبحت كرة القدم اللعبة الأكثر شعبية في العالم، حيث يلعبها أكثر من 250 مليون لاعب في أكثر من 200 دولة حول العالم. إنها رياضة عالمية تجمع الناس معاً من جميع الخلفيات. لقد أصبحت كرة القدم أيضاً صناعة بمليارات الدولارات، حيث تدر أرباحاً هائلة من خلال بيع التذاكر والسلع وحقوق البث التلفزيوني. ومع ذلك، فإن أهم شيء في كرة القدم هو أنها لا تزال لعبة ممتعة يمكن للجميع الاستمتاع بها.

المعرض

التاريخ

الصفحة الرئيسية

اتصل بنا

نبذة

Ministry of Education 2025 - 1447

استعلام الوسائط في ملف CSS خارجي يمكنك أيضاً إضافة استعلام الوسائط في ملف CSS خارجي الذي يصمم الصفحة الإلكترونية في نهاية ملف CSS. @media screen and (max-width: 800px) { img { width: 70%; height: auto; } } ستعمل الأجهزة التي يصل عرضها إلى 800 بكسل على ضبط الصور المعروضة على الشاشة على النمط المحدد لاستعلام الوسائط. إذا تم تطبيق استعلام الوسائط على صفحة مشجعي كرة القدم، فسيتؤثر ذلك في أبعاد الصور التي يقل عرضها عن 800 بكسل. عرض إطار العرض (Viewport Width) أقل من 800 بكسل. يتم تصغير عرض الصورة إلى 70% إذا تغير ارتفاع الصورة تلقائياً. --- SECTION: تعمل كرة القدم على جمع الناس معاً --- تعمل كرة القدم على جمع الناس معاً البلد من جميع الجمهور في هذه اللعبة هو تشجيع اللاعبين أثناء المباراة. بعد كرة القدم، ربما ذات تاريخ طويل، بدأت بشكلها الحالي في إنجلترا في منتصف القرن التاسع عشر. ومنذ ذلك الحين، أصبحت كرة القدم اللعبة الأكثر شعبية في العالم، حيث يلعبها أكثر من 250 مليون لاعب في أكثر من 200 دولة حول العالم. إنها رياضة عالمية تجمع الناس معاً من جميع الخلفيات. لقد أصبحت كرة القدم أيضاً صناعة بمليارات الدولارات، حيث تدر أرباحاً هائلة من خلال بيع التذاكر والسلع وحقوق البث التلفزيوني. ومع ذلك، فإن أهم شيء في كرة القدم هو أنها لا تزال لعبة ممتعة يمكن للجميع الاستمتاع بها. --- SECTION: المعرض --- المعرض --- SECTION: التاريخ --- التاريخ --- SECTION: الصفحة الرئيسية --- الصفحة الرئيسية --- SECTION: اتصل بنا --- اتصل بنا --- SECTION: نبذة --- نبذة Ministry of Education 2025 - 1447 --- VISUAL CONTEXT --- **CODE_BLOCK**: Untitled Description: A CSS code snippet demonstrating media query for responsive design. Context: Illustrates how to apply CSS styles based on screen width. **DIAGRAM**: Untitled Description: A grey box indicating 'Viewport Width' and stating 'Less than 800px'. Context: Highlights the condition under which the responsive CSS rule applies. **DIAGRAM**: Untitled Description: A blue speech bubble explaining that the image width is reduced to 70% if it changes height automatically. Context: Explains the effect of the CSS rule on image dimensions. **IMAGE**: Untitled Description: A photograph of the FIFA World Cup trophy displayed inside a glass case, with a blurred background of a stadium. Context: Illustrates a visual element that would be affected by responsive design rules. **IMAGE**: Untitled Description: A photograph of a football team celebrating on a field, with players in uniform and a crowd in the background. Context: Another visual element demonstrating responsive design application. **TABLE**: Untitled Description: A simulated browser window showing dimensions 'Responsive', '800 x 1300', '50%', 'No throttling'. The content displayed is a header 'نبذة' and an image of the World Cup trophy. Table Structure: Headers: Dimensions: Responsive | 800 | x | 1300 | 50% | No throttling Rows: Row 1: نبذة | | | | | Context: Simulates how content might appear on a screen with width 800px. **TABLE**: Untitled Description: A simulated browser window showing dimensions 'Responsive', '801 x 1300', '50%', 'No throttling'. The content displayed is a header 'نبذة' and an image of the football team. Table Structure: Headers: Dimensions: Responsive | 801 | x | 1300 | 50% | No throttling Rows: Row 1: نبذة | | | | | Context: Simulates how content might appear on a screen with width slightly over 800px.