CSS Border Shorthand
إختصار خصائص border في لغة CSS
سوف تتعلم في هذا الدرس إختصار جميع خصائص [ border-size-border-style-border-width ] border في خاصية واحدة وهي border بإستخدام لغة CSS.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
CSS Shorthand Border
إختصار خصائص border في لغة CSS
</>
CSS Shorthand Border
إختصار خصائص border في لغة CSS
تُستخدم خاصية border للإستغناء عن جميع خصائص borders لكي يتم إختصار مجموعة سطورة في سطر واحد فقط وكتابة خاصية بدلاً من مجموعة خصائص ليكون حجم ملف CSS في النهاية أقل حجماً مما يًساعد علي سرعة موقع الويب.
الخصائص التي تم إختصارتها في خاصية border:
- border-style (ضروري ليظهر الإطار) نوع الإطار.
- border-width سُمك (حجم) الإطار.
- border-color لون الإطار.
قيم خاصية border في لغة CSS:
- type قيمة النوع.
- color قيمة اللون.
- width قيمة العرض.
CSS border syntax
border:value;
border values
قيم خاصية border في لغة CSS.
border:border-style border-color border-width|initial|inherit;
ملاحظة
- يتم الفصل بين كل قيمة ويمة من قيم خاصية border بعلامة المسافة space.
- الترتيب ليس أمراً ضرورياً بداخل خاصية border بين قيمة النوع والسُمك واللون يمكنك ترتيبهم بأي شكل.
</>
CSS border Property
خاصية border في لغة CSS
تُستخدم خاصية border في لغة CSS لاختصار جميع الخصائص [border-style,border-color,border-width] في خاصية واحدة وهي border ويتم إضافة جميع قيم الخصائص في خاصية border كقيمة واحدة بشكل متتالي ونفصل بين القيم بمسافة space.
لماذا نستخدم خاصية border؟
- لاختصار عدّة سطور في سطر واحد، مما يقلل من حجم ملف CSS، وبالتالي ينعكس ذلك بشكل إيجابي على أداء سرعة موقع الويب.
- كلما كان حجم أوامر CSS أصغر كانت عملية إصلاح الأوامر أسهل.
- استخدام خاصية border يساعد المطورين في قراءة الأوامر بشكل أسهل.
CSS Shorthand Border Property
خاصية border في لغة CSS.
p
{
border: 5px solid red;
}
</>
CSS border side shorthand
إختصار جوانب border في لغة CSS
يمكن اختصار أيضاً خصائص جوانب الإطارات في لغة CSS في خاصية واحدة فمثلاً بدلاً من كتابة [border-left-style,border-left-color,border-left-width] يمكن اختاصرهم بخاصية واحدة وهي border-left ونكتب جميع القيم بداخلها وهذا ينطبق علي جميع الجوانب [left-right-top-bottom].
CSS Border left shorthand
إختصار خصائص border left في لغة CSS.
p
{
border-left: 5px solid red;
}
CSS Border right shorthand
إختصار خصائص border right في لغة CSS.
p
{
border-right: 5px solid red;
}
CSS Border top shorthand
إختصار خصائص border top في لغة CSS.
p
{
border-top: 5px solid red;
}
CSS Border bottom shorthand
إختصار خصائص border bottom في لغة CSS.
p
{
border-bottom: 5px solid red;
}
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
