انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 36
دورة لغة CSS

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

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
6
الأمثلة
16
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
3,417
محتوى الدرس
في هذا الدرس 6تصفّح المواضيع

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.

HTML 
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.

HTML 
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.

HTML 
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

HTML 
p 
{
  border-top-style:dotted;
}
جرّب بنفسك
جرّب بنفسك

CSS border top color

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

HTML 
p 
{
  border-top-style:dotted;
  border-top-color:red;
}
جرّب بنفسك

CSS border top width

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

HTML 
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.

HTML 
p 
{
  border-bottom-style:dotted;
}
جرّب بنفسك

CSS border bottom color

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

HTML 
p 
{
  border-bottom-style:dotted;
  border-bottom-color:red;
}
جرّب بنفسك

CSS border bottom width

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

HTML 
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.

HTML 
p 
{
  border-left-style:dotted;
}
جرّب بنفسك

CSS border left color

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

HTML 
p 
{
  border-left-style:dotted;
  border-left-color:red;
}
جرّب بنفسك

CSS border left width

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

HTML 
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.

HTML 
p 
{
  border-right-style:dotted;
}
جرّب بنفسك

CSS border right color

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

HTML 
p 
{
  border-right-style:dotted;
  border-right-color:red;
}
جرّب بنفسك

CSS border right width

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

HTML 
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.

HTML 
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;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات14

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 14 مفهومةأول بطاقة، أول خطوة
01 Sides جوانب
للمراجعة
02 Border حد
للمراجعة
03 Borders حدود
للمراجعة
04 Element عنصر
للمراجعة
05 Value قيمة
للمراجعة
06 Right يمين
للمراجعة
07 Bottom أسفل
للمراجعة
08 Left يسار
للمراجعة
09 Double حد مزدوج
للمراجعة
10 Dotted حد متقطع
للمراجعة
11 Solid حد عادي
للمراجعة
12 Dashed حد متقطع
للمراجعة
13 Style نمط أو شكل
للمراجعة
14 Four أربعة
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات1

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 1 مفهومةأول بطاقة، أول خطوة
01 CSS CSS
Cascading Style Sheets
صفحات الأنماط الانسيابية
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

2أسئلة 2أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي2 أسئلة تنتظرك
01

ماهي الخاصية التي تستخدم في التحكم في الاطار من الناحية العلوية منفرده ؟

____
02

ماهي الخاصية التي تستخدم في التحكم في الاطار من الناحية السفلية منفرده ؟