Header Ads

الحدود Borders


خصائص الحدود في CSS


تسمح لك خصائص الحدود في CSS لتحديد التصميم واللون لحدود العنصر



شكل / تصميم الحدود


تحدد خاصية border-style نوع الحدود التي ستعرض في المتصفح

ملاحظة: لن يتم عرض أي شكل للحدود مال يتم تعيين قيمة في الخاصية border-style



القيم المتعلقة بخاصية border-style



  1. لايوجد none : لن يتم عرض أي حدود للعنصر

  2. منقط dotted : يعرّف حدود منّقطة

  3. مشخّط : dottedيعرّف حدود مشخّطة

  4. صلب solid : يعرّف حدود صلبة أي على شكل خط

  5. مزدوج double : يعرّف حدود مزدوجة . العرض بين الحدود هو نفسه القيمة border-width

  6. نموذجي groove : يعرّف حدود نموذجية ثلاثية الأبعاد 3D والتأثير يعتمد على قيمة لون الحدود border-color

  7. سلسلة ridge : يعرّف الحدود على شكل سلسلة ثلاثية الأبعاد 3D والتأثير يعتمد على قيمة لون الحدود border-color

  8. تدرج داخلي inset : يعرّف حدود متدرجة داخلية ثلاثية الأبعاد 3D والتأثير يعتمد على قيمة لون الحدود border-color

  9. درج خارجي outset : يعرّف حدود متدرجة خارجية ثلاثية الأبعاد 3D والتأثير يعتمد على قيمة لون الحدود border-color



عرض الحدود


تستخدم خاصية border-width لضبط عرض الحدود

يتم تحديد العرض من خلال وحدة البكسل أو باستخدام واحدة من ثلاثة قيم وهم رفيع thin متوسط medium أو ثخين thick

ملاحظة: لاتعمل خاصية border-width لوحدها إنما تستخدم قبلها خاصية border-style

مثال
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}



لون الحدود


يمكن تلوين الحدود من خلال خاصية border-color . يمكن استخدام احدى هذه الأنواع لاستخدام اللون

  • باستخدام قيمة HEX مثال "#FFFFFF"

  • باستخدام قيمة RGB مثال "rgb(255,0,0)"

  • باستخدام اسم اللون مثل "Red"

يمكنك أيضاً استخدام القيمة "شفاف - transparent " في خاصية لون الحدود .

ملاحظة: لاتعمل خاصية border-color ان تم استخدامها لوحدها لهذا يجب استخدام أولاً الخاصية border-style

مثال
p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}



أجزاء الحدود المستقلة


باستخدام لغة CSS يمكنك تعيين جزء منفصل من الحدود كاليمين أو اليسار فقط أو تعيين كل جزء بنوع معين من أنواع الحدود .

مثال
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}


يمكن أيضاً تعيين أكثر من قيمة من خلال نفس الخاصية

مثال
border-style:dotted solid;


لدى خاصية border-style من واحدة الى أربع قيمة مختلفة

شكل الحدود border-style : منقّط , صلب , مزدوج , مشخّط


  • الحد العلوي top border منقّط dotted

  • الحد اليمين right border صلب solid

  • الحد السفلي bottom border مضاعف double

  • الحد اليسار left border مشخّط dashed

شكل الحدود border-style : منقّط , صلب , مزدوج


  • الحد العلوي top border منقّط dotted

  • الحد اليمين واليسار right and left border صلب solid

  • الحد السفلي bottom border مضاعف double

شكل الحدود border-style : منقّط , صلب


  • الحد العلوي والسفلي top and bottom border منقّط dotted

  • الحد اليمين واليسار right and left border صلب solid

شكل الحدود border-style : منقّط


  • جميع الحدود منقّطة dotted

لقد تم استخدام الخاصية border-style في المثال المشروح السابق ويمكن استخدام نفس الشرح حول الخاصيات عرض الحدود border-width ولون الحدود border-color



الحدود – تقليص الخاصيات


كما تلاحظ من المثال السابق , هناك العديد من الخاصيات التي يمكن استخدامها مع الحدود .

لتقليص الكود يمكنك تحديد جميع القيم في خاصية واحد كما رأينا مسبقاً وجمع جميع قيم الحدود في خاصية واحدة .

تقليص الخاصية يمكن استخدامها مع خاصية الحدود border

مثال
border:5px solid red;


عند استخدام خاصية الحدود border يمكن وضع القيم التابعة للخاصيات التالية :

  • عرض الحدود border-width

  • تصميم الحدود border-style

  • لون الحدود border-color

لايهم ان تم تجاهل احدى القيم طالما تستخدمهم بالترتيب (على الرغم من أن تصميم الحدود border-style مطلوب) .




جميع خاصيات الحدود borders
الخاصيةالشرح
borderتحديد جميع قيم الحدود في خاصية واحدة
border-bottomضبط جميع قيم الحدود السفلية في خاصية واحدة
border-bottom-colorضبط لون الحدود السفلية
border-bottom-styleضبط التصميم للحدود السفلية
border-bottom-widthضبط العرض للحدود السفلية
border-colorضبط اللون للحدود الأربعة
border-leftضبط جميع قيم حدود اليسار في خاصية واحدة
border-left-colorضبط لون حدود اليسار
border-left-styleضبط تصميم حدود اليسار
border-left-widthضبط عرض حدود اليسار
border-rightضبط جميع قيم حدود اليمين في خاصية واحدة
border-right-colorضبط لون حدود اليمين
border-right-styleضبط تصميم حدود اليمين
border-right-widthضبط عرض حدود اليمين
border-styleضبط تصميم الحدود الأربعة
border-topضبط جميع قيم الحدود العلوية في خاصية واحدة
border-top-colorضبط لون الحدود العلوية
border-top-styleضبط تصميم الحدود العلوية
border-top-widthضبط عرض الحدود العلوية
border-widthضبط عرض الحدود الاربعة




يتم التشغيل بواسطة Blogger.