CSS Outline Shorthand
إختصار خصائص outline في لغة CSS
سوف تتعلم في هذا الدرس إختصار جميع خصائص outline [ border-size-border-style-border-width ] في خاصية واحدة وهي outline بإستخدام لغة CSS.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
CSS Outline Shorthand
إختصار خصائص outline في لغة CSS
</>
CSS Shorthand outline
إختصار خصائص outline في لغة CSS
تُستخدم خاصية outline للإستغناء عن جميع خصائص outline لكي يتم إختصار مجموعة سطورة في سطر واحد فقط وكتابة خاصية بدلاً من مجموعة خصائص ليكون حجم ملف CSS في النهاية أقل حجماً مما يًساعد علي سرعة موقع الويب.
الخصائص التي تم إختصارتها في خاصية outline:
- outline-style (ضروري ليظهر الإطار) نوع الإطار.
- outline-width سُمك (حجم) الإطار.
- outline-color لون الإطار.
قيم خاصية outline في لغة CSS:
- type قيمة النوع.
- color قيمة اللون.
- width قيمة العرض.
CSS outline syntax
طريقة كتابة خاصية outline في لغة CSS.
outline:value;
outline values
قيم خاصية outline في لغة CSS.
outline:border-style border-color border-width|initial|inherit;
ملاحظة
- يتم الفصل بين كل قيمة وقيمة من قيم خاصية outline بعلامة المسافة space.
- الترتيب ليس أمراً ضرورياً بداخل خاصية outline بين قيمة النوع والسُمك واللون يمكنك ترتيبهم بأي شكل.
- لا تعمل خاصية outline-offset مع إختصار outline في لغة CSS.
</>
CSS outline Property
خاصية outline في لغة CSS
تُستخدم خاصية outline في لغة CSS لاختصار جميع الخصائص [border-style,border-color,border-width] في خاصية واحدة وهي outline ويتم إضافة جميع قيم الخصائص في خاصية border كقيمة واحدة بشكل متتالي ونفصل بين القيم بمسافة space.
لماذا نستخدم خاصية outline؟
- لاختصار عدّة سطور في سطر واحد، مما يقلل من حجم ملف CSS، وبالتالي ينعكس ذلك بشكل إيجابي على أداء سرعة موقع الويب.
- كلما كان حجم أوامر CSS أصغر كانت عملية إصلاح الأوامر أسهل.
- استخدام خاصية outline يساعد المطورين في قراءة الأوامر بشكل أسهل.
CSS Shorthand outline Property
خاصية outline في لغة CSS.
p
{
outline: 5px solid red;
}
</>
CSS outline with offset
خاصية outline مع خاصية outline-offset في لغة CSS
CSS outline with offset
خاصية outline مع خاصية outline-offset في لغة CSS.
p
{
outline: 1px solid red;
outline-offset:15px;
border: 1px solid blue;
}
حدود عريضة خارجية
إختصار
خصائص
خاصية
عرض
نمط أو شكل
مطلوب
لون
Cascading Style Sheets
صفحات الأنماط الانسيابية
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
