الحدود (Borders)

جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 36 من 76.

في CSS، الـ border هو خط يحيط بالعنصر، ويفصله عن العناصر الأخرى ويحدد حدوده.

إليك الصيغة الأساسية لاستخدام خاصية border:

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

border-width: سمك الإطار، والذي يمكن تحديده بالبكسل (px)، أو ems (em)، أو وحدات CSS صالحة أخرى. يمكنك أيضاً استخدام كلمات رئيسية مثل thin، و medium، و thick.

border-style: نمط الحدود، والذي يمكن أن يكون أحد ما يلي:
- dotted: سلسلة من النقاط
- dashed: سلسلة من الشرطات
- solid: خط متصل
- double: خطان متصلان

border-color: لون الإطار، والذي يمكن تحديده باستخدام الألوان المسماة، أو القيم الست عشرية (hexadecimal)، أو قيم RGB، أو قيم HSL.

يمكنك أيضاً استخدام تدوين الاختصار لتعيين خصائص الحدود الثلاثة جميعاً في وقت واحد:

selector {
    border: width style color;
}

على سبيل المثال:

p {
    border: 2px solid blue;
}

في هذا المثال، جميع عناصر <p> (الفقرة) لها إطار أزرق متصل بعرض 2px.

التحدي

سهل

لقد تم تزويدك بمستند HTML يحتوي على ثلاثة عناصر <div>، يمثل كل منها جدول سينما لأيام Friday و Saturday و Sunday. مهمتك هي استخدام خاصية border لتنسيقها.

قم بتنسيق جدول Friday بحد مقاس 3px solid black.
قم بتنسيق جدول Saturday بحد مقاس 4px dashed blue.
قم بتنسيق جدول Sunday بحد مقاس 5px dotted green.

ورقة مرجعية

الـ border هو خط يحيط بالعنصر، ويفصله عن العناصر الأخرى ويحدد حدوده.

خصائص الإطار (Border properties):

border-width: السمك (px، em، أو كلمات مفتاحية مثل thin، medium، thick)
border-style: النمط (dotted، dashed، solid، double)
border-color: اللون (ألوان مسماة، hex، RGB، HSL)

الخصائص الفردية:

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

صيغة الاختصار (Shorthand notation):

selector {
    border: width style color;
}

مثال:

p {
    border: 2px solid blue;
}

جرّب بنفسك

<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>