CSS

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

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

التاريخ

13 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1812

المواضيع

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

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

</> 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;
}
مصطلحات الدرس
Sides
Sides

جوانب

Borders
Borders

حدود

Element
Element

عنصر

Value
Value

قيمة

Right
Right

يمين

Bottom
Bottom

أسفل

Left
Left

يسار

Double
Double

حد مزدوج

Dotted
Dotted

حد متقطع

Solid
Solid

حد عادي

Dashed
Dashed

حد متقطع

Style
Style

نمط أو شكل

Four
Four

أربعة

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.