בפוסט קודם הסברתי על עיצוב אתרים באמצעות CSS (בניגוד לעיצוב באמצעות טבלאות, ובאמצעות תגיות ומאפייני HTML).
מה במדריך זה?
בסדרת פוסטים קרובה (שזהו הפוסט הראשון מבינהם), אסביר איך לעצב אתר באמצעות CSS ואיך לשלב את הרעיון של עיצוב באמצעות CSS עם ה - Framework של ASP.NET (כמו Themes, Skins, עיצוב פקדים בעזרת CSS ועוד).
מה לא יהיה במדריך זה?
חשוב לי להבהיר דבר אחד - אני לא מתכוון להסביר את הבסיס של CSS. איך לשלב CSS בדף, מה זה selector, איך להגדיר צבעים, הירראכיות וכיו"ב תוכלו למצוא במדריך CSS באתר Webmaster.org.il (בעברית). אם אינכם יודעים CSS כלל, אני ממליץ לכם להתחיל ממדריך זה.
Box Model
נתחיל בהגדרה של Box Model או מודל הקופסה מתוך אתר W3:
The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.
בגדול, מודל הקופסה מתאר את הקופסאות או התיבות שנוצרות לכל אלמנט HTMLי במסמך.
כל אלמנט בדף אינטרנט תופס מקום בדף, ומודל הקופסה מתאר כיצד האלמנט מתפרס על הדף.
להלן תרשים שממחיש כיצד אלמנט מתפרס:
לכל אלמנט יש את התוכן (הקופסה הפנימית ביותר בתרשים), התוכן מוקף ב - Padding (ריפוד), ה - Border עוטף את האלמנט עם ה - Padding, ומסביבו ה - Margin (שוליים).
חשוב לזכור כי ה - Padding, ה - Border וה - Margin מתווספים לרוחב והגובה של האלמנט.
לדוגמה, אם ניצור div שיקבל את ההגדרות הבאות:
div.Example1
{
background: Red;
margin: 2px;
border: solid 1px Black;
padding: 3px;
width: 40px;
height: 40px;
}
תווצר קופסה אדומה, שרוחבה הפנימי (עד ה - border) יהיה 46px - רוחב התוכן הוא 40px, ואליו מתווספים 3px מכל צד (padding). את הקופסה יעטוף גבול (border) שחור בעובי של 1px, ושוליים של 2px מכל צד.
הגודל הכולל של הקופסה (כולל השוליים) יהיה 52px גובה, ו - 52px רוחב.
Padding ב - Internet Explorer
בגרסאות קודמות של Internet Explorer (עד 5.5, ובמקרים מסויימים גם ב - 6 ו - 7), ה - Padding היה מוכל בתוך ה - Content (ולא מתווסף לרוחבו), כפי שמודגם בתרשים הבא:
(מקור: וויקיפדיה האנגלית)
בעיה זו קיימת גם בגרסה 6, אלא אם הצהרת המסמך של הדף היא XHTML 1.1, ועל פי וויקיפדיה ניתן ליצור התנהגות דומה גם בגרסה 7, לשם תמיכה לאחור.
גרסאות 6, ו -7 יתנהגו בצורה דומה לגרסאות הקודמות, אלא אם יוגדר DOCTYPE מסויים (כמו XHTML, או HTML 4.0). בנוסף בגרסה 6 ההתנהגות גם תהיה זהה לגרסאות קודמות במידה וישנה הגדרת XML לפני ה - DOCTYPE. ניתן למצוא בוויקיפדיה מידע נוסף על התנהגות IE בהתאם להצהרת המסמך.
קריאה נוספת
בפוסט הבא, אסביר על עיצוב עמודים ואראה דוגמאות מעשיות לעיצוב עמודים באמצעות CSS.