המדריך לעיצוב גבולות (borders) בשפת CSS

גבולות כחלק ממודל הקופסא

מודל הקופסא ב - CSS בא לתאר אזורים שונים בתוך הקופסא הדמיונית הסובבת כל אלמנט בעץ המסמך שלנו. בעזרת CSS ביכולתנו להשפיע על המראה של האזורים השונים סביב האלמנט. אזורים אלה מתוארים באיור הבא:

Ilustration of CSS Box Model

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

סוגי גבולות

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

border-style: dashed

border-style: dotted

border-style: double

border-style: groove

border-style: hidden

border-style: inset

border-style: none

border-style: outset

border-style: ridge

border-style: solid

border-style: inherit

להלן דוגמת קוד לשימוש בתכונה border-style:

p{border-style:inset;}

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

בעזרת התכונה border-width נוכל לקבוע מה יהיה עוביו של קו הגבול של אלמנט. תכונה זו יכולה לקבל ערכים שונים. מטבע הדברים תכונה זו לא תבוא לידי ביטוי בלא שנגדיר עבור אותו אלמנט גם את התכונה border-style.להלן טבלה ובה פירוט הערכים שהתכונה יכולה לקבל:

ערך הסבר
thin מילה שמורה. תגרום להצגת קו גבול דק.
medium מילה שמורה. תגרום להצגת קו גבול בינוני בעוביו.
thick מילה שמורה. תגרום להצגת קו גבול עבה.
length מאפשר להעביר ערך מספרי הקובע את עובי קו הגבול.
inherit עובי קו הגבול יירש את ערכו מעובי קו הגבול של האלמנטים שבתוכם מקנן האלמנט שאת עובי קו הגבול שלנו אנו מעוניינים לקבוע.

להלן דוגמת קוד לשימוש בתכונה border-width:

p{border-width:1px;}

נסו בעצמכם   


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

נשתמש בתכונה border-color כדי להגדיר את צבע הגבולות של אלמנט. ניתן להגדיר את צבע הגבולות באחד משלוש דרכים: באמצעות שימוש בשמות צבעים שמורים, באמצעות שימוש בערכי RGB וכן באמצעות שימוש בערכים הקסה דצימליים. כמו כן, ניתן לקבוע שהגבול יהיה שקוף (ערך ברירת המחדל) באמצעות העברת הערך transparent וכן לקבוע כי האלמנט יירש תכונה זו מאלמנט אחר שבתוכו הוא מקנן וזאת באמצעות העברת הערך: inherited.

מטבע הדברים תכונה זו לא תבוא לידי ביטוי אם לא נגדיר לאלמנט שלנו את התכונה border-style.

 

להלן דוגמת קוד לשימוש בתכונה border-color:

p{border-color:red}

נסו בעצמכם   


התייחסות נפרדת לכל אחד מגבולות אלמנט

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

p{border-style:solid;}
p{border-top-color:red}
p{border-bottom-color:green}
p{border-left-color:blue}
p{border-right-color:black}

נסו בעצמכם   

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

ריכוז כל התכונות לעיצוב גבולות

תכונה הסבר
border מאפשר להגדיר את כל תכונות הגבולות בהגדרה אחת.
border-bottom מאפשר להגדיר את כל התכונות של הגבול התחתון של אלמנט בהגדרה אחת.
border-bottom-color מאפשר לקבוע מה יהיה צבע הגבול התחתון של אלמנט.
border-bottom-style קובע את סגנון קו הגבול התחתון של אלמנט.
border-bottom-width מגדיר את עובי קו הגבול התחתון של אלמנט בדף.
border-color מגדיר את צבע כל גבולות האלמנט.
border-collapse במקרה שהערך שתכונה זו תקבל הוא collapse גבולות הטבלה
יהפכו להיות לגבול אחד משותף.
border-left מאפשר להגדיר את כל תכונות הגבול השמאלי של אלמנט.
border-left-color מגדיר את צבע הגבול השמאלי של אלמנט.
border-left-style קובע את סגנון קו הגבול השמאלי של אלמנט.
border-left-width קובע את עוביו של קו הגבול השמאלי של אלמנט.
border-right מאפשר להגדיר את כל תכונות הגבול הימני של אלמנט נתון.
border-right-color מגדיר את צבע הגבול הימני של אלמנט נתון.
border-right-style קובע את סגנון קו הגבול הימני של אלמנט נתון.
border-right-width קובע את עוביו של קו הגבול הימני של אלמנט נתון.
border-spacing קובע את המרחק בין גבולות של תאים מיושרים בטבלה.
border-style קובע את סגנון הקו של כל ארבעת הגבולות באלמנט נתון.
border-top באמצעות תכונה זו ניתן להגדיר את כל תכונות הגבול העליון של אלמנט נתון.
border-top-color קובע את צבעו של הגבול העליון באלמנט נתון.
border-top-style קובע את סגנון קו הגבול העליון באלמנט נתון.
border-top-width מגדיר את עוביו של קו הגבול העליון.
border-width מגדיר את עוביים של כל קווי הגבול באלמנט נתון.


 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש