CSS

CSS Outline Shorthand
إختصار خصائص outline في لغة CSS

سوف تتعلم في هذا الدرس إختصار جميع خصائص outline [ border-size-border-style-border-width ] في خاصية واحدة وهي  outline بإستخدام لغة CSS.

التاريخ

14 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1406

المواضيع

24
الشروحات chevron_left CSS Outline Shorthand chevron_left CSS
CSS Flex Box keyboard_arrow_down

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

يجب إستخدام خاصية outline-offset مع خاصية outline لعمل مساحات بين outline وبين border في لغة css لأن إختصار offset لا يعمل مع خاصية outline.
CSS outline with offset

خاصية outline مع خاصية outline-offset في لغة CSS.

p
{
  outline: 1px solid red;
  outline-offset:15px;
  border: 1px solid blue;
}
مصطلحات الدرس
Outline
Outline

حدود عريضة خارجية

Shorthand
Shorthand

إختصار

Properites
Properites

خصائص

Property
Property

خاصية

Width
Width

عرض

Style
Style

نمط أو شكل

Required
Required

مطلوب

Color
Color

لون

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

Cascading Style Sheets

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

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

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