Styling with CSS
הוצג| English | משמעות |
|---|---|
| padding/ˈpædɪŋ/ | פדינג |
| border/ˈbɔːdə/ | גבול |
| CSS/ˌsiː es ˈes/ | CSS |
| selector/sɪˈlektə/ | בוחר |
| declaration/ˌdekləˈreɪʃn/ | הצהרה |
| the box model/ðə bɒks ˈmɒdl/ | מודל הקופסה |
| margin/ˈmɑːdʒɪn/ | מרג'ין |
| responsive design/rɪˈspɒnsɪv dɪˈzaɪn/ | עיצוב רספונסיבי |
| media query/ˈmiːdiːə ˈkwɪərɪ/ | שאלת מדיה |
כרטיס בגודל 320 פיקסל עדיין נשפך מעבר למסך בגודל 320 פיקסל
- רוחב הכרטיס המוגדר אינו תמיד הרוחב הכולל שלו. פדינג וגבולות יכולים להוסיף רווח מחוץ לרוחב התוכן.
- CSS מאבזר כללים לעיצוב. בורר בוחר אלמנטים; הצהרה מספקת תכונה וערך, כמו
color: navy.
Give one practical reason for keeping reusable presentation rules in a stylesheet.
רמת קושי 3/5 · 200 מטבעות + בונוס קטן בהשלמה הראשונה היום
Example: “A shared stylesheet lets us update matching cards consistently without editing every HTML element.”
חשב לכל חלק מהתיבה
- מודל התיבה כולל תוכן, פדינג, גבול ו-מרג'ן. הפדינג והגבול נמצאים בתוך התיבה הצבועה; המרג'ן מפריד בינה לבין שכנים.
- עם
content-box, רוחב 320 פיקסל, פדינג 16 פיקסל בשני הצדדים וגבולות 2 פיקסל בשני הצדדים נותנים 356 פיקסל לפני המרג'נים. עםborder-box, הרוחב המוגדר 320 פיקסל כולל את הפדינג והגבול.
Arrange the box-model areas from the content outward.
רמת קושי 3/5 · 200 מטבעות + בונוס קטן בהשלמה הראשונה היום
Padding and border surround the content; margin separates the box from neighbours.
With content-box, content width is 320 px, left/right padding is 16 px each and left/right border is 2 px each. What is the width before margins, in pixels?
רמת קושי 2/5 · 140 מטבעות + בונוס קטן בהשלמה הראשונה היום
320 + 16 + 16 + 2 + 2 = 356 px.
גרום לרוחב להיות גמיש
- עיצוב רספונסיבי מתאים תוכן ותצורה למרחב הקיים. כרטיס זה ממלא את הקונטיינר עד ל-400 פיקסל, עם פדינג וגבול כלולים.
- השתמש בכללה על אלמנט עם
class="card". תוכן ארוך שאינו נשבר, מרג'נים של ההורה וכללות אחרות עדיין צריכים בדיקה; הצהרה אחת לא יכולה להבטיח שהדף כולו יתאים.
.card {
box-sizing: border-box;
width: 100%;
max-width: 400px;
padding: 16px;
border: 2px solid currentColor;
overflow-wrap: anywhere;
}
בתוך קונטיינר בגודל 280 פיקסל, הכרטיס רחב 280 פיקסל כולל את הפדינג והגבול. בתוך קונטיינר בגודל 700 פיקסל, הוא עוצר ב-400 פיקסל. המרג'נים החיצוניים שלו הם עדיין רווח נוסף.
A padded card should fill its container up to 400 px including its borders. Which rule set best fits?
רמת קושי 1/5 · 100 מטבעות + בונוס קטן בהשלמה הראשונה היום
border-box includes padding and borders in the declared width. Parent layout and content still need testing.
שינה תצורה רק כאשר יש צורך בכך
- שאלת מדיה מיישמת כללות תחת תנאי. לדוגמה, שנה שני עמודות לאחד כאשר הן הופכות לצרות מדי לקריאה.
- בחר את נקודת הקיצוץ מהתוכן, ואז בדוק מספר רוחבים וטקסט גדול יותר. אל תניח שכל הטלפונים או כל המחשבים ניידים בעלי אותו רוחב שימושי.
בדוק את הכללה שמנצחת בפועל
- הקסקדה שוקלת גורמים כולל מקור, חשיבות ושכבות לפני ספציפיות הבוחר. עבור כללות הדומות זו לזו, ID הוא ספציפי יותר מכיתה (class); כיתה היא ספציפית יותר מבוחר אלמנט.
- כאשר כללים תואמים בעלי ספציפיות שווה, סדר מקור מאוחר יותר יכול לקבוע. השתמש בכלי המפתח בדפדפן כדי לבדוק כללים תואמים, ספרטות מסוגננת טעונה וערכים מחושבים.
!important משתתף בקסקדה; הוא אינו שובר את CSS. הימנע משימוש בו כתוספת ללא הסבר. בדוק את הסיבה קודם: ספרטות מסוגננת חסרה, הצהרה לא תקפה או כלל דוחק עשויים להסביר תוצאה בלתי צפויה.
Two normal rules in the same origin and layer use the identical selector .card and set conflicting colours. No other deciding factors differ. Which colour wins?
רמת קושי 1/5 · 100 מטבעות + בונוס קטן בהשלמה הראשונה היום
Equal specificity does not make order irrelevant. For comparable tied rules, later source order decides.
!important is part of CSS cascade rules, but should not be used as an unexplained patch.
רמת קושי 1/5 · 100 מטבעות + בונוס קטן בהשלמה הראשונה היום
Importance affects precedence. Inspect the conflict and use it deliberately rather than claiming it breaks CSS.
Match the observation to the next useful check.
רמת קושי 2/5 · 140 מטבעות + בונוס קטן בהשלמה הראשונה היום
Inspect the actual cause rather than assuming all failures come from specificity.
בדיקת הקופסה והחוויה הקריאה
- נסה קונטיינרים צרים ורחבים, ריכוז על ידי המקלדת וטקסט מוגדל. ודא שהטקסט קריא בשני ערכי הצבע ובשאלה תוכן יכול להתעגל.
- הסבר תיקון זרימה יתר אחד באמצעות חישוב הקופסה ו衝突 סגנון אחד באמצעות הכללים התואמים בפועל.
חשב את כל הקופסה, העדף גדלים גמישים, ואז בדוק את הקסקדה. ספציפיות חשובה, אך היא אינה הגורם היחיד שקובע.
מקור: W3C CSS cascade.
A card fits at normal text size but overflows when text is enlarged. What should you do?
רמת קושי 1/5 · 100 מטבעות + בונוס קטן בהשלמה הראשונה היום
Responsive behaviour includes changing text and content constraints, not only one viewport screenshot.