CSS

CSS Outline style
تحديد نوع الإطار الخارجي outline في لغة CSS

سوف تتعلم في هذا الدرس التحكم في شكل أو نوع outline الإطار بإستخدام خاصية outline-style في لغة CSS.

التاريخ

07 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

904

المواضيع

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

CSS outline style
تحديد نوع الإطار الخارجي outline في لغة CSS

</> CSS outline style
تحديد نوع الإطار الخارجي outline في لغة CSS

خاصية outline-style في لغة CSS تُستخدم لتُحدد شكل أو نوع outline الإطار الخارجي من الاربع جوانب [left-right-top-bottom] وهي الوحيدة المطلوبة لعمل outline إطار خارجي دون أي خاصية أخري ويظهر outline الإطار الخارجي بشكلة الأفتراضي ولونة الأفتراضي وحدمة الأفتراضي.


قيم خاصية outline-style في لغة CSS:

  • dotted لعمل outline مُنقط.
  • dashed لعمل outline مكون من علامه ال dash -.
  • solid لعمل outline بخط رفيع.
  • double لعمل outline مزدوج.
  • groove لعمل outline 3D.
  • ridge لعمل outline 3D.
  • inset لعمل outline 3D. 
  • outset لعمل outline 3D. 
  • none  لإلغاء ال outline.
  • hidden لعمل outline مخفي.
outline-style syntax

طريقة كتابة خاصية outline-style في لغة CSS.

outline-style:value;
outline-style values

قيم خاصية outline-style في لغة CSS.

outline-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
مهم
تعمل خاصية outline-style مٌنفردة دون الحاجة إلي أي خاصية أخري حتي يظهر outline الإطار الخارجي في لغة CSS.

</> CSS outline style with none
خاصية outline-style مع القيمة none في لغة CSS

تُستخدم خاصية outline-style مع القيمة none وهي القيمة الأفتراضية وهي أن يكون العنصر بدون إطار خارجي.
CSS outline style with none

خاصية outline-style والقيمة none في لغة CSS.

p
{
 outline-style:none;
}
ملاحظة
لا يظهر الإطار مع خاصية outline-style والقيمة none وهو الوضع الأفتراضي بدونها لا يظهر outline.

</> CSS outline style with dotted
خاصية outline-style مع القيمة dotted في لغة CSS

تُستخدم خاصية outline-style مع القيمة dotted لعمل إطار خارجي للعنصر ويتكون من علامة أو رمز dot نقة [.....].
CSS outline style with dotted

خاصية outline-style والقيمة dotted في لغة CSS.

p
{
 outline-style:dotted;
}

</> CSS outline style with dashed
خاصية outline-style مع القيمة dashed في لغة CSS

تُستخدم خاصية outline-style مع القيمة dashed لعمل إطار خارجي للعنصر ويتكون من علامة أو رمز dash علامة minus سالب [-].
CSS outline style with dashed

خاصية outline-style والقيمة dashed في لغة CSS.

p
{
 outline-style:dashed;
}

</> CSS outline style with solid
خاصية outline-style مع القيمة solid في لغة CSS

تُستخدم خاصية outline-style مع القيمة solid لعمل إطار خارجي للعنصر ويكون خط مستقيم متشابك صلب.
CSS outline style with solid

خاصية outline-style والقيمة solid في لغة CSS.

p
{
 outline-style:solid;
}

</> CSS outline style with double
خاصية outline-style مع القيمة double في لغة CSS

تُستخدم خاصية outline-style مع القيمة double لعمل إطار خارجي للعنصر ويكون إطار مزدوج مٌكرر.
CSS outline style with double

خاصية outline-style والقيمة double في لغة CSS.

p
{
 outline-style:double;
}

</> CSS outline style with groove
خاصية outline-style مع القيمة groove في لغة CSS

تُستخدم خاصية outline-style مع القيمة groove لعمل إطار خارجي للعنصر ويكون إطار ثلاثي الأبعاد 3d.
CSS outline style with groove

خاصية outline-style والقيمة groove في لغة CSS.

p
{
 outline-style:groove;
}

</> CSS outline style with ridge
خاصية outline-style مع القيمة ridge في لغة CSS

تُستخدم خاصية outline-style مع القيمة ridge لعمل إطار خارجي للعنصر ويكون إطار ثلاثي الأبعاد 3d.
CSS outline style with ridge

خاصية outline-style والقيمة ridge في لغة CSS.

p
{
 outline-style:ridge;
}

</> CSS outline style with inset
خاصية outline-style مع القيمة inset في لغة CSS

تُستخدم خاصية outline-style مع القيمة inset لعمل إطار خارجي للعنصر ويكون إطار ثلاثي الأبعاد 3d داخلي.
CSS outline style with inset

خاصية outline-style والقيمة inset في لغة CSS.

p
{
 outline-style:inset;
}

</> CSS outline style with outset
خاصية outline-style مع القيمة outset في لغة CSS

تُستخدم خاصية outline-style مع القيمة outset لعمل إطار خارجي للعنصر ويكون إطار ثلاثي الأبعاد 3d بارز للخارج.
CSS outline style with outset

خاصية outline-style والقيمة outset في لغة CSS.

p
{
 outline-style:outset;
}

</> CSS outline style with hidden
خاصية outline-style مع القيمة hidden في لغة CSS

تُستخدم خاصية outline-style مع القيمة hidden لعمل إطار خارجي خفي يشبه القيمة none.
CSS outline style with hidden

خاصية outline-style والقيمة hidden في لغة CSS.

p
{
 outline-style:hidden;
}
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

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

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