יצירת קשר עם חברת בניית אתרים צור קשר

 077-7644819
חייגו או השאירו הודעתכם

 
מאמרים אחרונים מאמרים אחרונים
09/08/2023 17:16
בניית חנות באינטרנט למכירה של מוצרים לחיות מחמד
12/03/2023 22:03
במאמר זה נסקור את התפתחות שפת צד השרת PHP מראשית ימיה, לכל אורך גירסאותיה השונות עד לאן שהיא הגיעה ב...
08/01/2023 23:40
הקמת אתר מכירות לדלתות פנים וחוץ לבתים פרטיים ולעסקים וציוד פירזול
תגובות אחרונות תגובות אחרונות
עיצוב רקע - background
12/06/2023 19:52
היי תמר, עושים את זה באמצעות ...
עיצוב רקע - background
28/05/2023 21:36
אני רוצה ליצור כפתור שהרקע שלו...
עיצוב רקע - background
15/12/2022 20:22
איך עושים שיראו את כל התמונת ר...
תגובות אחרונות פוסטים אחרונים בפורום
08/11/2022 19:11
היי, יש לי אתר קצת מורכב. הוא...
08/11/2022 19:09
היי, אני עוסק בענף הטניס ויש ...
08/11/2022 19:03
היי, ראיתי בכל מיני אתרים שמש...

עיצוב גבולות - border-style, border-width, border-color

  1. דף הבית
  2. מדריך HTML5 למתכנת המתחיל
  3. עיצוב גבולות - border-style, border-width, border-color
כיצד מגדירים גבול (border) סביב אלמנטים באמצעות CSS?

עיצוב גבולות ב-CSS

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

להלן סוגי הגבולות הקיימים:

  • dotted - ערך זה יוצר גבול מנוקד.
  • dashed - ערך זה יוצר גבול מקווקו.
  • solid - ערך זה יוצר גבול קווי רציף.
  • double - ערך זה יוצר גבול כפול.
  • groove - ערך זה יוצר גבול הנראה כמסילה שקועה.
  • ridge - ערך זה יוצר גבול בולט.
  • inset - ערך זה יוצר גבול בולט כלפי פנימה.
  • outset - ערך זו יוצר גבול בולט כלפי חוץ.
  • none - ללא גבול.

בדוגמה הבאה הגבול יהיה כפול. עובי כל אחד מן הקווים של הגבול יוגדר ע"י התכונה border-width והוא יהיה 2 פיקסל:

h3 {
    border-style:double;
    border-width:2px;
}

את עובי הגבול ניתן להגדיר גם ע"י אחד מהערכים: thin, medium, או thick, כמו בדוגמה הבאה:

h3 {
    border-style:solid;
    border-width:thick;
}

הגדרת צבע הגבול

בכדי להגדיר את צבע הגבול, משתמשים בתכונה border-color. הערך של תכונה זו יכול להיכתב באחת מהשיטות הבאות:

  • שם של צבע באנגלית (פלטת 16 צבעים) - למשל blue מציין כחול.
  • ערך HEX ב-3 ספרות (פלטת 4096 צבעים) - למשל fff# מציין לבן.
  • ערך HEX ב-6 ספרות (פלטת 16.8 מליון צבעים) - זו השיטה הנפוצה ביותר היום. למשל ffffff# מציין לבן.
  • ערך RGB במספר עשרוני (פלטת 16.8 מליון צבעים) - למשל (rgb(255,0,0 מציין אדום.

מלבד זאת, קיים ערך נוסף - transparent שמגדיר את הגבול כשקוף.

הגבול בדוגמה הבאה יהיה מקווקו בצבע סגול:

p.first {
    border-style:dashed;
    border-width:3px;
    border-color:purple;
}

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

  • border-width
  • border-style
  • border-color

לדוגמה:

h2 {
    border:1px dashed transparent;
}

בעת שימוש בתכונת הקיצור, מותר להשמיט תכונה כלשהי מלבד התכונה border-style שהיא הכרחית כאמור, כל עוד סדר התכונות נשמר.

עיצוב כל צד של הגבול בנפרד

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

a {
    border-top-color:blue;
    border-right-color:green;
    border-bottom-color:blue;
    border-left-color:green;
}

ניתן לכתוב את אותו הדבר באופן מקוצר:

a {
    border-color:blue green;
}

בשיטה זו, יכול להופיע בין ערך אחד לארבעה ערכים באופן הבא:

  • ערך אחד - יגדיר את כל צידי הגבול באופן זהה.
  • שני ערכים - הערך הראשון מגדיר את הגבול העליון והתחתון, והערך השני מגדיר את הגבולות הצדדיים.
  • שלושה ערכים - הערך הראשון מגדיר את הגבול העליון, השני - את הגבולות הצדדיים, והשלישי - את הגבול התחתון.
  • ארבעה ערכים - מגדירים את כל הצדדים בזה אחר זה מלמעלה ובכיוון השעון.

בדוגמה הבאה הגבול העליון והתחתון יהיו קווים רציפים, והגבולות הצדדיים יהיו מקווקווים. כמו כן, עובי הגבול העליון יהיה 2px, עובי הגבולות הצדדיים - 5px והגבול התחתון - 10px:

p {
    border-style:solid dashed;
    border-width:2px 5px 10px;
}

 

הוספת תגובה
YouTube previewPlay

שנקפיץ יחד את העסק שלך לגבהים חדשים?

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

ההצלחה מבוססת על בניית חנות וירטואלית בחוד החנית עם הקמת מערך שיווק אפקטיבי שמגדיל חשיפה והמרות.

 

אל תהססו! מלאו את הטופס או התקשרו עכשיו 077-7644819

 
WhatsApp
שנקפיץ לך את העסק?
לחץ כאן
התקשר עכשיו 077-7644819
או מלא את הטופס להלן: