Like And Win VIP Hack
Click Like To WIN 30 Day VIP Hack

[ دورة CSS ] الصندوق النموذجي CSS – الدرس الثاني – الحدود Borders

Home // Blog // [ دورة CSS ] الصندوق النموذجي CSS – الدرس الثاني – الحدود Borders

Share Now And Win Free ViP HackShare on Facebook0Google+0Tweet about this on Twitter0
 

خصائص الحدود في 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 ضبط عرض الحدود الاربعة
Share Now And Win Free ViP HackShare on Facebook0Google+0Tweet about this on Twitter0

0 Comments ON " [ دورة CSS ] الصندوق النموذجي CSS – الدرس ال... "
leave a response

*

Copyright © All Rights Reserved 2014→2017 To Add-Fast.CoM