Dan Levy

اختبار: هل تعرف أساسيات CSS؟ (2025)

هل أنت متمكن بما يكفي في الواجهة الأمامية؟

اختبار: هل تعرف CSS؟

1. 

إحماء: الخطوط

اختر الواحدة غير الصالحة ❌ font-size:

10cx غير صحيح لأن cx ليست وحدة CSS حقيقية. (على الأقل وقت كتابة هذا النص.)

الوحدات الشائعة تشمل px و rem و em المألوفة.

الوحدات الأحدث مفيدة للتخطيطات الديناميكية والمتجاوبة.

  • ch - عرض الحرف 0
  • vmin - الحد الأدنى لمنفذ العرض
  • vmax - الحد الأقصى لمنفذ العرض
  • vh - ارتفاع منفذ العرض
  • vw - عرض منفذ العرض

هناك أيضًا عدة وحدات كانت موجودة دائمًا ولكن نادرًا ما تُستخدم، مثل cm للسنتيمترات، mm، in للبوصات، pt للنقاط

2. 

إحماء: الألوان

هل يمكنك اكتشاف الواحد الصحيح 👍 من أكواد Hex؟

يمكن استخدام أكواد Hex لتمثيل الألوان في CSS. تبدأ بـ # ويجب أن تحتوي على 3 أو 4 أو 6 أو 8 أرقام سداسية عشرية.

كود Hex المكون من 3 أحرف هو اختصار للكود المكون من 6 أحرف، حيث يتم تكرار كل حرف. الكود المكون من 4 أحرف يتضمن قناة ألفا للشفافية.

على سبيل المثال #ABC هو نفسه #AABBCC، و #ABCD هو نفسه #AABBCCDD. لمعرفة المزيد عن التعامل مع القيم السداسية، اطّلع على اختبار JavaScript للأرقام.

3. 

إحماء: الوحدات

أي من هذه الوحدات ليست وحدة CSS صالحة ❌؟

الوحدات الجديدة مثل ch وvmin وvmax وvh وvw مفيدة جدًا للتخطيطات الديناميكية/المستجيبة.

هناك أيضًا عدة وحدات كانت موجودة منذ البداية لكن نادرًا ما تُستخدم، مثل cm للسنتيمتر، وmm، وin للبوصة، وpt للنقاط، وpc، وcap لحجم الأحرف الكبيرة، وex الذي يساوي ارتفاع الحرف x.

الوحدات الشائعة تشمل px المألوفة للبكسل، وem النسبية لحجم خط العنصر، وrem التي هي في الحقيقة تكريم لفرقة R.E.M. المنسية من التسعينيات (حسنًا، ليس حقًا، إنها مجرد وحدة em نسبية تشير إلى العنصر الجذر).

4. 

المحددات: الأساسيات

أي محدد يطابق عنصر HTML التالي بشكل أفضل؟

<a id="home" name="home" href="/home">Home</a>

الإجابة الصحيحة هي a#home[name='home']، والتي تطابق كلاً من الخاصيتين id و name. في HTML بنمط المعايير، قيم ID حساسة لحالة الأحرف، لذا لا يطابق #Home القيمة id="home". المسافة معامل علاقة سليل، فتستهدف عنصرًا آخر داخل سلف بدل جمع الشروط على الرابط نفسه.

المحدد :contains() ليس محدد CSS قياسي، لكنه متوفر في بعض مكتبات JavaScript.

5. 

المحددات: الأساسيات

أي محدد يطابق زر HTML التالي؟

<button onclick="openModal()">Contact</button>

الإجابة الصحيحة هي button[onclick]، والتي تستهدف وجود السمة onclick.

لاحظ أن :link يستهدف فقط روابط href غير المُزارة، و::click ليس عنصرًا زائفًا صالحًا، و:focus يستهدف فقط العنصر المُركّز عليه.

6. 

المُحدِّدات: الأساسيات

أي من هذه المُحدِّدات غير صالح؟

