חידון: האם אתה מכיר את יסודות CSS? (2025)
האם אתה פרונט-אנד מספיק?
חידון: האם אתה מכיר CSS?
- CSS מודרני? 🤔
- האם CSS שייך לקורות החיים שלך??? 🚀
- רב-ברירה. 🤖 … כמה קשה זה יכול להיות, אה?
בחר את האחת הלא חוקית ❌ font-size:
10cx שגוי מכיוון ש-cx אינה יחידת CSS אמיתית. (לפחות בזמן כתיבת שורות אלה.)
יחידות פופולריות כוללות את px, rem, em המוכרות.
יחידות חדשות יותר שימושיות לפריסות דינמיות ורספונסיביות.
ch- רוחב התו0vmin- מינימום תצוגהvmax- מקסימום תצוגהvh- גובה תצוגהvw- רוחב תצוגה
ישנן גם מספר יחידות שהיו קיימות תמיד אך כמעט ולא בשימוש, כמו cm לסנטימטרים, mm, in לאינצ’ים, pt לנקודות
האם תוכל לזהות את היחיד קוד הקס ✅ תקף?
קודי הקס (Hex codes) יכולים לשמש לייצוג צבעים ב-CSS. הם מתחילים בסימן # וחייבים להכיל 3, 4, 6 או 8 ספרות הקסדצימליות.
קוד הקס בן 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. הנשכחת משנות ה-90 (טוב, לא באמת, זו פשוט יחידת em יחסית שמתייחסת לאלמנט השורש).
איזה סלקטור מתאים ביותר ל-HTML הבא?
<a id="home" name="home" href="/home">Home</a>התשובה הנכונה היא a#home[name='home'], שתואמת גם למאפיין id וגם למאפיין name. סלקטורים ב-CSS תלויים ברישיות, כך ש-#Home לא יעבוד, ורווחים מרמזים על אלמנטים ילדים, מה שלא רלוונטי כאן.
הסלקטור :contains() אינו סלקטור CSS סטנדרטי, אבל הוא זמין בחלק מספריות JS.
איזה בורר מתאים לכפתור ה-HTML הבא?
<button onclick="openModal()">Contact</button>התשובה הנכונה היא button[onclick], המכוון לקיומה של התכונה onclick.
שים לב ש-:link מכוון רק לקישורי href שלא ביקרת בהם, ::click אינו פסאודו-אלמנט חוקי, ו-:focus מכוון רק לאלמנט הממוקד.
איזה מהבוררים הבאים אינו חוקי?
הבורר c > > d {} אינו חוקי מכיוון שהקומבינטור ‘child’ חוזר על עצמו ללא בורר בין שני התווים >.
הבוררים האחרים חוקיים. בורר מסוג כמו 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, שיש לו ספציפיות גבוהה יותר מאשר בוררים מבוססי תג או מחלקה.
איך אפשר למרכז “shit” בתוך קופסה?
שימוש ב-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 עבור הקישור “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.
בדומה לשאלה הקודמת, מה יהיה גודל הפיקסלים של 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 יש את הספציפיות הנמוכה ביותר. ה-pseudo-class :where() וכל מה שבתוכו תורם 0-0-0, אז רק .title נחשב. :is(.card) .title שומר על הספציפיות של .card, ל-.card .title יש שתי מחלקות, ו-#card .title כולל מזהה (ID).