عند كتابة المحتوى النصي، يجب مراعاة اختيار نوع خط مريح للعين وسهل القراءة.
يمكن كتابة قيمة اللون في خاصية `background-color` بأي من التنسيقات الموجودة ضمن خاصية اللون في CSS.
القيمة الافتراضية لخاصية `background-repeat` هي `repeat`، والتي تكرر الصورة أفقيًا وعموديًا لملء المساحة.
📋 المحتوى المنظم
📖 محتوى تعليمي مفصّل
نوع: محتوى تعليمي
الخطوة الأساسية الأكثر أهمية هي تعيين نوع خط عام إلى المحتوى النصي الذي لم يُطبق أي تصميم عليه.
.css
نوع: محتوى تعليمي
body {
font-family: 'Tahoma', 'Open Sans', sans-serif;
background: white;
}
p {
color: #111111;
}
نصيحة
نوع: محتوى تعليمي
نصيحة: عند كتابة المحتوى النصي لابد من مراعاة نوع الخط المستخدم بحيث يكون مريحًا للعين وسهل القراءة.
نوع: محتوى تعليمي
خصائص CSS الأساسية المتعلقة بالخلفية
نوع: METADATA
238
نوع: METADATA
وزارة التعليم
Ministry of Education
2025 - 1447
🔍 عناصر مرئية
A screenshot of a web browser displaying a web page titled 'Football Fan Page'. The browser's address bar shows 'file:///C:/HTML/Football_Fan_Page.html'. The web page content includes a navigation menu on the right with items like 'الصفحة الرئيسية', 'التاريخ', 'الملعب', 'النتيجة', 'اتصل بنا'. The main content features a large header 'تعمل كرة القدم على جمع الناس معًا', followed by a paragraph 'الهدف من حضور الجمهور في هذه اللعبة هو تشجيع اللاعبين أثناء المباراة.'. Below this is a sub-header 'التاريخ' with a detailed paragraph about the history of football, mentioning its origins in England in the mid-19th century and its continued popularity. Another sub-header 'اليوم الصور' is present, under which an image of a football team and a trophy is displayed.
An image embedded within the 'Football Fan Page' web page screenshot. It shows a group of male football players, dressed in green jerseys and shorts, posing together. Behind them, a golden trophy is visible inside a glass display case, suggesting a championship or award.
A two-column table detailing fundamental CSS properties related to backgrounds, with 'الخاصية' (Property) as the right column header and 'الوظيفة' (Function) as the left column header.
The official logo of the Ministry of Education, Saudi Arabia. It features a stylized green emblem resembling a tree or a cluster of dots, accompanied by the text 'وزارة التعليم' in Arabic and 'Ministry of Education' in English, along with the academic year '2025 - 1447'.
📄 النص الكامل للصفحة
الخطوة الأساسية الأكثر أهمية هي تعيين نوع خط عام إلى المحتوى النصي الذي لم يُطبق أي تصميم عليه.
--- SECTION: .css ---
body {
font-family: 'Tahoma', 'Open Sans', sans-serif;
background: white;
}
p {
color: #111111;
}
--- SECTION: نصيحة ---
نصيحة: عند كتابة المحتوى النصي لابد من مراعاة نوع الخط المستخدم بحيث يكون مريحًا للعين وسهل القراءة.
خصائص CSS الأساسية المتعلقة بالخلفية
238
وزارة التعليم
Ministry of Education
2025 - 1447
--- VISUAL CONTEXT ---
**FIGURE**: Untitled
Description: A screenshot of a web browser displaying a web page titled 'Football Fan Page'. The browser's address bar shows 'file:///C:/HTML/Football_Fan_Page.html'. The web page content includes a navigation menu on the right with items like 'الصفحة الرئيسية', 'التاريخ', 'الملعب', 'النتيجة', 'اتصل بنا'. The main content features a large header 'تعمل كرة القدم على جمع الناس معًا', followed by a paragraph 'الهدف من حضور الجمهور في هذه اللعبة هو تشجيع اللاعبين أثناء المباراة.'. Below this is a sub-header 'التاريخ' with a detailed paragraph about the history of football, mentioning its origins in England in the mid-19th century and its continued popularity. Another sub-header 'اليوم الصور' is present, under which an image of a football team and a trophy is displayed.
Context: Illustrates how HTML and CSS content is rendered in a web browser, showing a typical web page layout with text and images.
**FIGURE**: Untitled
Description: An image embedded within the 'Football Fan Page' web page screenshot. It shows a group of male football players, dressed in green jerseys and shorts, posing together. Behind them, a golden trophy is visible inside a glass display case, suggesting a championship or award.
Context: An example of an image used as content on a web page, relevant to the 'اليوم الصور' section of the displayed page.
**TABLE**: Untitled
Description: A two-column table detailing fundamental CSS properties related to backgrounds, with 'الخاصية' (Property) as the right column header and 'الوظيفة' (Function) as the left column header.
Table Structure:
Headers: الخاصية | الوظيفة
Rows:
Row 1: background-color (لون الخلفية) | تستخدم الخاصية لتعيين لون خلفية العناصر التي تم اختيارها وتحديدها بواسطة المحدد. يمكن كتابة اللون بأي من التنسيقات الموجودة ضمن خاصية اللون.
Row 2: background-image (صورة الخلفية) | تستخدم لخلفية جميع عناصر HTML الأخرى.
Row 3: background-repeat (تكرار الخلفية) | قد تحتوي هذه الخاصية على قيم مختلفة، منها: repeat : يتم تكرار الخلفية أفقيًا وعموديًا بشكل افتراضي، بحيث يتم ملء المربع الموجود بكامله.
Row 4: background-position (موضع الخلفية) | تتيح الخاصية تحديد موضع صورة الخلفية في نافذة المتصفح، وتوجد عدة قيم لهذه الخاصية.
Context: Provides definitions and usage explanations for key CSS properties used to control the background of web elements.
**FIGURE**: Untitled
Description: The official logo of the Ministry of Education, Saudi Arabia. It features a stylized green emblem resembling a tree or a cluster of dots, accompanied by the text 'وزارة التعليم' in Arabic and 'Ministry of Education' in English, along with the academic year '2025 - 1447'.
Context: Standard institutional branding found on educational materials.
🎴 بطاقات تعليمية للمراجعة
عدد البطاقات: 4 بطاقة لهذه الصفحة
ما الوظيفة الأساسية لخاصية CSS المسماة `background-color`؟
أ) تستخدم لتحديد حجم الخط ولونه للنص داخل العنصر.
ب) تستخدم لتعيين صورة خلفية لجميع عناصر HTML في الصفحة.
ج) تستخدم لتعيين لون خلفية العناصر التي تم اختيارها وتحديدها بواسطة المحدد.
د) تستخدم للتحكم في كيفية تكرار صورة الخلفية أفقيًا وعموديًا.
الإجابة الصحيحة: c
الإجابة: تستخدم لتعيين لون خلفية العناصر التي تم اختيارها وتحديدها بواسطة المحدد.
الشرح: 1. خاصية `background-color` هي إحدى خصائص CSS الأساسية. 2. وظيفتها الرئيسية هي تحديد لون الخلفية لعنصر HTML معين. 3. يتم تطبيقها على العناصر التي يتم تحديدها باستخدام محدد CSS. 4. يمكن كتابة قيمة اللون بأي من التنسيقات المعروفة (مثل الأسماء، HEX، RGB).
تلميح: تتعلق هذه الخاصية بتغيير مظهر الخلفية لعنصر ما.
التصنيف: تعريف | المستوى: سهل
ما الخاصية في CSS التي تُستخدم لوضع صورة كخلفية لعناصر HTML؟
أ) خاصية `background-position`.
ب) خاصية `background-repeat`.
ج) خاصية `background-image`.
د) خاصية `font-family`.
الإجابة الصحيحة: c
الإجابة: خاصية `background-image`.
الشرح: 1. CSS يوفر خصائص متعددة للتحكم في خلفية العناصر. 2. خاصية `background-image` مخصصة تحديدًا لتعيين صورة كخلفية. 3. وظيفتها الأساسية هي تطبيق صورة خلفية على العناصر المحددة. 4. تختلف عن `background-color` التي تضع لونًا فقط.
تلميح: هذه الخاصية مسؤولة عن إضافة عنصر مرئي (صورة) كخلفية.
التصنيف: تعريف | المستوى: سهل
ما القيمة الافتراضية لخاصية `background-repeat` في CSS؟
أ) `no-repeat` (عدم التكرار).
ب) `repeat-x` (التكرار أفقيًا فقط).
ج) `repeat` (يتم التكرار أفقيًا وعموديًا).
د) `center` (وضع الصورة في المنتصف دون تكرار).
الإجابة الصحيحة: c
الإجابة: `repeat` (يتم التكرار أفقيًا وعموديًا).
الشرح: 1. خاصية `background-repeat` تتحكم في كيفية تكرار صورة الخلفية. 2. لها عدة قيم محتملة مثل `no-repeat`، `repeat-x`، `repeat-y`. 3. القيمة الافتراضية التي يتم تطبيقها إذا لم يحدد المطور قيمة هي `repeat`. 4. قيمة `repeat` تعني تكرار الصورة لملء مساحة العنصر أفقيًا وعموديًا.
تلميح: القيمة الافتراضية هي التي يتم تطبيقها تلقائيًا إذا لم يتم تحديد قيمة أخرى.
التصنيف: مفهوم جوهري | المستوى: متوسط
أي من خصائص CSS التالية تتيح لك تحديد الموضع الدقيق لصورة الخلفية داخل نافذة المتصفح؟
أ) خاصية `background-attachment`.
ب) خاصية `background-position`.
ج) خاصية `background-size`.
د) خاصية `background-origin`.
الإجابة الصحيحة: b
الإجابة: خاصية `background-position`.
الشرح: 1. CSS يوفر خصائص دقيقة للتحكم في خلفية العناصر. 2. بينما `background-color` للون و`background-image` للصورة، فإن `background-position` تتحكم في مكان ظهور تلك الصورة. 3. وظيفتها هي تحديد إحداثيات موضع صورة الخلفية (مثل أعلى، أسفل، يمين، يسار، مركز، أو قيم رقمية).
تلميح: هذه الخاصية مرتبطة بموقع العنصر المرئي (الصورة) وليس بلونه أو تكراره.