الحدود في css | أساسيات CSS


سمة  الحدود Border  في CSS  


تتيح لنا سمة Border في CSS إنشاء حدود لعناصر HTML. لا يمكن إنشاء هذه الخطوط فحسب، بل يمكن أيضًا تحديد نوع نمط الخطوط وعرضها ولونها. في هذا الدرس، سوف نتعلم كيفية استخدام سمة الحدود. 

سمات الحدود في CSS

تسمح لك سمات الحدود في CSS بتحديد نمط وعرض ولون حد عنصر.

في العناصر المدرجة أدناه، يستخدم كل عنصر سمة الحدود بطريقة مختلفة:

عنصر له حدود من الجوانب الأربعة.

عنصر له حد أحمر في الأسفل.

عنصر له حدود دائرية حوله.

عنصر له حد أزرق على اليمين.


صفة الحدود

تحدد سمة نمط الحدود نوع الحد المطلوب عرضه. يتم استخدام القيم التالية لهذه السمة:

dotted - حد بنمط نقطة
dashed - حد بنمط خطوط المسافة
solid - حد بنمط خط مستقيم
double - حد بنمط خطين مستقيمين
groove- حد ثلاثي الأبعاد بنمط مخدد
ridge- حد ثلاثي الأبعاد بنمط ريدج 
inset- حد ثلاثي الأبعاد بنمط داخلي 
outset- حد ثلاثي الأبعاد بنمط البداية 
none - ليس لها حدود
hidden - حد مخفي

يمكن أن تحتوي سمة نمط الحدود على قيمة واحدة إلى أربع قيم (للحد العلوي، والحد الأيمن، والحد السفلي، والحد الأيسر).

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

وستكون النتيجة كالتالي:  

حد بنمط نقطة

حد بنمط خط المسافة

حد بنمط خط مستقيم

حد بنمطي خط مستقيم

حد ثلاثي الأبعاد بنمط مخدد

حد ثلاثي الأبعاد بنمط ريدج

حد ثلاثي الأبعاد بنمط داخلي

حد ثلاثي الأبعاد بنمط البداية

ليس لها حدود

حد مخفي

حد مشترك

سمة عرض الحدود

تحدد سمة عرض الحدود عرض جميع الحدود الأربعة (أعلى، يمين، أسفل، يسار).

يمكن تعيين العرض كحجم محدد أو ضبطه على إحدى القيم الافتراضية الثلاث: رفيع، متوسط، سميك.

عنصر بحد عرضه 5 بكسل

يوضح المثال التالي كيفية تعيين سمة عرض الحدود بقيم مختلفة:

p.one {
border-style: solid;
border-width: 5px;
}

p.two {
border-style: solid;
border-width: medium;
}

p.three {
border-style: solid;
border-width: 2px 10px 4px 20px;
}

سمة لون الحدود

تُستخدم سمة لون الحدود لضبط لون الحدود الأربعة (أعلى، يمين، أسفل، يسار).

يمكن تحديد اللون بالقيم التالية:

اسم للون - مثل "أحمر"
قيمة سداسية عشرية - مثل "ff0000 #"
قيمة RGB - مثل "(rgb (255،0،0")

إذا لم يتم تعيين قيمة لون الحدود، فإنها تستخدم لون العنصر كلون افتراضي.

حد أحمر

يوضح المثال التالي كيفية تعيين لون الحدود بقيمة واحدة أو أكثر:

p.one {
border-style: solid;
border-color: red;
}

p.two {
border-style: solid;
border-color: green;
}

p.three {
border-style: solid;
border-color: red green blue yellow;
}

الحدود - تحدد نوع الحد لكل جانب على حدة

توجد سمة في CSS يمكن استخدامها لتحديد نوع الحد لكل جانب من عنصر، على سبيل المثال:

عنصر بحدود مختلفة

في العنصر المحدد أعلاه، يتم استخدام النوع المنقط للحدود العلوية والسفلية ويستخدم النوع المتصل للحدود اليمنى واليسرى. لتحقيق النتيجة أعلاه، نستخدم نموذج الكود الوارد في المثال التالي:

p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}

يمكن أيضًا كتابة نموذج الكود أعلاه على النحو التالي، مما لا يحدث فرقًا في النتيجة الناتجة:

p {
border-style: dotted solid;
}

ولكن كيف تعمل أمثلة الكود أعلاه:

إذا كانت سمة نمط الحدود تشتمل على أربع قيم:

border-style: dotted solid double dashed;
الحد العلوي  dotted
الحدود الأيمن  solid
الحد السفلي double
الحد الأيسر  dashed

إذا كانت سمة نمط الحدود تشتمل على ثلاث قيم: 

border-style: dotted solid double;
الحد العلوي dotted
حدود اليسار واليمين هي من نوع  solid
الحد السفلي   double

 إذا كانت سمة نمط الحدود تشتمل على قيمتين:

border-style: dotted solid;
العلوي والسفلي الحدود هم من نوع dotted
حدود اليسار واليمين هي من نوع solid


إذا كانت سمة نمط الحدود لها قيمة:

border-style: dotted;
كل من الحدود الأربعة هي dotted

في الأمثلة المذكورة أعلاه، يتم استخدام نمط الحدود الصفة. ومع ذلك، فإن قيم الترتيب للاتجاهات المختلفة هي نفسها في عناصر عرض الحدود ولون الحدود.

الحدود - صفة مختصرة

كما ترى في الأمثلة أعلاه، لتحديد حد بسيط، نحتاج إلى تعيين العديد من سمات الحدود. للاختصار في الكود، من الممكن دمج جميع السمات المذكورة في سمة واحدة. هذه السمات هي:

عرض الحدود
نمط الحدود
لون الحدود 

والتي يمكن كتابتها في سطر واحد كالتالي:

p {
border: 5px solid red;
}

 النتيجه هي:

بعض النصوص

في المثال أعلاه، تنطبق القيم المستخدمة على جميع الحدود الأربعة، ولكن يمكن أيضًا تطبيقها على جانب واحد:

الحد الأيسر:

p {
border-left: 6px solid red;
background-color: lightgrey;
}

النتيجة :

 

الحد السفلي:

p {
border-bottom: 6px solid red;
background-color: lightgrey;
}

النتيجة :

بعض النصوص


نصف قطر الحد 

يتم استخدام خاصية border-radius لإنشاء حدود دائرية (بزوايا دائرية):

حد في الوضع العادي

حد مستدير

حد مستدير

الحدود الدائرية

لتحقيق النتائج المذكورة أعلاه، نستخدم نموذج الكود التالي:

p {
border: 2px solid red;
border-radius: 5px;
}


كلمات مفتاحية: