CSS Border Sides
جوانب الإطارات في لغة CSS
سوف تتعلم في هذا الدرس التحكم في جوانب الإطارات الأربع من حيث سُمك الإطار ولونة ونوعة ويمكن أن تُنشئ إطار بجوانب مٌختلفة في لغة CSS.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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 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 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 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 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 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;
}
جوانب
حد
حدود
عنصر
قيمة
يمين
أسفل
يسار
حد مزدوج
حد متقطع
حد عادي
حد متقطع
نمط أو شكل
أربعة
Cascading Style Sheets
صفحات الأنماط الانسيابية
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
