اختبار: هل تعرف أساسيات CSS؟ (2025)
هل أنت متمكن بما يكفي في الواجهة الأمامية؟
اختبار: هل تعرف CSS؟
- CSS الحديثة؟ 🤔
- هل تنتمي CSS إلى سيرتك الذاتية؟؟؟ 🚀
- اختيار من متعدد. 🤖 … ما مدى صعوبة الأمر، أليس كذلك؟
اختر الواحدة غير الصالحة ❌ font-size:
10cx غير صحيح لأن cx ليست وحدة CSS حقيقية. (على الأقل وقت كتابة هذا النص.)
الوحدات الشائعة تشمل px و rem و em المألوفة.
الوحدات الأحدث مفيدة للتخطيطات الديناميكية والمتجاوبة.
ch- عرض الحرف0vmin- الحد الأدنى لمنفذ العرضvmax- الحد الأقصى لمنفذ العرضvh- ارتفاع منفذ العرضvw- عرض منفذ العرض
هناك أيضًا عدة وحدات كانت موجودة دائمًا ولكن نادرًا ما تُستخدم، مثل cm للسنتيمترات، mm، in للبوصات، pt للنقاط
هل يمكنك اكتشاف الواحد الصحيح 👍 من أكواد Hex؟
يمكن استخدام أكواد Hex لتمثيل الألوان في CSS. تبدأ بـ # ويجب أن تحتوي على 3 أو 4 أو 6 أو 8 أرقام سداسية عشرية.
كود Hex المكون من 3 أحرف هو اختصار للكود المكون من 6 أحرف، حيث يتم تكرار كل حرف. الكود المكون من 4 أحرف يتضمن قناة ألفا للشفافية.
على سبيل المثال #ABC هو نفسه #AABBCC، و #ABCD هو نفسه #AABBCCDD. لمعرفة المزيد عن التعامل مع القيم السداسية، اطّلع على اختبار JavaScript للأرقام.
أي من هذه الوحدات ليست وحدة CSS صالحة ❌؟
الوحدات الجديدة مثل ch وvmin وvmax وvh وvw مفيدة جدًا للتخطيطات الديناميكية/المستجيبة.
هناك أيضًا عدة وحدات كانت موجودة منذ البداية لكن نادرًا ما تُستخدم، مثل cm للسنتيمتر، وmm، وin للبوصة، وpt للنقاط، وpc، وcap لحجم الأحرف الكبيرة، وex الذي يساوي ارتفاع الحرف x.
الوحدات الشائعة تشمل px المألوفة للبكسل، وem النسبية لحجم خط العنصر، وrem التي هي في الحقيقة تكريم لفرقة R.E.M. المنسية من التسعينيات (حسنًا، ليس حقًا، إنها مجرد وحدة em نسبية تشير إلى العنصر الجذر).
أي محدد يطابق عنصر HTML التالي بشكل أفضل؟
<a id="home" name="home" href="/home">Home</a>الإجابة الصحيحة هي a#home[name='home']، والتي تطابق كلاً من الخاصيتين id و name. محددات CSS حساسة لحالة الأحرف، لذا فإن #Home لن يعمل، والمسافات تشير إلى العناصر الفرعية، وهو ما لا ينطبق هنا.
المحدد :contains() ليس محدد CSS قياسي، لكنه متوفر في بعض مكتبات JavaScript.
أي محدد يطابق زر HTML التالي؟
<button onclick="openModal()">Contact</button>الإجابة الصحيحة هي button[onclick]، والتي تستهدف وجود السمة onclick.
لاحظ أن :link يستهدف فقط روابط href غير المُزارة، و::click ليس عنصرًا زائفًا صالحًا، و:focus يستهدف فقط العنصر المُركّز عليه.
أي من هذه المُحدِّدات غير صالح؟
المُحدِّد c > > d {} غير صالح لأن المُركِّب الفرعي (child combinator) تكرر بدون وجود مُحدِّد بين الرمزين >.
المُحدِّدات الأخرى صالحة. المُحدِّد النوعي مثل c {} هو CSS صحيح نحويًا حتى لو كان c ليس عنصر HTML قياسي.
أي محدد يطابق الرابط الأخير في 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> الذي هو الطفل الثالث من العنصر الأب الخاص به.
أي مُحدد سيكون له الأولوية؟
المُحدد a#quote له الأولوية بسبب المعرف (ID)، الذي له خصوصية أعلى من المُحددات القائمة على الوسوم أو الفئات.
كيف يمكنك توسيط “نص” في مربع؟
استخدام text-align: center; هو الطريقة الصحيحة لتوسيط النص في عنصر كتلة. خصائص align تُستخدم لتخطيطات flexbox، و margin: 0 auto; تُستخدم لتوسيط عناصر الكتلة أفقيًا.
خاصية align-content تُستخدم لتخطيطات grid، و text-content ليست خاصية CSS صالحة.
كيف تقوم بتوسيط المحتوى رأسيًا داخل حاوية كتلة في تخطيط التدفق الحديث؟
استخدام align-content هو الطريقة الحديثة لتوسيط محتويات حاوية كتلة رأسيًا في تخطيط التدفق.
الخاصيتان align-items و justify-content تُستخدمان في تخطيطات flexbox و grid، وليس في التدفق.
كل من margin: 0 auto; و margin: auto; يقومان بتوسيط عنصر كتلة أفقيًا، وليس رأسيًا.
ما هو حجم البكسل لنص الرابط <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.
ما هو حجم البكسل لـ 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.
مشابه للسؤال السابق، ما هو حجم البكسل لـ 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.
أي محدد لديه أقل خصوصية؟
المحدد :where(.card) .title لديه أقل خصوصية. الفئة الزائفة :where() وكل ما بداخلها تساهم بـ 0-0-0، لذا فقط .title يُحتسب. المحدد :is(.card) .title يحتفظ بخصوصية .card، والمحدد .card .title يحتوي على صنفين، والمحدد #card .title يتضمن معرفًا.