נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

מדריך 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

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

 

= 5 + 9