انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 40
دورة لغة CSS

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

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
11
الأمثلة
12
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
2,733
محتوى الدرس
في هذا الدرس 11تصفّح المواضيع

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.

HTML 
outline-style:value;

outline-style values

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

HTML 
outline-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

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

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

CSS outline style with none

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

HTML 
p
{
 outline-style:none;
}
جرّب بنفسك

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

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

CSS outline style with dotted

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

HTML 
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.

HTML 
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.

HTML 
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.

HTML 
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.

HTML 
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.

HTML 
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.

HTML 
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.

HTML 
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.

HTML 
p
{
 outline-style:hidden;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…