1.4 תצוגה, מיקום וספציפיות הרצאה

תצוגה - display

המאפיין display הוא אחד המאפיינים הכי חשובים ב-CSS. הוא קובע איך אלמנט מתנהג בדף ביחס לאלמנטים אחרים.

block - בלוק

div, p, h1, h2, h3, h4, h5, h6, ul, ol, li, section, article, header, footer {
    display: block; /* these are block by default */
}

אלמנטי block:
- תופסים את כל הרוחב הזמין (מקצה לקצה)
- מתחילים בשורה חדשה
- אפשר להגדיר להם width, height, margin, padding
- אלמנטי block נפוצים: div, p, h1-h6, ul, ol, section, article

.block-example {
    display: block;
    width: 300px;
    height: 100px;
    background-color: lightblue;
    margin-bottom: 10px;
}

inline - שוטף

span, a, strong, em, img {
    display: inline; /* these are inline by default */
}

אלמנטי inline:
- זורמים עם הטקסט, לא מתחילים שורה חדשה
- אי אפשר להגדיר width ו-height (הם מתעלמים מזה)
- margin ו-padding אופקיים עובדים, אבל אנכיים לא משפיעים על layout
- אלמנטי inline נפוצים: span, a, strong, em

.inline-example {
    display: inline;
    /* width: 300px; -- this will be IGNORED */
    /* height: 100px; -- this will be IGNORED */
    background-color: yellow;
    padding: 5px 10px;
}

inline-block - שילוב

.inline-block-example {
    display: inline-block;
    width: 150px;
    height: 80px;
    background-color: lightgreen;
    margin: 5px;
}

inline-block שילוב של שניהם:
- זורם עם הטקסט כמו inline (לא מתחיל שורה חדשה)
- אבל אפשר להגדיר width, height, margin, padding כמו block
- שימושי ליצירת אלמנטים ברצף אופקי עם גדלים מוגדרים

דוגמה מעשית - תפריט ניווט:

<nav>
    <a class="nav-link" href="/">Home</a>
    <a class="nav-link" href="/about">About</a>
    <a class="nav-link" href="/contact">Contact</a>
</nav>

.nav-link {
    display: inline-block;
    padding: 10px 20px;
    background-color: #333;
    color: white;
    text-decoration: none;
}

none - הסתרה מלאה

.hidden {
    display: none;
}

• האלמנט נמחק לגמרי מה-layout
• הוא לא נראה ולא תופס מקום
• האלמנט עדיין קיים ב-HTML, רק לא מוצג

visibility: hidden - הסתרה עם שמירת מקום

.invisible {
    visibility: hidden;
}

• האלמנט לא נראה אבל תופס מקום
• נשאר חור ריק במקום שלו

ההבדל:

/* display: none - element is removed from layout */
.gone {
    display: none;
}

/* visibility: hidden - element is invisible but still takes space */
.invisible {
    visibility: hidden;
}

---

מיקום - position

המאפיין position קובע איך אלמנט ממוקם בדף. בשילוב עם top, right, bottom, left אנחנו יכולים למקם אלמנטים בדיוק איפה שנרצה.

static - ברירת מחדל

.static {
    position: static; /* default, normal flow */
}

• זו ברירת המחדל של כל אלמנט
• האלמנט ממוקם לפי הזרימה הרגילה של הדף
• top, right, bottom, left לא עובדים על אלמנט static

relative - יחסי

.relative {
    position: relative;
    top: 20px;    /* moves 20px DOWN from normal position */
    left: 30px;   /* moves 30px RIGHT from normal position */
}

• האלמנט ממוקם יחסית למיקום הרגיל שלו
• הוא עדיין תופס מקום במיקום המקורי (אלמנטים אחרים לא זזים)
• top: 20px = מזיז אותו 20px למטה מהמיקום המקורי
• left: 30px = מזיז אותו 30px ימינה מהמיקום המקורי
• שימוש נפוץ: כ-"הורה ממוקם" עבור ילדים absolute (נראה עוד רגע)

absolute - מוחלט

.parent {
    position: relative; /* creates a positioning context */
}

.child {
    position: absolute;
    top: 10px;
    right: 10px;
}

• האלמנט יוצא מהזרימה הרגילה (לא תופס מקום)
• ממוקם יחסית להורה הממוקם הקרוב ביותר (הורה עם position שאינו static)
• אם אין הורה ממוקם, ממוקם יחסית ל-body (כל הדף)
• top, right, bottom, left מגדירים את המרחק מהקצוות של ההורה

דוגמה מעשית - תגית על תמונה:

<div class="image-container">
    <img src="product.jpg" alt="Product">
    <span class="badge">NEW</span>
</div>

.image-container {
    position: relative;
    width: 300px;
}

.image-container img {
    width: 100%;
}

.badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: red;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}

