קורס זה נחלק את יסודות ה-CSS לחלקים ברורים שניתן לעכל אותם. במודולים הבאים נלמד איך ההיבטים המרכזיים של CSS עובדים ואיך להשתמש בהם ביעילות בפרויקטים. כדי לנווט בין המודולים, משתמשים בחלונית התפריט ליד הלוגו 'לימוד CSS'.
נלמד את היסודות של CSS כמו מודל הקופסה, דירוג וספציפיות, Flexbox, רשת ו-z-index. נלמד גם על פונקציות, סוגי צבעים, הדרגתיים, מאפיינים לוגיים וירושה כדי ליצור מפתח קצה מעוגל ומוכן לשימוש בכל ממשק משתמש.
כל מודול מלא בהדגמות אינטראקטיביות ובהערכות אישיות כדי שתוכלו לבחון את הידע שלכם. בנוסף ללמידה באמצעות קריאה והדגמות, יש פרק של פודקאסט שנלווה לכל נושא כדרך נוספת ללמוד ולהרחיב את הידע שלכם.
הקורס הזה מיועד גם למפתחים מתחילים וגם למפתחים מתקדמים של CSS. אפשר לעבור על הסדרה מההתחלה ועד הסוף כדי להבין באופן כללי את נושא ה-CSS מלמעלה למטה, או להשתמש בו כחומר עזר לנושאי סגנון ספציפיים. למשתמשים חדשים בתחום פיתוח האינטרנט באופן כללי, ניתן לקרוא את המאמר לימוד HTML כדי ללמוד איך לכתוב תגי עיצוב ולקשר את גיליונות הסגנונות.
מה תלמדו:
מודל קופסה
מכיוון שכל מה ש-CSS מציג הוא תיבה, הבנת האופן שבו מודל תיבת ה-CSS פועל היא הבסיס הבסיסי של CSS.
סלקטורים
כדי להחיל CSS על רכיב, עליך לבחור אותו. שירות CSS מציע כמה דרכים שונות לעשות זאת, ואפשר לבדוק אותן במודול הזה.
המפל
לפעמים שני כללי CSS מתחרים או יותר יכולים לחול על רכיב. אפשר לקרוא איך הדפדפן בוחר באילו להשתמש ואיך לשלוט בבחירה הזו.
ספציפיות
מודול זה בוחן לעומק את המטרה, שהיא חלק מרכזי בתהליך.
ירושה
מאפייני CSS מסוימים יורשים את בירושה אם לא מציינים עבורם ערך. נסביר איך זה עובד ואיך להשתמש בהם לטובתך במודול הזה.
צבע
יש כמה דרכים שונות לציון צבע ב-CSS. המודול הזה בוחן את ערכי הצבעים הנפוצים ביותר.
יחידות מידה
למד כיצד להתאים גודל של אלמנטים באמצעות CSS, תוך עבודה עם המדיה הגמישה של האינטרנט.
פריסה
סקירה כללית של שיטות הפריסה השונות שמהן אפשר לבחור כשיוצרים רכיב או פריסת דף.
Flexbox
Flexbox הוא מנגנון פריסה שמיועד לפריסה של קבוצות פריטים במימד אחד. למדו כיצד להשתמש בו במודול זה.
רשת
פריסת רשת CSS מספקת מערכת פריסה דו-ממדית, השולטת בפריסה בשורות ובעמודות. גלו את כל מה שיש לרשת להציע.
תכונות לוגיות
מאפיינים וערכים לוגיים ויחסיים לזרימה מקושרים לזרימת הטקסט, לא לצורה הפיזית של המסך. איך להשתמש בגישה החדשה הזו ל-CSS.
ריווח
גלו איך לבחור את השיטה הטובה ביותר לריווח רכיבים בהתאם לשיטת הפריסה שבה אתם משתמשים ולרכיב שאתם יוצרים.
פסאודו-אלמנטים
פסאודו-רכיב דומה להוספת רכיב נוסף או מיקוד אליו, ללא צורך בהוספת HTML. יש להם מגוון תפקידים, ואפשר ללמוד עליהם במודול הזה.
פסאודו כיתות
פסאודו-מחלקה מאפשרת להחיל CSS על סמך שינויים במצב. המשמעות היא שהעיצוב יכול להגיב לקלט של משתמשים, כמו כתובת אימייל לא חוקית.
גבולות
גבול מספק מסגרת לתיבות. הנחיות לשינוי הגודל, הסגנון והצבע של גבולות באמצעות CSS.
צלליות
יש כמה דרכים להוסיף צלליות לטקסט ולרכיבים ב-CSS. כדאי לקרוא איך משתמשים בכל אפשרות ומהן המשימות שמיועדות לשימוש.
מיקוד
הבנת חשיבות המיקוד ביישומי האינטרנט. נסביר איך לנהל את המיקוד, ואיך לוודא שהנתיב בדף תואם גם לאנשים שמשתמשים בעכבר וגם לאנשים שמשתמשים במקלדת כדי לנווט.
אינדקס Z והקשרים של סידור בערימה
שימוש ב-z-index ובהקשר הערימה כדי לשלוט בסדר שבו הרכיבים מוצבים זה על גבי זה.
פונקציות
ב-CSS יש מגוון פונקציות מובנות. מידע נוסף על כמה מהפונקציות העיקריות ואיך משתמשים בהן.
הצבעות
במודול הזה נסביר איך להשתמש בסוגים השונים של הדרגתיים שזמינים ב-CSS. גוונים יכולים ליצור מגוון שלם של אפקטים שימושיים, ללא צורך באפליקציות גרפיות כדי ליצור תמונות.
אנימציות
אנימציה היא דרך נהדרת להדגיש אלמנטים אינטראקטיביים, ולהוסיף עניין וכיפי לעיצובים. איך להוסיף אפקטים לאנימציה ולשלוט בהם באמצעות CSS.
מסננים
המשמעות של מסננים ב-CSS היא שניתן להחיל אפקטים שיכול להיות שלדעתכם היו אפשריים באפליקציה גרפית בלבד. במודול הזה תוכלו לגלות מה זמין.
מצבי מיזוג
אפשר ליצור אפקטים קומפוזיניים על ידי שילוב של שתי שכבות או יותר, וללמוד איך לבודד תמונה עם רקע לבן במודול הזה במצבי שילוב.
רשימות
המבנה של רשימה מורכב מרכיב של מאגר תגים, שממולא בפריטי רשימה. במודול הזה תלמדו איך לסגנן את כל החלקים ברשימה.
מעברים
מידע על הגדרת מעברים בין מצבים של רכיב. אפשר להשתמש במעברים כדי לשפר את חוויית המשתמש באמצעות משוב חזותי על האינטראקציה של המשתמשים.
זרימת יתר
גלישה היא הדרך שבה מתמודדים עם תוכן שלא מתאים לגודל הורה מוגדר. במודול הזה נחשוב מחוץ לקופסה ונלמד איך לעצב תוכן בעומס יתר.
רקעים
מידע נוסף על עיצוב רקע של תיבות באמצעות CSS.
טקסט וטיפוגרפיה
מידע נוסף על עיצוב טקסט באינטרנט.
סיכום והשלבים הבאים
מקורות מידע נוספים שיעזרו לכם בשלבים הבאים.
מוכנים ללמוד על CSS? בוא נתחיל.