אינדקס

קטגוריית CSS - צפיה ברשימת המדריכים

 

הקדמה ל-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 פנימי. ההתיחסות אל פנימי וחיצוני באה מנקודת התחלה של המסגרת, קרא עוד...