תחי ישראל - אין לנו ארץ אחרת

תחי ישראל -אין לנו ארץ אחרת

מדריך CSS מספר 12 - קווי מתאר, אורך וגובה

מחבר:
בתאריך:

 

במדריך זה נלמד לצייר קו מתאר סביב אלמנט, כדוגמת תיבה או פסקה, באמצעות התכונה border, ונלמד לשלוט בגובה ובאורך של אלמנט באמצעות התכונות width ו-height. 

עיצוב קו מתאר של אלמנט

התכונה שמציירת קו מתאר היא border, והיא מקבלת שלושה ערכים: רוחב, צורה וצבע.

נסתכל על קוד ה-CSS הבא:

.container {border: 1px solid black; }

בקוד זה 1px הוא עובי קו המתאר, solid נותן לנו קו מתאר רציף (ולא מקווקו) ו-black הוא הצבע של קו המתאר.

נכתוב את הקוד לקובץ style.css, קובץ ה-css החיצוני, ונשמור.

נעתיק את הקוד הבא לקובץ ה-html. בקוד קיים div ששייך למחלקה ששמה "container". על המחלקה container פועל ה-CSS.

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
    דוגמה לקו מתאר של אלמנט
    פסקה להשוואה
</body>
</html>

נריץ את קובץ ה-html על הדפדפן, ונראה את התוצאה:

דוגמה לקו מתאר על אלמנט

אפשר לשנות את התכונה כדי שקו המתאר יופיע רק בתחתית האלמנט, ויראה כמו קו תחתי. לשם כך נשתמש בתכונה border-bottom.

נכתוב את הקוד הבא במקום הקוד הקיים לתוך הקובץ style.css:

.container{border-bottom: 1px solid black;}

נריץ על הדפדפן, ונראה את התוצאה:

התכונה border של CSS

  • כדי לעצב את קו המתאר בחלקו העליון של האלמנט נשתמש בתכונה border-top, 
  • כדי לעצב את קו המתאר מימין לאלמנט נשתמש בתכונה border-right,
  • וכדי לעצב את קו המתאר משמאל לאלמנט נשתמש בתכונה border-left.

כדי לראות את התכונות בפעולה, נכתוב את הקוד הבא לקובץ ה-CSS החיצוני, כשהעובי של קו המתאר הוא 10px, ולכל קו מתאר ניתן צבע שונה:

.container {
    border-bottom: 10px solid black;
    border-top: 10px solid red;
    border-right: 10px solid green;
    border-left: 10px solid blue;
}

נריץ את קובץ ה-html על הדפדפן, ונצפה בתוצאה:

דוגמה לאלמנט מוקף בגבול באמצעות CSS

אפשר לשנות את צורתו של קו המתאר אם נשתמש בערך dashed (מקווקו) במקום ב-solid.

כדי לראות את הערך בפעולה, נכתוב את הקוד הבא לתוך הקובץ style.css:

.container{
    border-bottom: 3px dashed black;
}

נריץ על הדפדפן, וזו התוצאה שנראה:

קו גבול מקווקו באמצעות CSS

 

עיצוב גובה ורוחב של אלמנט

אחרי שלמדנו להוסיף קו מתאר לאלמנט נלמד לשנות את גובהו ורוחבו של האלמנט באמצעות התכונה height ששולטת בגובה, והתכונה width ששולטת ברוחב. תכונות אילו מקבלות ערכים בפיקסלים.

בדוגמה הבאה האלמנט מקבל גובה של 32 פיקסלים ורוחב של 200 פיקסלים:

.container {
    height: 32px;
    width: 200px;
}

נכתוב את הקוד הבא לקובץ ה-CSS החיצוני:

.container {
    border: 3px solid black;
    background-color:yellow;
    height: 32px;
    width: 200px;
}

 

עיצוב ממדי אלמנט באמצעות CSS

למדריך הבא בסדרת ה-CSS

לכל מדריכי ה-CSS

 

 

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים

 

 

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

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

שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.

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

השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.

הוסף תגובה חדשה

 

 

ענה על השאלה הפשוטה הבאה כתנאי להוספת תגובה:

איך קוראים בעברית לצ`ופצ`יק של הקומקום?