CSS

CSS Border Sides
جوانب الإطارات في لغة CSS

سوف تتعلم في هذا الدرس التحكم في جوانب الإطارات الأربع من حيث سُمك الإطار ولونة ونوعة ويمكن أن تُنشئ إطار بجوانب مٌختلفة في لغة CSS.

التاريخ

13 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1968

المواضيع

24
الشروحات chevron_left CSS Border Sides chevron_left CSS
CSS Flex Box keyboard_arrow_down

CSS Border Sides
جوانب الإطارات في لغة CSS

مراجعة تقنية
Mostafa Hefny

Mostafa Hefny

CEO & Founder CloseTag

</> CSS Border Sides
جوانب الإطارات في لغة CSS

يُمكن في لغة CSS إعطاء لكل جانب من جوانب الإطارات خصائص خاصة به مثل النوع واللون والسُمك (الحجم) عن طريق خصائص الجوانب الأربع [left-right-top-bottom].


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

  • border-top-style تُستخدم هذة الخاصية للتحكم في نوع الإطار من الجانب العلوي.
  • border-bottom-style تُستخدم هذة الخاصية للتحكم في نوع الإطار من الجانب السُفلي.
  • border-left-style تُستخدم هذة الخاصية للتحكم في نوع الإطار من الجانب الأيسر.
  • border-right-style تُستخدم هذة الخاصية للتحكم في نوع الإطار من الجانب الأيمن.
border-[top-bottom-left-right]-style syntax

طريقة كتابة border-[top-bottom-left-right]-style في لغة CSS.

border-top-style:value;
border-bottom-style:value;
border-left-style:value;
border-right-style:value;

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

  • border-top-color تُستخدم هذة الخاصية للتحكم في لون الإطار من الجانب العلوي.
  • border-bottom-color تُستخدم هذة الخاصية للتحكم في لون الإطار من الجانب السُفلي.
  • border-left-color تُستخدم هذة الخاصية للتحكم في لون الإطار من الجانب الأيسر.
  • border-right-color تُستخدم هذة الخاصية للتحكم في لون الإطار من الجانب الأيمن.
border-[top-bottom-left-right]-style syntax

طريقة كتابة border-[top-bottom-left-right]-style في لغة CSS.

border-top-color:value;
border-bottom-color:value;
border-left-color:value;
border-right-color:value;

التحكم في سُمك (حجم) الإطار علي حسب الإتجاه:

  • border-top-width تُستخدم هذة الخاصية للتحكم في سُمك الإطار من الجانب العلوي.
  • border-bottom-width تُستخدم هذة الخاصية للتحكم في سُمك الإطار من الجانب السُفلي.
  • border-left-width تُستخدم هذة الخاصية للتحكم في سُمك الإطار من الجانب الأيسر.
  • border-right-width تُستخدم هذة الخاصية للتحكم في سُمك الإطار من الجانب الأيمن.
border-[top-bottom-left-right]-style syntax

طريقة كتابة border-[top-bottom-left-right]-style في لغة CSS.

border-top-width:value;
border-bottom-width:value;
border-left-width:value;
border-right-width:value;

</> CSS border top side
الجانب العلوي للإطار في لغة CSS

يُمكن في لغة CSS التحكم في الجانب العلوي فقط وتغيير خصائصة مثل النوع واللون والسُمك (الحجم) عن طريق تخصيص الجانب العلوي [top].
CSS border top style

إضافة إطار للجانب العلوي عن طريق خاصية border-top-style في لغة CSS

p 
{
  border-top-style:dotted;
}
CSS border top color

خاصية border-top-color للتحكم في لون الإطار في لغة CSS.

p 
{
  border-top-style:dotted;
  border-top-color:red;
}
CSS border top width

خاصية border-top-width للتحكم في سُمك (حجم) الإطار في لغة CSS.

p 
{
  border-top-style:dotted;
  border-top-color:red;
  border-top-width:3px;
}

</> CSS border bottom side
الجانب السٌفلي للإطار في لغة CSS

يُمكن في لغة CSS التحكم في الجانب السُفلي فقط وتغيير خصائصة مثل النوع واللون والسُمك (الحجم) عن طريق تخصيص الجانب السٌفلي [bottom].
CSS border bottom style

إضافة إطار للجانب السُفلي عن طريق خاصية border-bottom-style في لغة CSS.

p 
{
  border-bottom-style:dotted;
}
CSS border bottom color

خاصية border-bottom-color للتحكم في لون الإطار في لغة CSS.

p 
{
  border-bottom-style:dotted;
  border-bottom-color:red;
}
CSS border bottom width

خاصية border-bottom -width للتحكم في سُمك (حجم) الإطار في لغة CSS.

p 
{
  border-bottom-style:dotted;
  border-bottom-color:red;
  border-bottom-width:3px;
}

</> CSS border left side
الجانب الأيسر للإطار في لغة CSS

يُمكن في لغة CSS التحكم في الجانب الأيسر فقط وتغيير خصائصه مثل النوع واللون والسُمك (الحجم) عن طريق تخصيص الجانب الأيسر [left].
CSS border left style

إضافة إطار للجانب الأيسر عن طريق خاصية border-left-style في لغة CSS.

p 
{
  border-left-style:dotted;
}
CSS border left color

خاصية border-left-color للتحكم في لون الإطار في لغة CSS.

p 
{
  border-left-style:dotted;
  border-left-color:red;
}
CSS border left width

خاصية border-left-width للتحكم في سُمك (حجم) الإطار في لغة CSS.

p 
{
  border-left-style:dotted;
  border-left-color:red;
  border-left-width:3px;
}

</> CSS border right side
الجانب الأيمن للإطار في لغة CSS

يُمكن في لغة CSS التحكم في الجانب الأيمن فقط وتغيير خصائصه مثل النوع واللون والسُمك (الحجم) عن طريق تخصيص الجانب الأيمن [right].
CSS border right style

إضافة إطار للجانب الأيمن عن طريق خاصية border-right-style في لغة CSS.

p 
{
  border-right-style:dotted;
}
CSS border right color

خاصية border-right-color للتحكم في لون الإطار في لغة CSS.

p 
{
  border-right-style:dotted;
  border-right-color:red;
}
CSS border right width

خاصية border-right-width للتحكم في سُمك (حجم) الإطار في لغة CSS.

p 
{
  border-right-style:dotted;
  border-right-color:red;
  border-right-width:3px;
}

</> CSS border four sides
الجوانب الأربعة للإطار في لغة CSS

يُمكن في لغة CSS التحكم في الجوانب الأربعة وإعطاء كل جانب لون مختلف وحجم مختلف ونوع مختلف.
CSS border four sides style

إضافة إطار للجوانب الأربعة في لغة CSS.

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

  border-top-color:red;
  border-bottom-color:blue;
  border-left-color:green;
  border-right-color:orange;

  border-top-width:3px;
  border-bottom-width:1px;
  border-left-width:5px;
  border-right-width:4px;
}
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات