קופסאות div

זוכרים שבשיעור הראשון דיברנו על התג div? למי שלא זוכר, הנה תזכורת קטנה: התג מגדיר קטע בטקסט, שאפשר לשייך לו כל מיני מאפיינים. חוץ מזה, הדבר היחיד שהוא עושה לבד זה לעבור שורה בהתחלה ובסוף.

שימוש נכון ב-div יכול לחסוך לנו את השימוש בטבלאות בחלק מהמקרים. הוא משמש גם לאפקטים דינמיים (עליהם נלמד כשנגיע ל-javascript), כמו למשל ליצירת התפריט באתר הזה. השימוש שאני מדברת עליו הוא יצירת מה שנקרא "קופסאות div" (או div boxes באנגלית).

איך יוצרים קופסה? פשוט מאוד: מגדירים את המאפיינים שלה. אפשר בגוף הקוד, בראש הדף, או בגיליון סגנונות חיצוני. לרוב, עדיף בגיליון סגנונות חיצוני, כי רוב הסיכויים שתרצו להשתמש בעיצוב הזה עוד כמה פעמים.

כאן אתייחס להגדרת המאפיינים בגיליון חיצוני. אפשר להעביר את הכל גם לראש הדף או לגוף הקוד - זה אותו הדבר, ואתם יודעים איך לעשות את זה: פשוט לכתוב בין תגי style ב-head או אחרי המילה style בתג ה-div.

אוקיי. נגיד שאני רוצה ליצור תיבה שתראה ככה:

זאת למשל, דוגמה לקופסה שעוצבה בטעם "מעולה". לא?
בשביל ליצור קופסה כזאת, קודם כל צריך להחליט על שם לסגנון שלה. למשל, loud. אז נלך לדף ה-css החיצוני שלנו, ונכתוב באזור של ה-classes:

.loud{
  border: 3px double red;
  background-color: yellow;
  color: blue;
  width: 350px;
  padding: 30px;
  margin: 20px;
}

שום דבר מסובך: בסה"כ מגדירים עיצוב לקטע טקסט, אבל התוצאות הרבה יותר גמישות ממה שאפשר לעשות עם טבלה, זה הרבה פחות מסובך ומסורבל, ואפשר להחיל את ההגדרות האלה על כמה קטעים שרוצים!

בשביל לדעת איזה הגדרות קיימות, כדאי להעזר ב רשימת המאפיינים של css.

בינתיים, בואו נראה מה ההגדרות שהגדרנו כאן אומרות:

  • .loud
    שם ה-class.
  • border: 3px double red;
    גבול, או מסגרת, הקופסה. לגבול יש שלוש תכונות (לא חובה לכתוב אותן לפי הסדר הזה): עובי, סגנון וצבע.
    עובי אפשר לכתוב בפיקסלים או לציין thin, medium, thick.
    הסגנונות מוגדרים מראש בדפדפנים, והם כוללים את: dotted, dashed, solid, groove, ridge, inset, outset, double. פרטים - ברשימת המאפיינים שצייניתי למעלה.
    צבע אפשר לכתוב במילים (באנגלית, כמובן), או כקוד rgb, בלי לשכוח את הסולמית קודם.
  • background-color: yellow;
    צבע הרקע של הקופסה.
  • color: blue;
    צבע הכתב.
  • width: 350px;
    רוחב הקופסה. אפשר בפיקסלים או באחוזים.
  • padding: 30px;
    ריפוד - שימו לב שיש מרחק של בערך ס"מ (שזה בערך 30 פיקסלים) בין המסגרת לכתב - זה בגלל הריפוד.
  • margin: 20px;
    השוליים מסביב לקופסה. אין להם צבע, זה פשוט מרחק מהמסגרת של האלמנט בו נמצאת הקופסה. שימו לב שהשורה מעל מתחילה לפני הקופסה:

    שוליים

בשיעור הבא נלמד למקם קופסאות.

למעבר לנושא הבא - מיקום קופסאות div - לחצו כאן.

חזרה לדף css הראשי...