ה-badge ממוקם 10px מלמעלה ו-10px מימין של ה-container (לא של הדף כולו, כי ל-container יש position: relative).

fixed - קבוע

.fixed-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0; /* same as width: 100% */
    background-color: white;
    padding: 15px 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

• האלמנט יוצא מהזרימה
• ממוקם יחסית לחלון הדפדפן (viewport)
• נשאר במקום גם כשגוללים - תמיד נראה
• שימושים נפוצים: navbar קבוע, כפתור "חזרה למעלה", chat widget

sticky - דביק

.sticky-header {
    position: sticky;
    top: 0;
    background-color: white;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

• מתנהג כמו relative עד שמגיעים לנקודת גלילה מסוימת
• אז הוא "נדבק" ומתנהג כמו fixed
• top: 0 אומר: כשהאלמנט מגיע לראש החלון, הוא נדבק שם
• שימושי לכותרות של טבלאות, כותרות מקטעים, וכו'

דוגמה - כותרות מקטעים דביקות:

<section>
    <h2 class="sticky-header">Section A</h2>
    <p>Content...</p>
    <p>More content...</p>
</section>
<section>
    <h2 class="sticky-header">Section B</h2>
    <p>Content...</p>
    <p>More content...</p>
</section>

.sticky-header {
    position: sticky;
    top: 0;
    background-color: #2c3e50;
    color: white;
    padding: 12px 20px;
    margin: 0;
    z-index: 10;
}

כשגוללים למטה, כל כותרת נדבקת למעלה עד שהכותרת הבאה מגיעה ומחליפה אותה.

z-index והקשר שכבות - stacking context

כשאלמנטים חופפים (בגלל position), z-index קובע מי מעל מי:

.bottom {
    position: absolute;
    z-index: 1;
    background-color: red;
}

.middle {
    position: absolute;
    z-index: 2;
    background-color: green;
}

.top {
    position: absolute;
    z-index: 3;
    background-color: blue;
}

• z-index עובד רק על אלמנטים ממוקמים (לא static)
• מספר גבוה יותר = מעל
• אפשר להשתמש במספרים שליליים
• מומלץ להשתמש בערכים עם מרווחים (10, 20, 30 או 100, 200, 300) כדי שיהיה מקום להוסיף שכבות באמצע

float ו-clear (הקשר היסטורי)

לפני Flexbox ו-Grid, השתמשו ב-float ליצירת layouts:

.float-left {
    float: left;
    width: 50%;
}

.float-right {
    float: right;
    width: 50%;
}

.clear {
    clear: both;
}

• float מוציא אלמנט מהזרימה ומצמיד אותו לצד
• clear מונע מאלמנט "לעלות" ליד אלמנט צף
• היום כמעט לא משתמשים ב-float ל-layout - Flexbox ו-Grid עדיפים בהרבה
• float עדיין שימושי למקרה אחד: עטיפת טקסט סביב תמונה

---

ספציפיות - specificity

כשיש כמה כללי CSS שחלים על אותו אלמנט, CSS צריך להחליט מי מנצח. זה נקרא ה-cascade (מפל).

סדר העדיפויות

מהחזק לחלש:
1. !important (כפיה - נמנעים מזה)
2. סגנונות inline (תכונת style ב-HTML)
3. ספציפיות הסלקטור (חישוב)
4. סדר הופעה בקוד (האחרון מנצח)

חישוב ספציפיות

כל סלקטור מקבל ציון. חישוב הציון:

סוג	ערך	דוגמה
סגנון inline	1000	style="color: red"
ID	100	#header
class / attribute / pseudo-class	10	.nav, [type="text"], :hover
אלמנט / pseudo-element	1	div, p, ::before

דוגמאות חישוב:

p { }                    /* 0-0-0-1 = specificity 1 */
.intro { }               /* 0-0-1-0 = specificity 10 */
#header { }              /* 0-1-0-0 = specificity 100 */
p.intro { }              /* 0-0-1-1 = specificity 11 */
#header .nav a { }       /* 0-1-1-1 = specificity 111 */
#header .nav a.active { } /* 0-1-2-1 = specificity 121 */

/* who wins? */
p { color: blue; }               /* specificity: 1 */
.text { color: green; }          /* specificity: 10 -- WINS */

/* who wins? */
.text { color: green; }          /* specificity: 10 */
#main { color: red; }            /* specificity: 100 -- WINS */

/* who wins? */
.nav .link { color: blue; }      /* specificity: 20 */
a.active { color: green; }       /* specificity: 11 */
/* .nav .link wins because 20 > 11 */

הורשה - inheritance

חלק מהמאפיינים עוברים אוטומטית מהורה לילדים:

מאפיינים שעוברים בירושה (בדרך כלל קשורים לטקסט):
- color
- font-family, font-size, font-weight, font-style
- line-height
- text-align
- visibility
- cursor

מאפיינים שלא עוברים בירושה:
- border
- margin, padding
- background
- width, height
- display, position

/* the color applies to ALL text inside, thanks to inheritance */
body {
    color: #333;
    font-family: Arial, sans-serif;
}

/* links have their own default color, override it */
a {
    color: inherit; /* forces inheritance from parent */
}

ערכים מיוחדים

.element {
    color: inherit;  /* take the value from parent */
    color: initial;  /* reset to CSS default (usually black for color) */
    color: unset;    /* if inheritable -> inherit, otherwise -> initial */
    color: revert;   /* reset to browser default stylesheet */
}

• inherit - כופה ירושה מההורה
• initial - מחזיר לערך ברירת המחדל של CSS (לא של הדפדפן)
• unset - אם המאפיין בר-ירושה, מתנהג כמו inherit, אחרת כמו initial
• revert - מחזיר לברירת המחדל של הדפדפן

important! - כפיה

.text {
    color: blue !important; /* overrides EVERYTHING except inline !important */
}

• !important דורס כל כלל רגיל, ללא קשר לספציפיות
• זו פרקטיקה רעה - תמנעו מזה כמעט תמיד
• זה הופך CSS לקשה מאוד לתחזוקה כי כדי לדרוס !important צריך עוד !important
• המקרה היחיד שזה סביר: כשעובדים עם ספריות חיצוניות שאי אפשר לשנות
• אם אתם צריכים !important, זה בדרך כלל סימן שמשהו בארכיטקטורת ה-CSS צריך תיקון

סדר הופעה - source order

כשלשני כללים יש בדיוק את אותה ספציפיות, האחרון בקוד מנצח:

.text {
    color: blue;
}

.text {
    color: red; /* WINS - appears later */
}

איתור בעיות ב-DevTools

ב-DevTools, בלשונית Styles, אפשר לראות את כל הכללים שחלים על אלמנט. כללים שנדרסו מופיעים עם קו חוצה. זה מראה בדיוק מי דרס את מי ולמה.

---

שיטות מרכוז - centering methods

מרכוז הוא אחד הדברים שמתחילים מתקשים איתו ב-CSS. נסכם את כל השיטות:

מרכוז אופקי של טקסט

.center-text {
    text-align: center;
}

מרכוז אופקי של אלמנט block

.center-block {
    width: 300px;    /* must have a width */
    margin: 0 auto;
}

מרכוז אופקי ואנכי עם position

.parent {
    position: relative;
    height: 400px;
}

.center-absolute {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

• top: 50% ו-left: 50% שמים את הפינה השמאלית-עליונה במרכז
• transform: translate(-50%, -50%) מזיז את האלמנט חצי מהגודל שלו אחורה ולמעלה
• התוצאה: מרכוז מושלם

מרכוז עם Flexbox (הדרך הקלה ביותר)

.center-flex {
    display: flex;
    justify-content: center;  /* horizontal center */
    align-items: center;      /* vertical center */
    height: 400px;
}

• זו הדרך המומלצת - פשוטה, קריאה ועובדת תמיד
• נלמד על Flexbox בהרחבה בשיעור הבא

דוגמה מסכמת

<header class="navbar">
    <div class="navbar-brand">Logo</div>
    <nav class="navbar-links">
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/contact">Contact</a>
    </nav>
</header>

<main class="main-content">
    <div class="card">
        <span class="card-badge">Popular</span>
        <h2>Product Title</h2>
        <p>Product description goes here.</p>
    </div>
</main>

<button class="scroll-top">Up</button>

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* fixed navbar at top */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: white;
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.navbar-brand {
    font-size: 20px;
    font-weight: bold;
}

.navbar-links a {
    display: inline-block;
    padding: 8px 16px;
    text-decoration: none;
    color: #333;
}

/* main content with padding-top for fixed navbar */
.main-content {
    padding-top: 80px; /* space for fixed navbar */
    padding: 80px 20px 20px;
    max-width: 800px;
    margin: 0 auto;
}

/* card with positioned badge */
.card {
    position: relative;
    background: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.card-badge {
    position: absolute;
    top: -10px;
    right: 15px;
    background: #e74c3c;
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}

/* fixed scroll-to-top button */
.scroll-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #3498db;
    color: white;
    border: none;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 999;
}

סיכום

• display: block תופס שורה שלמה, inline זורם עם טקסט, inline-block שילוב של שניהם
• display: none מסיר מ-layout, visibility: hidden מסתיר אבל שומר מקום
• position: relative מזיז ממיקום רגיל, absolute ממוקם יחסית להורה, fixed למסך, sticky נדבק בגלילה
• z-index שולט בשכבות (מי מעל מי)
• ספציפיות: inline=1000, id=100, class=10, element=1
• הורשה: מאפייני טקסט עוברים מהורה לילד אוטומטית
• תמנעו מ-!important ומ-ID selectors כשאפשר
• למרכוז: Flexbox הוא הכי פשוט ומומלץ