יכול לעניין אתכם

מדריך CSS מספר 8 - איך לעצב רשימות (lists)
מאת: בקלות טכני

מדריך CSS מספר 9 -איך לקבץ סלקטורים

מאת: בקלות טכני

מדריך CSS מספר 11 - קו מתאר (Outline)

מאת: בקלות טכני

מדריך CSS מספר 12 - איך לעשות מרווחים (Margins)
מאת: בקלות טכני

מדריך CSS מספר 13 - איך להשתמש בPadding

מאת: בקלות טכני

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

מחשבים

מדריך CSS מספר 10 - גבולות

עקוב

09/08/2011 10:26:35
מאת: בקלות טכני
כתב מתחיל

דירוג:

(0 מדרגים)

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

רמת קושי: מתקדמים

הוראות:

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

הגבול הרציף והסטנדרטי ביותר נקרא solid:

This is a paragraph with borders.

בדוגמא הגדרנו מאפיין border-style עם הערך solid על סלקטור מסוג פסקה וקיבלנו כמובן גבול רציף סביבה.

הנה שאר הערכים המייצגים את סוגי הגבולות שתוכלו לנסות בעצמכם - כדאי לכם, הם יפים (בקוד בצעד 2 יש להחליף את הsolid בכל אחד מהערכים הבאים):

dashed - גבול מקווקו
double - גבול כפול
none - ללא גבול
dotted - גבול מנוקד
ridge - גבול רכס (בולט)
groove - גבול חרוט
outset - גבול שמבליט את האלמנט כלפי חוץ
inset - גבול שגורם לאלמנט להראות שקוע
hidden - גבול נסתר

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

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

This is a paragraph with borders - in blue.

בדוגמא הזאת הגדרנו מאפין border-style עם ערך outset כלומר המסגרת תהיה בולטת ובצורת רכס והגדרנו border-color עם הערך blue.

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