📋 المحتوى المنظم
📖 محتوى تعليمي مفصّل
عائلة الخطوط (font-family)
نوع: محتوى تعليمي
تتيح لك خاصية عائلة الخطوط تحديد عائلة الخط التي تريد استخدامها لأي نص داخل العناصر. يجب أن يتم تثبيت عائلة الخطوط التي تم تحديدها لاستخدامها في الموقع، وكذلك يجب أن يتم تثبيتها على جهاز زوار الموقع. لهذا السبب؛ يتم تحديد قائمة الخطوط مفصولة بفواصل بحيث إذا لم يكن لدى المستخدم أول نوع خط مثبت فإن المتصفح سيستخدم النوع التالي.
نوع: محتوى تعليمي
إذا لم يوجد أي من الخطوط التي تحددها على جهاز الحاسب المستخدم، فعندئذٍ يحدد المتصفح واحدًا ينتمي إلى عائلة الخطوط العامة.
نوع: محتوى تعليمي
h1 {
color: green;
font-size: 50px;
font-family: Tahoma, sans-serif; }
h2 {
color: #ee82ee;
font-size: 100%;
font-family: Arial, sans-serif; }
p {
color: rgb(0,75,250);
font-family: Verdana, Times, sans-serif; }
.CSS
نوع: محتوى تعليمي
تعمل كرة القدم على جمع الناس معًا
نوع: محتوى تعليمي
الهدف من حضور الجمهور في هذه اللعبة هو تشجيع اللاعبين أثناء المباراة.
التاريخ
نوع: محتوى تعليمي
نوع: محتوى تعليمي
تعد كرة القدم رياضة ذات تاريخ طويل، نشأت بشكلها الحالي في إنجلترا في منتصف القرن التاسع عشر.
وجدت أندية كرة القدم منذ القرن الخامس عشر، لكنها كانت غير منظمة ودون صفة رسمية، ثم تم إنشاء الكثير من هذه الأندية في أواخر القرن التاسع عشر، ولكن القليل منها فقط افتتح أمر بعد ذلك.
يعتقد معظم المؤرخين أن الأندية التي استمرت بنشاطها كانت تقع في مناطق أكثر قليلاً، وكانوا قادرين على تحمل نفقات حضور المباريات.
نوع: NON_EDUCATIONAL
وزارة التعليم
Ministry of Education
225 - 1447
🔍 عناصر مرئية
Football Fan Page
A screenshot of a web browser displaying a page titled 'Football Fan Page'. The URL shown is C:/Users/Desktop/examples/fonts.html. The page content includes Arabic text and a title 'تعمل كرة القدم على جمع الناس معًا'.
A block of CSS code defining styles for h1, h2, and p elements, including color, font-size, and font-family properties.
A text box containing Arabic text explaining the fallback mechanism for font-family if the primary font is not available on the user's system.
📄 النص الكامل للصفحة
--- SECTION: عائلة الخطوط (font-family) ---
تتيح لك خاصية عائلة الخطوط تحديد عائلة الخط التي تريد استخدامها لأي نص داخل العناصر. يجب أن يتم تثبيت عائلة الخطوط التي تم تحديدها لاستخدامها في الموقع، وكذلك يجب أن يتم تثبيتها على جهاز زوار الموقع. لهذا السبب؛ يتم تحديد قائمة الخطوط مفصولة بفواصل بحيث إذا لم يكن لدى المستخدم أول نوع خط مثبت فإن المتصفح سيستخدم النوع التالي.
إذا لم يوجد أي من الخطوط التي تحددها على جهاز الحاسب المستخدم، فعندئذٍ يحدد المتصفح واحدًا ينتمي إلى عائلة الخطوط العامة.
h1 {
color: green;
font-size: 50px;
font-family: Tahoma, sans-serif; }
h2 {
color: #ee82ee;
font-size: 100%;
font-family: Arial, sans-serif; }
p {
color: rgb(0,75,250);
font-family: Verdana, Times, sans-serif; }
--- SECTION: .CSS ---
--- SECTION: تعمل كرة القدم على جمع الناس معًا ---
الهدف من حضور الجمهور في هذه اللعبة هو تشجيع اللاعبين أثناء المباراة.
--- SECTION: التاريخ ---
تعد كرة القدم رياضة ذات تاريخ طويل، نشأت بشكلها الحالي في إنجلترا في منتصف القرن التاسع عشر.
وجدت أندية كرة القدم منذ القرن الخامس عشر، لكنها كانت غير منظمة ودون صفة رسمية، ثم تم إنشاء الكثير من هذه الأندية في أواخر القرن التاسع عشر، ولكن القليل منها فقط افتتح أمر بعد ذلك.
يعتقد معظم المؤرخين أن الأندية التي استمرت بنشاطها كانت تقع في مناطق أكثر قليلاً، وكانوا قادرين على تحمل نفقات حضور المباريات.
وزارة التعليم
Ministry of Education
225 - 1447
--- VISUAL CONTEXT ---
**BROWSER_WINDOW**: Football Fan Page
Description: A screenshot of a web browser displaying a page titled 'Football Fan Page'. The URL shown is C:/Users/Desktop/examples/fonts.html. The page content includes Arabic text and a title 'تعمل كرة القدم على جمع الناس معًا'.
Context: Demonstrates how HTML and CSS can be used to create web content, specifically showing a title and historical text about football.
**CODE_BLOCK**: Untitled
Description: A block of CSS code defining styles for h1, h2, and p elements, including color, font-size, and font-family properties.
Context: Illustrates the use of the font-family property in CSS to specify preferred fonts for web page elements.
**TEXT_BOX**: Untitled
Description: A text box containing Arabic text explaining the fallback mechanism for font-family if the primary font is not available on the user's system.
Context: Explains the concept of font fallbacks in CSS.
🎴 بطاقات تعليمية للمراجعة
عدد البطاقات: 3 بطاقة لهذه الصفحة
ما الغرض من استخدام قائمة خطوط مفصولة بفواصل في خاصية font-family في CSS؟
- أ) لجعل تصميم الصفحة أكثر جمالاً بتعدد الخطوط.
- ب) لتوفير آلية احتياطية (fallback) في حالة عدم توفر الخط الأول على جهاز المستخدم، فيستخدم المتصفح الخط التالي في القائمة.
- ج) لإجبار المتصفح على تحميل جميع الخطوط المذكورة في القائمة.
- د) لتحديد حجم الخط فقط، وليس نوعه.
الإجابة الصحيحة: b
الإجابة: لتوفير آلية احتياطية (fallback) في حالة عدم توفر الخط الأول على جهاز المستخدم، فيستخدم المتصفح الخط التالي في القائمة.
الشرح: 1. خاصية font-family تتيح تحديد الخط المستخدم للنص. 2. قد لا يكون الخط المحدد مثبتاً على جهاز كل زائر للموقع. 3. لذلك، نكتب قائمة بخطوط بديلة مفصولة بفواصل. 4. المتصفح يحاول استخدام الخط الأول، فإن لم يجده، ينتقل إلى الثاني، وهكذا. 5. الهدف هو ضمان ظهور النص بخط مقبول حتى لو لم يتوفر الخط المفضل.
تلميح: فكر في ماذا يحدث عندما يفتح المستخدم موقعك ولا يكون الخط المفضل لديك مثبتاً على جهازه.
التصنيف: مفهوم جوهري | المستوى: سهل
ماذا يحدث في CSS إذا لم يتم العثور على أي من الخطوط المحددة في خاصية font-family على جهاز المستخدم؟
- أ) يتوقف المتصفح عن عرض النص تماماً.
- ب) يعرض المتصفح رسالة خطأ للمستخدم.
- ج) يحدد المتصفح خطًا افتراضيًا ينتمي إلى عائلة الخطوط العامة (generic family) المحددة.
- د) يستخدم المتصفح الخط الأول من القائمة بغض النظر عن توافره.
الإجابة الصحيحة: c
الإجابة: يحدد المتصفح خطًا افتراضيًا ينتمي إلى عائلة الخطوط العامة (generic family) المحددة.
الشرح: 1. خاصية font-family تحدد قائمة بالخطوط المفضلة. 2. المتصفح يبحث عن هذه الخطوط بالتسلسل على جهاز المستخدم. 3. إذا لم يعثر على أي خط محدد من القائمة، فإنه يتجاهل القائمة. 4. يلجأ المتصفح بعد ذلك إلى استخدام خط افتراضي. 5. هذا الخط الافتراضي يكون من عائلة الخطوط العامة (مثل sans-serif, serif, monospace) المذكورة في نهاية القائمة.
تلميح: تذكر أن القائمة تنتهي غالباً باسم عائلة خطوط عامة مثل sans-serif أو serif.
التصنيف: مفهوم جوهري | المستوى: متوسط
في مثال الكود المقدم، ما الخط الذي سيحاول المتصفح استخدامه لعناصر h1 إذا لم يكن خط 'Tahoma' متوفراً؟
- أ) Arial
- ب) Verdana
- ج) sans-serif
- د) Times
الإجابة الصحيحة: c
الإجابة: sans-serif
الشرح: 1. قاعدة CSS لعناصر h1 تحدد: font-family: Tahoma, sans-serif; 2. هذا يعني أن الخط المفضل هو 'Tahoma'. 3. الخط الاحتياطي (البديل) المحدد هو 'sans-serif'. 4. 'sans-serif' ليست اسم خط محدد، بل هي عائلة خطوط عامة. 5. لذلك، إذا لم يتوفر 'Tahoma'، سيختار المتصفح أي خط ينتمي إلى عائلة sans-serif (خالي الزوائد) المثبت على النظام.
تلميح: انظر إلى القيمة المخصصة لخاصية font-family داخل قاعدة h1.
التصنيف: تفكير ناقد | المستوى: سهل