הקדמה
במחברת הקודמת למדתם על CSS באופן כללי –
קיבלתם שיעור היכרות נחמד וקצרצר על CSS והרעיונות הכלליים מאחוריו.
עכשיו, כשאתם יודעים איך נראה התחביר של השפה וצברתם ניסיון בלכתוב דבר או שניים באמצעותה,
הגיע הזמן ללמוד לעומק כל מה שחשוב לדעת כדי לעצב אתר בסיסי.
היום אתם הולכים לחדד את הכישורים שלכם בכתיבת Selector־ים, להבין איך עובד מודל ה־box־ים של CSS ובכללי להשתפשף בקצת פיצ’רים ויזואליים נחמדים של CSS.
כשתסיימו את החומר של היום, תוכלו לגשת בנוחות ליום האחרון, בו תלמדו על רעיונות מתקדמים שעומדים בבסיס של CSS.
חומרי הלימוד והתרגילים
| מספר תרגיל | עמוד לימוד | קישור לתרגיל | הערות |
|---|---|---|---|
| 203 | Cascade and inheritance | Test your skills: The Cascade | |
| 204-206 | CSS Selectors | Test your skills: Selectors | רק תרגילים 3, 4 ו־5. להעמקה: Type, class, and ID selectors, Attribute Selectors, Pseudo-classes and pseudo-elements, Combinators. תרגול נוסף: כאן. |
| 207-209 | The Box Model | Test your skills: The Box Model | |
| Background and Borders | Test your skills: backgrounds and borders | רשות, התרגילים ללא חובת הגשה. | |
| 210-211 | Overflowing content | Test your skills: Overflow | |
| 212-213 | Values and Units | Test your skills: values and units | ללא תרגיל 3 |
| 214-215 | Sizing items in CSS | Test your skills: sizing | ללא תרגיל 3 |
| 216-217 | Images, media, and form elements | Test your skills: Images and Form elements | |
| 218 | Styling tables | Test your skills: tables | |
| Debugging CSS | קריאה ממש חובה. אפשר גם לפני שאר החומר. | ||
| Organizing your CSS | |||
| 219 | עיצוב מלל: בסיס, רשימות, קישורים, גופנים. | עיצוב אתר לקולג’ דו־שנתי. | קראו ברפרוף כדי להבין את הרעיון. אין צורך להתעמק, רק לדעת בעתיד כיצד לגשת לנושא. |
תרגיל מסכם (לא חובה): צרו נייר מכתבים בעזרת CSS.