המדריך האולטימטיבי ל-CSS

חזרה לקורס CSS

🧭 סלקטורים (Selectors)

בסיסיים
אוניברסלי* { box-sizing: border-box }
תג (Type)p, h1, ul, img { ... }
מחלקה (Class).btn-primary { ... }
מזהה (ID)#header { ... }
קבוצת סלקטוריםh1, h2, h3 { ... }
קומבינטורים
צאצא (רווח)nav a { ... }
ילד ישיר (>)ul > li { ... }
אח סמוך (+)h2 + p { ... }
אחים כלליים (~)h2 ~ p { ... }
מאפיין (Attribute)
[attr], [attr="val"], [attr~="word"], [attr|="prefix"], [attr^="start"], [attr$="end"], [attr*="any"] 
.link[href^="https://"] { ... }
פסאודו־מחלקות (Pseudo-classes)
:root, :any-link, :link, :visited, :hover, :active, :focus, :focus-visible, :focus-within, :enabled, :disabled, :read-only, :read-write, :placeholder-shown, :checked, :indeterminate, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :dir(ltr/rtl), :lang(he), :empty, :blank, :first-child, :last-child, :only-child, :nth-child(), :nth-last-child(), :first-of-type, :last-of-type, :only-of-type, :nth-of-type(), :is(), :where(), :not(), :has() 
input:focus-visible { outline: 2px solid var(--color-accent) }
li:nth-child(odd) { background: #f5f0e8 }
article:has(img) { border: 1px solid #c9a96e }
פסאודו־אלמנטים (Pseudo-elements)
::before, ::after, ::first-letter, ::first-line, ::selection, ::marker, ::placeholder 
blockquote::before { content: "❝"; color: var(--color-accent) }

בדיקת סלקטורים

🔍 בודק Selectors

כתוב סלקטור (לדוגמה: .guide-card או details[open]) ובדוק על כמה אלמנטים בעמוד הוא תופס.

הקלד סלקטור ולחץ על 'בדוק'

דמו סלקטורים

אלמנט div רגיל
אלמנט עם class="demo"
אלמנט עם id="special"
עוד אלמנט עם class="demo"

🧪 מעבדה אינטראקטיבית

שחקו עם המאפיינים הנפוצים ביותר וראו את השינוי בזמן אמת.

📦 Box Model

200px
100px
20px
5px
15px
Box Model Demo
200px × 100px

✏️ Typography

18px
1.4

זוהי כותרת לדוגמה

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

🔥 עורכי קוד חיים

ערוך את ה-CSS בתיבה השמאלית וראה את התוצאות בתיבה הימנית. לחץ על 'אפס' כדי לחזור לקוד המקורי.

Layout: Flexbox

Layout: Grid

Live Animation Editor

🧩 מאפיינים (Properties)

טיפוגרפיה וטקסט
font, font-family, font-size, font-weight, font-style, font-stretch, font-variant, font-kerning, font-feature-settings, font-optical-sizing, font-variant-numeric, line-height, letter-spacing, word-spacing, color, text-align, text-align-last, text-justify, text-transform, text-decoration, text-decoration-line, text-decoration-color, text-decoration-style, text-decoration-thickness, text-underline-offset, text-indent, text-overflow, text-wrap, white-space, overflow-wrap, hyphens, direction, unicode-bidi, writing-mode, text-orientation
צבעים ורקעים
color, opacity, background, background-color, background-image, background-repeat, background-position, background-size, background-attachment, background-origin, background-clip, image-rendering, object-fit, object-position, linear-gradient(), radial-gradient(), conic-gradient()
מודל הקופסה (Box Model)
box-sizing, width, min-width, max-width, height, min-height, max-height, margin, margin-block, margin-inline, margin-top/right/bottom/left, padding, padding-block, padding-inline, padding-top/right/bottom/left, border, border-color, border-style, border-width, border-radius, border-image, border-inline, border-block, outline, outline-offset, box-shadow, overflow, overflow-x, overflow-y, overscroll-behavior, aspect-ratio
פריסה ומיקום
display, visibility, contain, position, inset, inset-block, inset-inline, top, right, bottom, left, z-index, float, clear, isolation, order
Flexbox
flex, flex-grow, flex-shrink, flex-basis, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content, align-self, place-content, place-items, place-self, gap, row-gap, column-gap
Grid
grid, grid-template-columns, grid-template-rows, grid-template-areas, grid-auto-columns, grid-auto-rows, grid-auto-flow, grid-column, grid-row, grid-column-start, grid-column-end, grid-row-start, grid-row-end, justify-items, align-items, place-items, justify-content, align-content, place-content, gap, row-gap, column-gap, subgrid
טרנזישנים ואנימציות
transform, transform-origin, transform-style, perspective, perspective-origin, backface-visibility, transition, transition-property, transition-duration, transition-timing-function, transition-delay, animation, animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state
פילטרים ומסכות
filter, backdrop-filter, mix-blend-mode, isolation, mask, mask-image, mask-repeat, mask-size, mask-position, mask-origin, mask-clip, clip-path, shape-outside, shape-margin
נגישות והעדפות
forced-color-adjust, accent-color, caret-color, scrollbar-color, scrollbar-width, scrollbar-gutter, @media (prefers-color-scheme: dark), @media (prefers-reduced-motion: reduce)

🎬 אנימציות וטרנזישנים

דוגמאות ויזואליות לאנימציות נפוצות.

דוגמאות Keyframes

אני נכנס!

אנימציית טקסט

אנימציית מכונת כתיבה!

🔢 ערכים, יחידות ופונקציות

יחידות אורךpx, pt, cm, mm, in, em, ex, ch, rem, vw, vh, vmin, vmax
מספר/אחוז/זמן<number>, <integer>, %, <angle> (deg, rad, turn), <time> (s, ms)
צבעיםrgb(), rgba(), hsl(), hsla(), hwb(), lab(), lch(), #RRGGBB[AA], currentColor
תמונות/גרדיאנטיםurl(), image(), image-set(), linear-gradient(), radial-gradient()
פונקציות מתמטיותcalc(), min(), max(), clamp(), round(), mod()
פונקציות פריסהminmax(), fit-content(), repeat(), span N, subgrid
מילות מפתח גלובליותinitial, inherit, unset, revert, revert-layer
משתנים--name: value; var(--name)
.title { font-size: clamp(1.25rem, 2.5vw, 2rem) }
.card  { padding: var(--card-padding, 1rem) }

🗂️ מילון מונחים

Cascade (קסקדה)
סדר קדימויות – מקור, חשיבות (!important) וסדר הופעה.
Specificity (ספציפיות)
משקל הסלקטור: id > class/attr/pseudo-class > type.
Box Model
תוכן + padding + border + margin. (השתמש ב-box-sizing: border-box!)
Formatting Contexts
BFC/IFC/Flex/Grid – "בועות" פריסה ששולטות על האלמנטים שבתוכן.