גבולות

חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 36 מתוך 76.

ב-CSS, גבול הוא קו שמקיף רכיב, מפריד אותו מרכיבים אחרים ומגדיר את גבולותיו.

הנה התחביר הבסיסי לשימוש במאפיין border:

selector {
    border-width: value;
    border-style: value;
    border-color: value;
}

border-width: עובי הגבול, שאפשר לציין בפיקסלים (px), ביחידות em (em) או ביחידות CSS תקפות אחרות. אפשר גם להשתמש במילות מפתח כמו thin, medium ו-thick.

border-style: סגנון הגבול, שיכול להיות אחד מהבאים:
- dotted: סדרה של נקודות
- dashed: סדרה של מקפים
- solid: קו רציף
- double: שני קווים רציפים

border-color: צבע הגבול, שאפשר לציין באמצעות שמות צבעים, ערכים הקסדצימליים, ערכי RGB או ערכי HSL.

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

selector {
    border: width style color;
}

לדוגמה:

p {
    border: 2px solid blue;
}

בדוגמה הזו, לכל רכיבי <p> (פסקה) יש מסגרת כחולה אחידה ברוחב 2px.

אתגר

קל

נתון לך מסמך HTML עם שלושה רכיבי <div>, שכל אחד מהם מייצג לוח הקרנות בקולנוע ליום שישי, שבת או ראשון. המשימה שלך היא להשתמש בתכונת border כדי לעצב אותם.

עצב את לוח ההקרנות של יום שישי עם מסגרת 3px solid black.
עצב את לוח ההקרנות של יום שבת עם מסגרת 4px dashed blue.
עצב את לוח ההקרנות של יום ראשון עם מסגרת 5px dotted green.

נסו בעצמכם

<html>
<head>
    <title>Borders</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="friday">
        <h3>Friday</h3>
        <p>7:00 PM - The Inception</p>
    </div>
    <div class="saturday">
        <h3>Saturday</h3>
        <p>8:00 PM - The Matrix</p>
    </div>
    <div class="sunday">
        <h3>Sunday</h3>
        <p>9:00 PM - Interstellar</p>
    </div>
</body>
</html>