הקדמה ל-CSS
כידוע HTML מאפשרת לנו לעצב ולסגנן את הדף, אך לרוב זה לא מספיק ועל מנת לשלוט יותר בעיצוב ובאופן שהאתר מוצג לגולשים אנחנו צריכים להעזר ב-CSS. למעשה מדובר בשפה אינטרנטית שנועדה נטו על מנת לעצב קרא עוד...
הבסיס של CSS
כדי לכתוב קוד CSS בתוך דף HTML נצטרך לתחום אזור מסויים לקוד CSS שלנו, את האזור הזה ניצור בין תגי ה-head שלנו ב-HTML. זו השיטה שאני אמליץ לכם לעבוד בה כרגע כי כך יהיה לנו נוח וקל יותר לעבוד - הכול מרוכ קרא עוד...
ID או CLASS
כמו שכבר אמרנו במדריכי CSS הקודמים יש לנו שלושה אפשרויות עקריות להגדיר עיצוב לאלמנט כלשהו וזה ID (חד פעמי) או CLASS רב פעמים. ההבדל הוא באיך שקובעים את שמם ובפונקציונליות שלהם. בעוד ש-ID ישמש אלמנטים קרא עוד...
איך מעצבים באופן מעשי
אז ככה עד כה למדנו כיצד להשתמש ב-ID יחודי או ב-CLASS רב פעמי ועכשיו אנחנו רוצים לעצב באופן מעשי את המלל שלנו. איך נעשה זאת?פשוט מאוד, הקוד CSS שלנו עיקרו נראה כך:שם-האלמנט-העיצוב : הערך-של-האלמנט-העיצ קרא עוד...
קומבינציה של אלמנטים ותת אלמנטים
תת אלמנטים מאפשרים לנו חופש רב יותר לעיצוב האתר שלנו ומאפשרים לנו ליצור סגנונות עיצוב ולשייך אותם לכמה אלמנטים בדף ה-HTML. כאן נציג כמה דוגמאות שונות שיאפשרו לנו לעצב את הדף בקלות רבה יותר.קומבינציה ש קרא עוד...
עיצוב ה-body
כמו שכבר אמרנו ב-CSS אפשר לעצב לפי IDים או CLASSים אבל גם אפשר לעצב לפי שם של תגית, כאן נלמד את זה בצורה הכי מוחשית על התגית של ה-body. למשל לתגית הזו נוסיף צבע רקע או תמונה לרקע, שתחזור על עצמה או לה קרא עוד...
עיצוב גופנים
פונטים אפשר לעצב בצורות שונות למשל סוג הפונט (font-family), צבע הפונט (color), גודל הפונט (font-size) ועוד.את הניסויים והלמידה פה נבצע עם סלקטור על התג של הפסקה p כך שכדאי שתהיה לכם פסקה בדף HTML עם מ קרא עוד...
עיצוב מסגרות
למרות שאפשר לעצב מסגרות (border) ב-HTML רגיל ב-CSS זה יהיה הרבה יותר קל ונוח לעצב מסגרות לכל אלמנט שתבחרו.כאן נעבוד על עיצוב מסגרת של הפסקה שאיתה עבדנו עד כה, התגית p. זה ה-HTML שאיתו נעבוד: &nb קרא עוד...
עיצוב טבלאות
ב-CSS נוכל לעצב טבלאות בצורה גלובאלית כך שתופעל בכל רחבי האתר אבל גם נוכל לעצב בצורה יותר ממוקדת. כרגע נעבוד בצורה גלובאלית.זהו קוד ה-HTML שעומד לרשותנו, שתי רשומות, שלוש שורות:<table> <tr& קרא עוד...
מרווחים חיצוניים ופנימיים
במדריך הזה נלמד על מרווחים באתר, חשוב ללמוד עליהם כדי ליצור עיצוב נוח שיזרום בזווית העין ויהי דינאמי. המרווחים הם margin חיצוני, ו-padding פנימי. ההתיחסות אל פנימי וחיצוני באה מנקודת התחלה של המסגרת, קרא עוד...
תפריט
מודעה
רשימת מדריכים
- הקדמה ל-CSS
- הבסיס של CSS
- ID או CLASS
- איך מעצבים באופן מעשי
- קומבינציה של אלמנטים ותת אלמנטים
- עיצוב ה-body
- עיצוב גופנים
- עיצוב מסגרות
- עיצוב טבלאות
- מרווחים חיצוניים ופנימיים
- הגדרה אחת לאלמנטים רבים
- גובה ורוחב
- מיקום של אלמנטים בדף
- קביעת ה-float
- יישור המלל
- עיצוב לינקים
- עיצוב תפריט, רשימה
- רשימת אלמנטים וערכים
- מאמרים נוספים
- איפוס CSS
