CSS تعني أوراق نمط متتالية. إنها لغة برمجة تستخدم لوصف العرض التقديمي وأسلوب مستند مكتوب في HTML أو XML. يوفر CSS مجموعة من القواعد والخصائص التي تحدد كيفية عرض العناصر على صفحة ويب.
مع CSS ، يمكن لمصممي الويب والمطورين التحكم في جوانب مختلفة من مظهر موقع الويب ، بما في ذلك التصميم والألوان والخطوط والتباعد والتأثيرات. من خلال فصل معلومات النمط عن المحتوى ، تتيح CSS عملية تطوير ويب أكثر كفاءة ومرونة.
تعمل CSS على مبدأ متتالي ، حيث يمكن تطبيق قواعد نمط متعددة على عنصر ما ، ويتم تحديد النمط النهائي حسب ترتيب الخصوصية وتطبيق المختارين المختلفين. هذا يسمح بتخصيص وسهولة الاتساق عبر صفحات الويب.
يتم استخدام محددات CSS لاستهداف عناصر HTML محددة أو مجموعات من العناصر لتطبيق الأنماط المطلوبة. يمكن أن يعتمد المختارون على أنواع العناصر وأسماء الفصول الدراسية والمعرفات والسمات والمزيد ، مما يوفر مرونة كبيرة في التصميم.
قدمت CSS3 ، أحدث إصدار من CSS ، العديد من الميزات الجديدة ، بما في ذلك خيارات التخطيط المتقدمة ، والتحولات ، والرسوم المتحركة ، والتدرجات ، وأكثر من ذلك ، مما يتيح تصميم ويب أكثر إبداعًا وتفاعلية.
مخطط المقال
- الجزء 1: إنشاء اختبار CSS مذهل باستخدام AI على الفور في OnlineExamMaker
- الجزء 2: 15 أسئلة وأجوبة مسابقة CSS
- الجزء 3: جرب مولد أسئلة على OnlineExamMaker AI لإنشاء أسئلة اختبار
الجزء 1: إنشاء اختبار CSS مذهل باستخدام AI على الفور في OnlineExamMaker
أسرع طريقة لتقييم مهارات CSS للمرشحين هي استخدام منصة تقييم الذكاء الاصطناعى مثل OnlineExamMaker. باستخدام Generator OnlineExamMaker AI أسئلة ، يمكنك إدخال المحتوى-مثل النص أو المستندات أو الموضوعات-ثم إنشاء أسئلة بتنسيقات مختلفة (على سبيل المثال ، متعدد الخيارات ، صواب/خطأ ، إجابة قصيرة). يمكن للطلاب في امتحان الذكاء الاصطناعي تلقائيًا تصنيف الامتحان وإنشاء تقارير ثاقبة بعد أن يقدم المرشح التقييم.
نظرة عامة على ميزاتها الرئيسية المتعلقة بالتقييم:
● قم بإنشاء ما يصل إلى 10 أنواع أسئلة ، بما في ذلك خيارات متعددة ، حقيقية/خاطئة ، ملء في الفراغ ، مطابقة ، إجابة قصيرة ، وأسئلة المقالة.
● يقوم تلقائيًا بإنشاء تقارير مفصلة – الدرجات الفردية ، وتقرير الأسئلة ، وأداء المجموعة.
● يسجل على الفور أسئلة موضوعية والإجابات الذاتية ، استخدم التسجيل المستند إلى Rubric للتناسق.
● API و SSO يساعد المدربين على دمج OnlineExamMaker مع Google Classroom و Microsoft Teams و CRM والمزيد.
إنشاء الأسئلة تلقائيًا باستخدام الذكاء الاصطناعي
الجزء 2: 15 أسئلة وأجوبة مسابقة CSS
or
1. سؤال: ما هو اختصار CSS؟
أ. Cascading Style Sheets
ب. Computer Style Sheets
ج. Creative Style Sheets
د. None of the above
الإجابة الصحيحة: أ
شرح: CSS يقف على Cascading Style Sheets، وهو لغة تصميم لتحكم في مظهر الصفحات الإلكترونية.
2. سؤال: كيف تضيف CSS إلى صفحة HTML؟
أ. باستخدام عنصر {style} داخل {head}
ب. عبر رابط خارجي بـ {link}
ج. كصيغة inline باستخدام خاصية style
د. كل الخيارات السابقة
الإجابة الصحيحة: د
شرح: يمكن إضافة CSS بطرق متعددة، بما في ذلك العنصر {style}، الرابط الخارجي، أو الطريقة الداخلية inline، مما يعطي مرونة في التنفيذ.
3. سؤال: ما هو مصطلح “مختار الفئة” في CSS؟
أ. يحدد عناصر باستخدام رمز #
ب. يحدد عناصر باستخدام رمز .
ج. يحدد العناصر الفريدة فقط
د. ليس له علاقة بـ CSS
الإجابة الصحيحة: ب
شرح: مختار الفئة (class selector) يستخدم رمز النقطة (.) لتحديد عناصر تحمل فئة معينة، مما يسمح بإعادة استخدام النمط.
4. سؤال: ما الفرق الرئيسي بين معرف (ID) وفئة (Class) في CSS؟
أ. ID يمكن استخدامه مرة واحدة فقط، بينما Class يمكن استخدامه عدة مرات
ب. Class يبدأ برمز #
ج. لا فرق بينهما
د. ID يستخدم للعناصر الديناميكية فقط
الإجابة الصحيحة: أ
شرح: معرف ID فريد لعنصر واحد، بينما Class يمكن تطبيقه على عدة عناصر، مما يجعل Class أكثر مرونة لإعادة الاستخدام.
5. سؤال: ما هو نموذج الصندوق (Box Model) في CSS؟
أ. يتكون من محتوى، حواف، حشو، وحواف خارجية
ب. يتعلق فقط بالألوان
ج. طريقة لتحريك العناصر
د. ليس جزءًا من CSS
الإجابة الصحيحة: أ
شرح: نموذج الصندوق يشمل محتوى العنصر، الحشو (padding)، الحدود (border)، والحواف الخارجية (margin)، وهو أساس تصميم الصفحات.
6. سؤال: كيف تتمركز عنصر في وسط الصفحة باستخدام CSS؟
أ. باستخدام خاصية margin: auto;
ب. باستخدام text-align: center;
ج. كلا الخيارين
د. لا يمكن ذلك
الإجابة الصحيحة: ج
شرح: خاصية margin: auto; تعمل للتمركز الأفقي، بينما text-align: center; تعمل للنصوص، ويمكن دمجهما للتمركز الكامل.
7. سؤال: ما هو Flexbox في CSS؟
أ. نظام لتوزيع العناصر بشكل مرن
ب. خاصية للألوان فقط
ج. طريقة لإنشاء رسوم متحركة
د. ليس موجودًا في CSS
الإجابة الصحيحة: أ
شرح: Flexbox هو نظام تصميم يساعد في ترتيب العناصر بشكل مرن واستجابي، خاصة في الشاشات المختلفة.
8. سؤال: ما هي وحدات القياس الشائعة في CSS مثل px و em؟
أ. px هي وحدة ثابتة، بينما em نسبية للحجم الأساسي
ب. كلاهما وحدات ثابتة
ج. em هي وحدة للألوان
د. لا توجد وحدات في CSS
الإجابة الصحيحة: أ
شرح: px تعني بكسل ثابت، بينما em تعتمد على حجم الخط الأساسي، مما يجعلها أكثر استجابة للتصميم.
9. سؤال: ما هي خاصية:hover في CSS؟
أ. تغيير النمط عند مرور الفأرة فوق العنصر
ب. تغيير اللون فقط
ج. خاصية للعناصر الديناميكية
د. ليس لها أي تأثير
الإجابة الصحيحة: أ
شرح::hover هي pseudo-class تفعل تغييرات في النمط عند تفاعل المستخدم، مثل مرور الفأرة، لتحسين التجربة.
10. سؤال: كيف تستخدم Media Queries في CSS للتصميم الاستجابي؟
أ. لتحديد قواعد بناءً على حجم الشاشة
ب. لتغيير الألوان فقط
ج. لإضافة صور
د. غير ذلك
الإجابة الصحيحة: أ
شرح: Media Queries تسمح بتطبيق قواعد CSS مختلفة بناءً على سمات الجهاز، مثل العرض، لجعل الموقع يتكيف مع الشاشات.
11. سؤال: ما الفرق بين Transitions و Animations في CSS؟
أ. Transitions لتغييرات سلسة، بينما Animations لتسلسلات معقدة
ب. كلاهما نفس الشيء
ج. Transitions غير مدعومة
د. Animations للألوان فقط
الإجابة الصحيحة: أ
شرح: Transitions تتعامل مع التغييرات البسيطة، بينما Animations تسمح بإنشاء تسلسلات كاملة باستخدام keyframes.
12. سؤال: ما هي قاعدة التحديد (Specificity) في CSS؟
أ. طريقة لتحديد أي نمط يفوق الآخر
ب. خاصية للأحجام فقط
ج. ليس مهمًا
د. يتعلق بالألوان
الإجابة الصحيحة: أ
شرح: Specificity تحدد أولوية النمط بناءً على نوع المختار، مثل ID أعلى من Class، لتجنب التعارضات.
13. سؤال: هل يرث العناصر الفرعية الخصائص من العناصر الأم في CSS؟
أ. نعم، لبعض الخصائص مثل اللون والخط
ب. لا، أبدًا
ج. فقط للأحجام
د. غير ذلك
الإجابة الصحيحة: أ
شرح: الوراثة في CSS تسمح للخصائص مثل color و font-family بالانتشار من العنصر الأم إلى الفرعية، لكن ليس كل الخصائص.
14. سؤال: ما هي الـ Vendor Prefixes في CSS؟
أ. رموز لدعم المتصفحات المختلفة
ب. خاصية للألوان
ج. ليس موجودًا
د. يتعلق بالصور
الإجابة الصحيحة: أ
شرح: Vendor Prefixes مثل -webkit- تساعد في دعم الخصائص الجديدة في متصفحات معينة قبل اعتمادها رسميًا.
15. سؤال: كيف تستخدم CSS Variables؟
أ. لتعريف قيم قابلة لإعادة الاستخدام باستخدام –variable
ب. فقط للألوان
ج. ليس مدعومًا
د. يتعلق بالأنماط الديناميكية
الإجابة الصحيحة: أ
شرح: CSS Variables تسمح بتعريف قيم عالمية باستخدام:root واستدعائها، مما يسهل الصيانة والتغييرات السريعة.
or
الجزء 3: جرب مولد أسئلة على OnlineExamMaker AI لإنشاء أسئلة اختبار
إنشاء الأسئلة تلقائيًا باستخدام الذكاء الاصطناعي