المُحدِّد c > > d {} غير صالح لأن المُركِّب الفرعي (child combinator) تكرر بدون وجود مُحدِّد بين الرمزين >.

المُحدِّدات الأخرى صالحة. المُحدِّد النوعي مثل c {} هو CSS صحيح نحويًا حتى لو كان c ليس عنصر HTML قياسي.

7. 

المحددات: الأساسيات

أي محدد يطابق الرابط الأخير في HTML التالي؟

<nav>
  <a name="home" href="/home">Home</a>
  <a name="login" href="/login">Login</a>
  <a name="help" href="/help">Help</a>
</nav>

المحدد الصحيح هو a:last-child، الذي يطابق آخر <a> عندما يكون أيضًا آخر طفل في العنصر الأب. nav:nth-child(3) سيطابق عنصر <nav> الذي هو الطفل الثالث من العنصر الأب الخاص به.

8. 

المُحدد: الخصوصية

أي مُحدد سيكون له الأولوية؟

المُحدد a#quote له الأولوية بسبب المعرف (ID)، الذي له خصوصية أعلى من المُحددات القائمة على الوسوم أو الفئات.

9. 

التخطيطات: التوسيط

أي تصريح يوسّط النص المضمن أفقيًا داخل الكتلة الحاوية له؟

التصريح text-align: center; يوسّط النص داخل الكتلة. لا توجد خاصية CSS باسم align. يمكن لـ margin: 0 auto; توسيط كتلة ذات عرض مقيد، لكنه لا يوسّط النص بداخلها. تستخدم align-content لمحاذاة المحتوى في سياقات تخطيط تدعمها، وليست خاصية لمحاذاة النص. أما text-content فليست خاصية CSS صالحة.

10. 

التخطيطات: التوسيط

كيف تقوم بتوسيط المحتوى رأسيًا داخل حاوية كتلة في تخطيط التدفق الحديث؟

استخدام align-content هو الطريقة الحديثة لتوسيط محتويات حاوية كتلة رأسيًا في تخطيط التدفق.

الخاصيتان align-items و justify-content تُستخدمان في تخطيطات flexbox و grid، وليس في التدفق.

كل من margin: 0 auto; و margin: auto; يقومان بتوسيط عنصر كتلة أفقيًا، وليس رأسيًا.

11. 

التخطيطات: الوحدات

ما هو حجم البكسل لنص الرابط <a> في HTML التالي؟

<body style="font-size: 40px !important;">
  <nav style="font-size: 50%;">
    <a style="font-size: 25%;">HOME</a>
  </nav>
</body>

يتم حساب font-size للعنصر <a> على أنه 5px: 40px (body) * 50% (nav) = 20px، ثم 20px * 25% = 5px.

12. 

الوحدات: REM

ما هو حجم البكسل لـ 1.2rem للرابط “الرئيسية” في HTML التالي؟

<html style="font-size: 10px;">
  <body style="font-size: 20px;">
    <a style="font-size: 1.2rem;">HOME</a>
  </body>
</html>

1.2rem تساوي 12px لأن وحدات rem تستند إلى حجم خط العنصر الجذر <html>، والذي تم ضبطه هنا على 10px.

13. 

الوحدات: EM

مشابه للسؤال السابق، ما هو حجم البكسل لـ 1.2em لرابط “HOME” في HTML التالي؟

<html style="font-size: 10px;">
  <body style="font-size: 20px;">
    <a style="font-size: 1.2em;">HOME</a>
  </body>
</html>

1.2em يُترجم إلى 24px لأن وحدات em تشير إلى حجم الخط الموروث، والذي تم تعيينه هنا إلى 20px.

14. 

المحدد: الخصوصية

أي محدد لديه أقل خصوصية؟

المحدد :where(.card) .title لديه أقل خصوصية. الفئة الزائفة :where() وكل ما بداخلها تساهم بـ 0-0-0، لذا فقط .title يُحتسب. المحدد :is(.card) .title يحتفظ بخصوصية .card، والمحدد .card .title يحتوي على صنفين، والمحدد #card .title يتضمن معرفًا.

Loading comments...