מדריך CSS
מה זה CSS?
CSS היא שפה פשוטה ללמידה שבאמצעותה מיישמים עיצוב באתרי אינטרנט.
מדריך CSS מספר 1 - מבוא ל-CSS
מדריך מלווה בסרטון שמסביר מהו CSS וכיצד ניתן לחבר גיליון CSS חיצוני לקובץ ה-HTML כפי שמקובל באתרים מודרניים.
מדריך CSS מספר 2 - תחביר CSS
מדריך מלווה בסרטון קצר שבו נלמד את התחביר של שפת ה-CSS.
מדריך CSS מספר 3 - עיצוב מחלקות
מדריך מלווה בסרטון קצר שמסביר כיצד אפשר לתת לאותו אלמנט (סלקטור) עיצוב שונה במקרים שונים באמצעות מחלקות (class) ומזהים (id).
מדריך CSS מספר 4 - עיצוב הטקסט
מדריך מלווה בסרטון שמלמד כיצד לשנות את תכונות הכתב, ובכלל כך: צבע הכתב, עובי, הוספת קו תחתי, מרווח בין אותיות, סוג גופן וגודל הפונט.
מדריך CSS מספר 5 - עיצוב פסקה
מדריך מלווה בסרטון קצר שבאמצעותו נלמד לשנות את תכונות הפסקה, ובכלל כך מרווח בין השורות וכיוון הכתב.
מדריך CSS מספר 6 - עיצוב קישוריות
מדריך מלווה בסרטון קצר שמלמד עיצוב קישוריות (לינקים).
מדריך CSS מספר 7 - עיצוב הרקע
מדריך מלווה בסרטון שמלמד כיצד לשנות את צבע הרקע וכיצד להוסיף ולמקם תמונת רקע.
מדריך CSS מספר 8 - אותו עיצוב למספר אלמנטים
מדריך מלווה בסרטון קצר שבו נלמד כיצד לתת למספר אלמנטים בדף את אותו עיצוב.
מדריך CSS מספר 9 - האלמנטים המבחינים div ו-span
מדריך מלווה בסרטון קצר שמלמד כיצד להשתמש באלמנטים המבחינים div ו-span כדי לעצב פסקאות או אלמנטים בתוך פסקה.
מדריך CSS מספר 10 - אלמנטים מקוננים
מדריך מלווה בסרטון שמסביר כיצד לעצב אלמנט אחד שנמצא בתוך אלמנט שני.
מדריך CSS מספר 11 - עיצוב רשימות
מדריך מלווה בסרטון שמסביר כיצד לעצב רשימות מסודרות, לא-מסודרות ותפריטים.
מדריך CSS מספר 12 - קווי מתאר, אורך וגובה
מדריך מלווה בסרטון שמלמד איך לתחום את השוליים של אלמנט בקו, וכיצד לקבוע את גובהו ואורכו של אלמנט.
מדריך CSS מספר 13 - רווח בתוך אלמנט
מדריך מלווה בסרטון שמלמד כיצד לעצב את הרווח הפנימי, בתוך האלמנט, שנמצא בין הטקסט והשוליים.
מדריך CSS מספר 14 - הוספת שוליים ומודל התיבה
מדריך מלווה בסרטון שמסביר כיצד לעצב שוליים סביב אלמנט ואת מודל התיבה שיסכם את המדריכים 12-14.
מדריך CSS מספר 15 - עיצוב טבלה
מדריך מלווה בסרטון שמסביר כיצד לעצב טבלאות, וזה כולל צבע שונה לשורת הכותרת ולגוף הטבלה ועיצוב גבולות הטבלה.
מדריך CSS מספר 16 - מיקום אבסולוטי
מדריך מלווה בסרטון שמסביר כיצד למקם אלמנטים בדף באמצעות מיקום אבסולוטי.
מדריך CSS מספר 17 - מיקום יחסי
מדריך מלווה בסרטון שמסביר על מיקום יחסי של אלמנטים בדף, ואת ההבדל בין מיקום יחסי ומיקום מוחלט.
מדריך CSS מספר 18 - סידור אלמנטים בשכבות
מדריך מלווה בסרטון שמלמד כיצד לסדר אלמנטים בשכבות באמצעות התכונה z-index.
מדריך CSS מספר 19 - הצפת אלמנט (float)
מדריך מלווה בסרטון שמלמד למקם אלמנטים באמצעות הצפה (float). זו תכונה שימושית לעיצוב טקסט שנכרך סביב תמונה.
מדריך CSS מספר 20 - פתרון לבעיה נפוצה עם float
מדריך מלווה בסרטון שמסביר את הבעיה שנוצרת כשמציפים אלמנטים באמצעות float, ועל פתרון אפשרי לבעיה.
מדריך CSS מספר 21 - עיצוב תיבת טקסט
מדריך מלווה בסרטון - כשאנחנו כותבים טקסט לתוך תיבה הוא עלול לחרוג מעבר לגבולות התיבה, ולפגוע במראה האתר. במדריך הנוכחי נלמד לפתור את הבעיה.
מדריך CSS מספר 22 - הצגה והסתרה של אלמנטים
במדריך זה אציג דרך להצגת אלמנטים in-line באמצעות התכונה display, ובנוסף אציג דרכים להסתרה של אלמנט.
מדריך CSS מספר 23 - הדרכים השונות להוספת קוד לאתר
מדריך שסוקר את שלוש הדרכים להוספת קוד CSS לאתר, ומסביר מדוע הדרך של הוספת גיליון עיצוב חיצוני לאתר היא המוצלחת ביותר.
מדריך CSS מספר 24 - החשיבות של important!
במדריך זה נלמד הצהרה פשוטה שתאפשר ל-CSS לעבוד גם במקרה של התנגשות בין מספר כללי עיצוב.
מדריך CSS מספר 25 - עיצוב תפריטים
מדריך שמלמד לעצב תפריטים שבהם הכפתורים משנים את צבעם בתגובה לריחוף וללחיצה.
סלקטורים של CSS
במדריך זה תכירו סלקטורים די מתקדמים של CSS שמאפשרים בחירת אלמנטים על בסיס מיקומם בדף, ועל בסיס מידע נוסף שהתגיות נושאות עמן, שהוא מעבר ל-class ול-id.
CSS Sprites
CSS sprites משמשים כשרוצים להציג תמונות שונות לאותו אלמנט, ולחסוך בצורה משמעותית במספר הקריאות לשרת. ב-CSS Sprites ניתן לפגוש בכל מקום באינטרנט. לדוגמה: כשרוצים שהרקע לכפתורים באתר יתחלף בריחוף או בלחיצה, או כשרוצים לשנות מראה או צבע של חיצים.
מרכוז אלמנטים בדף באמצעות CSS
מדריך שמסביר את הדרך למרכז אלמנטים בדף ובכלל זה התוכן כולו, בלוקים או תיבות ותמונות.
מדריך CSS: יישור אלמנטים בדף בציר האנכי
למדו כיצד ליישר אלמנטים דוגמת טקסט, תמונה ודיב בציר האנכי (לגובה הדף).
יותר CSS באמצעות LESS
LESS זו הרחבה ל-CSS שמייעלת את כתיבת קוד ה-CSS בזכות אלמנטים שהיא שואלת משפות תוכנה דוגמת משתנים ופונקציות.
כיצד לשנות את מראה הכפתורים באתר?
מדריך שמצורף אליו קוד פשוט שמסביר כיצד להחליף את מראה הכפתורים באתר
טקסט ותמונה נגללים באמצעות התגית marquee
מדריך שמציג את אחת התכונות היותר מעניינות שנתמכות בכל הדפדפנים גם המיושנים. למדו כיצד להניע אלמנטים לרוחב ולאורך המסך, ואת ה-CSS, שמשמש לעיצוב התכונה.
קובץ CSS חיצוני לפי דפדפן
קוד פשוט לבחירת ה-stylesheet באתר בהתאם לדפדפן.
כיצד לרענן את ה-CSS וה-JS בכל פעם שמרעננים את הדף?
מדריך קצר שמסביר כיצד לרענן את קובץ ה-CSS בכול פעם שמרעננים את הדף באתר שנמצא בשלבי פיתוח.
ואידך זיל גמור...
