עיצוב קווי מיתאר (Outline) בעזרת CSS

קווי מיתאר כחלק ממודל הקופסא

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

Ilustration of CSS Box Model

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

סוגי קווי מיתאר

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

outline-style: dashed

outline-style: dotted

outline-style: double

outline-style: groove

outline-style: inset

outline-style: none

outline-style: outset

outline-style: ridge

outline-style: solid

outline-style: inherit

להלן דוגמת קוד לשימוש בתכונה outline:

p{outline:inset

כדי שניתן יהיה לראות את ה - outline באינטרנט אקספלורר יש להוסיף את התג Doctype! בראש המסמך.

הגדרת עובי קווי מיתאר

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

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

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

p{outline-width:1px;}

נסו בעצמכם   

הגדרת צבעי המיתאר

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

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

p{border-color:red}

נסו בעצמכם   

ריכוז כל התכונות לעיצוב קווי מיתאר

תכונה הסבר
outline מאפשר להגדיר את כל תכונות קווי הגבול החיצוניים במשפט CSS אחד.
outline-color הגדרת צבעו של קו הגבול של אלמנט.
outline-style להגדרת סגנון קו הגבול (רציף, מקווקו, מנוקד וכדומה).
outline-width להגדרת עובי קו הגבול.
 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש