Dan Levy

חידון: האם אתה מכיר את יסודות CSS? (2025)

האם אתה פרונט-אנד מספיק?

חידון: האם אתה מכיר CSS?

1. 

חימום: גופנים

בחר את האחת הלא חוקית ❌ font-size:

10cx שגוי מכיוון ש-cx אינה יחידת CSS אמיתית. (לפחות בזמן כתיבת שורות אלה.)

יחידות פופולריות כוללות את px, rem, em המוכרות.

יחידות חדשות יותר שימושיות לפריסות דינמיות ורספונסיביות.

  • ch - רוחב התו 0
  • vmin - 1% מהממד הקטן של אזור התצוגה
  • vmax - 1% מהממד הגדול של אזור התצוגה
  • vh - גובה תצוגה
  • vw - רוחב תצוגה

ישנן גם מספר יחידות שהיו קיימות תמיד אך כמעט ולא בשימוש, כמו cm לסנטימטרים, mm, in לאינצ’ים, pt לנקודות

2. 

חימום: צבעים

האם תוכל לזהות את היחיד קוד הקס ✅ תקף?

קודי הקס (Hex codes) יכולים לשמש לייצוג צבעים ב-CSS. הם מתחילים בסימן # וחייבים להכיל 3, 4, 6 או 8 ספרות הקסדצימליות.

קוד הקס בן 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. הנשכחת משנות ה-90 (טוב, לא באמת, זו פשוט יחידת 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 סטנדרטי, אבל הוא זמין בחלק מספריות JS.

5. 

בוררים: יסודות

איזה בורר מתאים לכפתור ה-HTML הבא?

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

התשובה הנכונה היא button[onclick], המכוון לקיומה של התכונה onclick.

שים לב ש-:link מכוון רק לקישורי href שלא ביקרת בהם, ::click אינו פסאודו-אלמנט חוקי, ו-:focus מכוון רק לאלמנט הממוקד.

6. 

בוררים: יסודות

איזה מהבוררים הבאים אינו חוקי?

הבורר c > > d {} אינו חוקי מכיוון שהקומבינטור ‘child’ חוזר על עצמו ללא בורר בין שני התווים >.

הבוררים האחרים חוקיים. בורר מסוג כמו 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 עבור הקישור “HOME” ב-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 יש את הספציפיות הנמוכה ביותר. ה-pseudo-class :where() וכל מה שבתוכו תורם 0-0-0, אז רק .title נחשב. :is(.card) .title שומר על הספציפיות של .card, ל-.card .title יש שתי מחלקות, ו-#card .title כולל מזהה (ID).

Loading comments...