الحدود Borders
تسجيل الدخول
الخاصية Border في لغة CSS
تسمح لنا خصائص الحدود border بتحديد منطقة الحدود لصندوق العنصر.
تظهر الحدود مباشرة بين الهوامش و الحواشي للعنصر. يمكن أن يكون الحد إما نمطًا محددًا مسبقًا مثل ، خط متصل ، خط منقط ، خط مزدوج ، إلخ أو صورة.
فهم أنماط الحدود المختلفة
تحدد الخاصية border-style نمط حدود صندوق العنصر مثل: solid و dotted ... إلخ.
الخاصية border-style خاصية مختصرة اتحديد نمط الخط لجميع الجوانب الأربعة لحد العنصر.
يمكن أن تحتوي الخاصية border-style على القيم التالية: none و hidden و solid و dashed و dotted و double و inset و outset و groove و ridge. الآن ، دعنا نلقي نظرة على الرسم التوضيحي التالي الذي يبين الاختلافات بين أنواع أنماط الحدود.
القيم none و hidden لا تعرض أي حدود ، ومع ذلك ، هناك اختلاف بسيط بين هاتين القيمتين. في حالة الـ collapsing في حدود الجداول ، فإن القيمة none لها الأولوية الدنيا ، بينما تكون للقيمة hidden الأولوية القصوى ، إذا تم تحديد أي حد متعارض مع آخر.
تُنشئ القيم inset و outset و groove و ridge تأثيرًا ثلاثي الأبعاد يعتمد بشكل أساسي على قيمة الخاصية border-color. يتم تحقيق ذلك عادةً عن طريق إنشاء "ظل" من لونين أفتح قليلاً وأغمق من لون الحد.
- h1 {
- border-style: dotted;
- }
- p {
- border-style: ridge;
- }
يجب تحديد نمط الحدود لجعل الحد يظهر حول عنصر ، لأن نمط الحد الافتراضي هو none. في حين أن قيمة عرض الحد الافتراضي أو سمكه هي medium، ولون الحد الافتراضي هو نفس لون النص.
تحديد سماكة الحدود
تحدد الخاصية border-width عرض أو سمك منطقة الحدود. الخاصية border-width هي خاصية مختصرة لتحديد سماكة جميع الجوانب الأربعة لحد العنصر في نفس الوقت.
لنجرب المثال التالي لفهم كيفية عملها:
- p {
- border-style: dashed;
- border-width: 10px;
- }
يمكن تحديد سماكة الحد باستخدام أي وحدة طول ، مثل px و em و rem وما إلى ذلك. بالإضافة إلى وحدات الطول ، يمكن أيضًا تحديد سماكة الحد باستخدام واحدة من ثلاث كلمات رئيسية: thin و medium و thick. قيم النسبة المئوية غير مسموح بها للخاصية border-width .
تحديد لون الحدود
تحدد الخاصية border-color لون منطقة الحدود. هذه أيضًا خاصية مختصرة لتحديد لون جميع الجوانب الأربعة لحد العنصر.
- p {
- border-style: solid;
- border-color: #ff0000;
- }
لا تعمل خاصية border-width أو border-color إذا تم استخدامها بمفردها. يجب إستخدام الخاصية border-style لتحديد نمط الحد أولاً.
الخاصية المختصرة Border
إن الخاصية border هي خاصية مختصرة لتحديد واحدة أو أكثر من خصائص الحدود الفردية border-width و border-style و border-color في خاصية واحدة.
دعنا نلقي نظرة على المثال التالي لفهم كيفية عملها:
- p {
- border: 5px solid #00ff00;
- }
إذا تم حذف إحدى القيم أو لم يتم تحديدها أثناء تحديد الخاصية المختصرة border ، فسيتم استخدام القيمة الافتراضية لتلك الخاصية بدلاً من ذلك إن وجدت.
على سبيل المثال ، إذا كانت قيمة الخاصية border-color مفقودة أو لم يتم تحديدها ، فسيتم استخدام خاصية لون العنصر كقيمة للون الحد.
في المثال أدناه ، ستكون الحدود عبارة عن خط أحمر متصل بسمك 5 بكسل:
- p {
- color: red;
- border: 5px solid;
- }
ولكن ، في حالة قيمة الخاصية border-style يؤدي حذف القيمة إلى عدم ظهور أي حد على الإطلاق ، لأن القيمة الافتراضية لهذه الخاصية هي none. في المثال التالي لن يكون هناك حدود:
- p {
- border: 5px #00ff00;
- }