גבולות בשפת CSS

גבולות בשפת CSS

  • פרסומת

שפת CSS מאפשרת שליטה חופשית בגבולות (או מסגרות) של אלמנטים במסמך. צפו בהדגמה בשביל לראות באופן ויזואלי את כל סוגי העיצובים האפשריים.

גבול בשפת CSS מוגדר על ידי שלושה מאפיינים:

  • עובי הגבול – ניתן להגדיר על ידי מספר או על ידי עובי מוגדר מראש.
  • סוג הגבול – ניתן לבחור מתוך 8 סוגים שונים, ראו למטה.
  • צבע הגבול – ניתן להגדיר בשיטות שונות, למידע נוסף קראו על צבעים בשפת CSS.

עובי הגבול

ניתן להגדיר את עובי הגבול בשתי שיטות:

  • על ידי שימוש במספר (פיקסלים או אחוזים).
  • על ידי שימוש בעובי מוגדר מראש (thin, medium, thick).

עובי הגבול מוגדר על ידי שימוש במאפיין border-width . ניתן להשתמש במאפיין באופן הבא:

#el1 {border-width: thin;}
#el2 {border-width: medium;}
#el3 {border-width: thick;}
#el4 {border-width: 14px;}

ניתן לראות בדוגמה שההכרזה border-width: 1px וההכרזה border-width: thin יוצרות את אותו עובי הגבול בדיוק. לכל עובי מוגדר מראש יש גם מקבילה מספרית.

יש להדגיש כי הגדרת עובי הגבול אינה מספקת בשביל לצייר גבול. יש להגדיר את סוג הגבול בנוסף בשביל שהגבול יהיה גלוי.

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

סוג הגבול

בשפת CSS ישנם 8 סוגים שונים של גבולות. הגבולות מוגדרים על ידי שימוש במאפיין border-style

. הסוגים הם:

  • dotted – גבול מנוקד
  • dashed – גבול מקווקו
  • solid – גבול מלא
  • double – גבול כפול
  • groove – גבול שקוע
  • ridge – גבול בולט
  • inset – גבול פנימי
  • outset – גבול חיצוני

ניתן לראות כיצד נראים הסוגים השונים של הגבולות בהדגמה (למעלה).

השימוש במאפיין נעשה באופן הבא:

#el {
    border-style: solid;
}

צבע הגבול

צבע הגבול מוגדר על ידי שימוש במאפיין border-color . ניתן להשתמש בערכים שונים, כגון rgb, hexadecimal ועוד. להסבר מלא על הנושא קראו על צבעים בשפת CSS.

ניתן להשתמש במאפיין באופן הבא:

#el {
    border-color: red;
}

גבולות שונים לאותו אלמנט

לעיתים יש צורך להגדיר גבולות שונים לכל צד של האלמנט. מכיוון שצורתו של כל אלמנט בשפת CSS היא מלבנית, ישנם 4 צדדים המוגדרים בהתאמה top, bottom, left, right.

לדוגמה, ניתן להגדיר אלמנט עם גבול עליון וגבול תחתון, אך ללא גבול ימני וגבול שמאלי באופן הבא:

#el {
    border-top-width: 2px;
    border-bottom-width: 2px;
    border-right-width: 0px;
    border-left-width: 0px;
}

ניתן להשיג את אותו האפקט עם פחות שורות קוד באופן הבא:

#el {
    border-width: 2px;
    border-right-width: 0px;
    border-left-width: 0px;
}

שילוב מאפיינים

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

#el {
    border: 3px solid #e4e4e4;
}

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

#el {
    border-left: thin solid #e4e4e4;
    border-right: 3px dashed red;
    border-top: 5px dotted rgb(45, 56, 154);
    border-bottom: 12px ridge #e1e1e1;
}