תיעוד CSS
מדריך עיון תמציתי ל-CSS, מבוסס דוגמאות. קוראים את המושג, רואים את הקוד, ואז מתרגלים אותו במסלול של Coddy.
להתחיל מסלול CSS מודרךצעדים ראשונים
- Inline CSSInline CSS שם הצהרות ישירות על אלמנט בעזרת המאפיין style. למדו את התחביר, מתי סגנונות inline הם הבחירה הנכונה, איך הם גוברים על גיליונות סגנונות, ואיך הם משתווים ל-CSS פנימי וחיצוני.
- CSS חיצוניCSS חיצוני נמצא בקובץ .css שכל עמוד מקשר אליו עם <link rel="stylesheet">; CSS פנימי יושב באלמנט <style> בתוך עמוד אחד. למדו את שניהם, איך עובדים נתיבי קבצים, ואיזה כלל מנצח כשהם נפגשים.
- הערותל-CSS יש תחביר הערה אחד, /* ... */, לשורה אחת ולכמה שורות. למדו איפה אפשר לשים הערות, איך מבטלים כלל באמצעות הערה, ולמה // והערות מקוננות שוברים בשקט את הכלל הבא.
- !important!important גורם להצהרה לנצח הצהרות רגילות, בלי קשר לספציפיות שלהן. למדו בדיוק את מי הוא מנצח, מי מנצח אותו, איך ספציפיות עובדת מתחת לפני השטח, ומהן הדרכים הנקיות יותר לנצח בהתנגשות סגנונות.
- משתני CSSמשתני CSS (custom properties) שומרים ערך פעם אחת ומשתמשים בו שוב עם var(). למדו איך להצהיר עליהם ב-:root, לתחום ולדרוס אותם, לתת ערך גיבוי, להחליף ערכת צבעים עם JavaScript ולהימנע ממלכודת הערך הלא תקין.
סלקטורים
- סלקטוריםסלקטור ב-CSS בוחר את האלמנטים שכלל מעצב. למדו כל סוג סלקטור, את ארבעת המחברים (צאצא, ילד, אח סמוך, אח כללי), סלקטורי מאפיינים וקיבוץ, ובדקו סלקטורים בזמן אמת.
- סלקטור מחלקהסלקטור המחלקה (.name) מעצב כל אלמנט עם המחלקה הזאת; סלקטור ה-ID (#name) מעצב את האלמנט היחיד עם ה-id הזה. למדו את התחביר, כמה מחלקות ושרשור מחלקות, class מול id, כללי שמות, והחלפת מחלקות עם JavaScript.
- פסאודו-קלאסיםפסאודו-קלאסים בוחרים אלמנטים לפי מיקום או מצב: :nth-child(), :first-child, :not(), :focus, :checked, :has() ועוד. למדו את התחביר, את הנוסחה an+b עם בודק חי, ואת ההבדל בין nth-child ל-nth-of-type.
- ::before ו-::after::before ו-::after מוסיפים תוכן שנוצר כילד הראשון וכילד האחרון של אלמנט, ישירות מ-CSS. למדו את המאפיין content, למה חובה content ריק, איך ממקמים אותם, tooltips עם attr(), מונים, ואיפה הם לא עובדים.
- Hover ב-CSSהפסאודו-קלאס :hover מעצב אלמנט כל עוד סמן העכבר נמצא מעליו. למדו אפקטי hover לכפתורים ולכרטיסים, מעברים חלקים, צבעי קישורים עם :link, :visited, :hover ו-:active בסדר הנכון, ו-hover במסכי מגע.
מודל הקופסה
- Box Modelכל אלמנט הוא תיבה שבנויה מארבע שכבות: תוכן, padding, גבול ו-margin. למדו איך כל שכבה מוסיפה לגודל, איך box-sizing: border-box משנה את החישוב, וראו כל שכבה נמדדת בזמן אמת.
- PaddingPadding הוא המרווח בתוך אלמנט, בין התוכן שלו לגבול שלו. למדו את הקיצור padding עם 1 עד 4 ערכים, את המאפיינים של צד אחד, padding לוגי, אחוזים, ואיך padding משנה את גודל האלמנט.
- MarginMargin הוא המרווח השקוף מחוץ לגבול של אלמנט, שדוחף אלמנטים אחרים הלאה. למדו את הקיצור margin, מרכוז עם margin: 0 auto, margins שליליים, margin auto ב-flexbox, ולמה margins אנכיים מתמזגים.
- Margin מול PaddingPadding הוא מרווח בתוך הגבול של אלמנט; margin הוא מרווח מחוץ לו. ראו את שניהם על אותה קופסה, זה לצד זה ובזמן אמת, ואז למדו במה להשתמש לרקעים, לאזורי לחיצה, למרווח בין אלמנטים ולמרכוז.
- גבול (Border)המאפיין border מצייר קו סביב ה-padding של אלמנט. למדו את הקיצור border, את כל סגנונות הגבול, צבעים וצד בודד, פינות מעוגלות עם border-radius, ובמה גבולות שונים מ-outline.
- Width ו-Heightwidth ו-height קובעים את הגודל של התיבה של אלמנט. למדו גדלים קבועים ובאחוזים, למה height: 100% לרוב לא עושה כלום, min-height ו-max-width לפריסות גמישות, auto מול 100%, ומילות המפתח fit-content.
טקסט וגופנים
- גודל גופןהמאפיין font-size קובע כמה גדול הטקסט. למדו את היחידות שהוא מקבל (px, rem, em, %, מילות מפתח, vw), איך משנים גודל גופן ב-HTML, למה rem היא ברירת המחדל הבטוחה, ואיך גדלים ב-em מצטברים.
- עובי גופןהמאפיין font-weight הופך טקסט למודגש, לדק או לכל דבר שביניהם. למדו את הסקאלה המספרית מ-100 עד 900, את normal ו-bold, את bolder ו-lighter היחסיים, ולמה לפעמים עובי לא משנה כלום.
- גובה שורהline-height קובע את הגובה של כל שורת טקסט, ולכן את המרווח בין השורות. למדו למה מספר בלי יחידה הוא ברירת המחדל הנכונה, איך ערכי px, em ו-% עוברים בירושה בצורה שונה, ומהם ערכים טובים לטקסט רץ ולכותרות.
- צבע טקסטהתגית <font color> מיושנת; את צבע הטקסט ב-HTML קובעים עם המאפיין color של CSS. למדו איך לצבוע דף שלם, מילה אחת, קישור או כותרת, עם שמות צבעים, hex ו-rgb, ואיך לשמור על טקסט קריא.
- קו תחתוןהוסיפו קו תחתון לטקסט עם text-decoration, ואז שלטו בקו: בצבע, בסגנון, בעובי ובמרחק שלו מהטקסט. וגם איך מסירים את הקו התחתון מקישורים, ומתי לא כדאי.
- Text Shadowtext-shadow מצייר צל אחד או יותר מאחורי טקסט. למדו את ארבעת הערכים (היסט x, היסט y, טשטוש, צבע), איך לערום צללים לאפקטים של זוהר, קו מתאר ותלת-ממד, ואיך להשתמש בצל כדי לשמור על טקסט קריא על רקעים עמוסים.
צבעים ורקעים
- צבעיםכל הדרכים לכתוב צבע ב-CSS: צבעים בשם, קודי hex, rgb() ו-rgba(), hsl(), שקיפות עם ערוץ אלפא, currentColor, והפונקציות החדשות oklch() ו-color-mix(). כל אחת עם דוגמה חיה וממיר צבעים.
- צבע רקעbackground-color ממלא את התיבה של אלמנט בצבע. למדו איך לקבוע צבע רקע לעמוד שלם, ל-div, לשורת טבלה או למילה אחת, איך עובדת שקיפות, למה bgcolor מיושן, ובמה background-color שונה מהקיצור background.
- תמונת רקעbackground-image מציב תמונה או מעבר צבע מאחורי התוכן של אלמנט. למדו את url() ומעברי צבע, background-size (cover ו-contain), background-position, background-repeat, שכבות של כמה רקעים, והקיצור background.
- מעברי צבעמעברי צבע ב-CSS הם תמונות שהדפדפן מצייר מצבעים. למדו את radial-gradient (צורה, גודל, מיקום), את linear-gradient (כיוון וזוויות), את conic-gradient, נקודות עצירה של צבע, עצירות חדות לפסים, מעברי צבע חוזרים וטקסט עם מעבר צבע.
- צל לתיבה (Box Shadow)box-shadow מצייר צללים סביב התיבה של אלמנט. למדו את חמשת הערכים (x, y, blur, spread, color), צללים פנימיים עם inset, שכבות של כמה צללים לעומק מציאותי, טבעות פוקוס שנוצרות עם spread, והטעויות שגורמות לצללים להיראות עכורים.
פריסה
- Displayהמאפיין display קובע איך אלמנט משתתף בפריסה. למדו את block, inline ו-inline-block עם תיבות מדודות זו לצד זו, display none מול visibility hidden, ואיפה flex, grid, flow-root ו-contents משתלבים.
- Positionposition: absolute ממקם אלמנט בקואורדינטות מדויקות בתוך האב הממוקם הקרוב ביותר שלו. למדו איך absolute עובד עם position: relative, ואחר כך fixed ו-sticky, את המאפיינים top/right/bottom/left ו-inset, ולמה sticky לפעמים לא נצמד.
- Z-Indexz-index קובע איזה מבין אלמנטים חופפים מצויר למעלה. למדו על אילו אלמנטים הוא עובד, איך stacking context מקבץ אלמנטים כך ש-z-index של 9999 עדיין יכול להפסיד, מה יוצר stacking context, ואיך לתקן z-index שלא עובד.
- Overflowoverflow קובע מה קורה לתוכן שלא נכנס בקופסה שלו: להציג אותו, לחתוך אותו או להוסיף פסי גלילה. למדו את visible, hidden, scroll, auto ו-clip, את overflow-x ו-overflow-y, שלוש נקודות בסוף טקסט, ותופעות הלוואי של overflow על הפריסה.
- Float ו-Clearfloat דוחף אלמנט לצד אחד ומאפשר לטקסט לעטוף אותו, כמו שמגזינים מציבים תמונות. למדו את float left, right ו-inline-start, את clear, למה הורה קורס סביב floats ואיך display: flow-root מתקן את זה, ולמה כבר לא משתמשים ב-floats לפריסת עמוד.
- מרכוז divכל הדרכים למרכז div אופקית, אנכית או בשני הצירים: flexbox, grid, margin auto, מיקום absolute עם transform, inset עם margin auto, ו-align-content. כל שיטה רצה בזמן אמת ומודדת את המרכוז שלה, עם טבלה שמראה מתי להשתמש בכל אחת.
- מרכוז תמונה<img> הוא אלמנט inline, ולכן הוא מתמרכז כמו טקסט: text-align: center על ההורה שלו. אפשר גם להפוך אותו לבלוק עם margin: 0 auto, או למרכז אותו עם flexbox או grid, כולל אנכית. כל שיטה רצה בזמן אמת ומודדת את התוצאה.
Flexbox ו־Grid
- FlexboxFlexbox מסדר פריטים בשורה או בעמודה ושולט באופן שבו הם מתחלקים במקום ומתיישרים. למדו את display: flex, את הציר הראשי והציר הניצב, כל מאפייני המכל, flex-grow, flex-shrink ו-flex-basis, עם עורך אונליין חי שמודד איפה כל פריט נוחת.
- Justify Contentjustify-content ממקם פריטי flex לאורך הציר הראשי ו-align-items ממקם אותם לאורך הציר הניצב. ראו כל ערך זה לצד זה, מדוד, עם רשת יישור לחיצה, align-self, והסיבות לכך ש-justify-content לפעמים לא עושה כלום.
- Flex Wrapflex-wrap קובע אם פריטי flex נדחסים לשורה אחת או עוברים לשורה הבאה, ו-flex-direction קובע אם הם זורמים בשורה או בעמודה. למדו את שניהם עם דוגמאות חיות, את הקיצור flex-flow, את align-content, ושורת כרטיסים רספונסיבית בלי media queries.
- Grid ב-CSSCSS grid מסדר פריטים בשורות ובעמודות בבת אחת. למדו display: grid, grid-template-columns, את היחידה fr, repeat() ו-minmax(), ההבדל בין auto-fill ל-auto-fit, מיקום פריטים עם grid-column ו-grid-template-areas, עם grid חי שאפשר לערוך ולמדוד.
עיצוב רספונסיבי
- Media Queriesmedia query מחילה CSS רק כשתנאי מתקיים, כמו רוחב מסך מינימלי, ערכת צבעים כהה או סמן של עכבר. למדו את התחביר של @media, נקודות שבירה ב-mobile first, תחביר הטווחים, prefers-color-scheme, את matchMedia ב-JavaScript ו-container queries.
- יחידות CSSrem יחסי לגודל הגופן של השורש, em לגודל הגופן של האלמנט עצמו, px קבוע, ו-% תלוי במאפיין. ראו כל יחידה נמדדת בהדגמה מקוננת, למה em מצטבר, מתי להשתמש בכל אחת ואיך vw, vh ו-dvh עובדות.
- clamp()clamp(MIN, PREFERRED, MAX) מחזיר את הערך המועדף, אבל אף פעם לא פחות מ-MIN או יותר מ-MAX. למדו איך הוא הופך גדלי גופן ומרווחים לגמישים בלי media queries, איך מחשבים את הערך האמצעי, ואיך min() ו-max() קשורים אליו.
- calc()calc() מאפשר לעשות חישובים ב-CSS ולשלב יחידות, למשל 100% פחות סרגל צד קבוע של 200px. למדו את כללי התחביר (הרווחים חשובים), calc() עם משתני CSS, פריסות נפוצות שהוא פותר, ולמה calc() לא תקין נזרק בשקט.
מעברים ואפקטים
- Transitiontransition ב-CSS מנפיש מאפיין מהערך הישן שלו לערך החדש כשהוא משתנה, למשל ב-hover. למדו את הקיצור transition, את כל פונקציות התזמון זו לצד זו, מה אפשר ומה אי אפשר להנפיש, את הפתרון ל-height: auto ואת reduced motion.
- אנימציהאנימציות CSS מעבירות אלמנט דרך השלבים שהגדרתם ב-@keyframes, מעצמן וכמה פעמים שתרצו. למדו את התחביר של @keyframes, את כל שמונת מאפייני האנימציה, fill-mode ו-direction, מחווני טעינה, השהיה, ואיך לכבד העדפה לתנועה מופחתת.
- Transformהמאפיין transform מזיז, משנה גודל, מסובב ומטה אלמנט בלי לשנות את הפריסה שסביבו. למדו כל פונקציית transform, למה סדר הפונקציות חשוב, את transform-origin, את המאפיינים הנפרדים translate, scale ו-rotate, ואת טריק המרכוז translate(-50%, -50%).
- Rotateסובבו אלמנט עם transform: rotate(45deg) או עם המאפיין החדש יותר rotate. למדו יחידות זווית (deg, turn, rad), סיבוב סביב פינה עם transform-origin, סיבוב טקסט ואייקונים, טוען מסתובב וסיבוב תלת-ממדי עם rotateX ו-rotateY.
- Opacityopacity הופך אלמנט שלם וכל מה שבתוכו לשקוף, מ-0 (בלתי נראה) עד 1 (אטום). למדו את הערכים, למה opacity מדהה גם את הטקסט ואיך להפוך רק את הרקע לשקוף, opacity: 0 מול visibility ו-display, ו-fade במעבר עכבר.
- טשטוש ופילטריםfilter: blur(5px) מטשטש אלמנט, ו-backdrop-filter: blur() מטשטש את מה שמאחוריו. למדו כל פונקציית פילטר (brightness, contrast, grayscale, sepia, saturate, hue-rotate, invert, drop-shadow) עם מחוונים חיים, איך משלבים אותן, ואת בעיית הקצוות בטשטוש.
