القائمة الرئيسية

الصفحات

خاصية outline في لغة سى اس اس CSS

خاصية outline في CSS


الإطار الخارجي Outline هو خط خارجي حول العناصر (خارج الحدود) لجعل العنصر "بارزًا".
تحدد خاصية outline-style نمط الإطار الخارجي.


خاصية outline في CSS
ملاحظات
الإطار الخارجي هو خط حول عنصر. يتم عرضه حول هامش العنصر. ومع ذلك ، فهو يختلف عن خاصية الحدود(border).

لا يعد الإطار الخارجي جزءاً من أبعاد العنصر ، وبالتالي فإن خصائص عرض العنصر وإرتفاعه لا تحتوي على عرضه.

قيم خاصية Outline


القيمة                       الوصف
بلا تحديد (none):      لا يوجد مخطط تفصيلي. هذا هو الإعداد الافتراضي .

مخفي (hidden):       يحدد مخططًا مخفيًا .

منقط(dotted):          يحدد مخططًا منقطًا  .

متقطع (dashed):      يحدد مخططًا متقطعًا .

صلب (solid):          يحدد مخططًا صلبًا  .

مزدوج(double):      يحدد الخط الخارجي المزدوج .

groove:                 يحدد مخططًا محززًا ثلاثي الأبعاد يعتمد على قيمة لون المخطط.

ridge:                    يحدد مخطط تفصيلي ثلاثي الأبعاد يعتمد على قيمة لون المخطط. 

inset:                     يحدد مخطط داخلي ثلاثي الأبعاد يعتمد على قيمة لون المخطط.
 
outset:                   يحدد مخطط خارجي ثلاثي الأبعاد يعتمد على قيمة لون المخطط.
 
أولي(initial):           يضبط هذه الخاصية على قيمتها الافتراضية.

inherit:                  تضمين هذه الخاصية من عنصرها الأصلي.

توضح الأمثله التالية قيم الاطار المختلفة:
خاصية outline في CSS

خاصية لون الإطارoutline-color


يتم إستخدام خاصية لون الاطار(outline-color) لتعيين لون الإطار.
يمكن ضبط اللون من خلال:

الإسم (name)- تحدد خاصية إسم اللون أي لون نختاره للإطار الخارجي ، مثل "gold purple" .

RGB:تحدد قيمة RGB  نسبة من (الاحمرالاخضرالازرق)مثل"(rgb (255،0،0"

سداسي عشري(HEX) - حدد قيمة سداسية عشرية ، مثل "# ff0000"

عكس (invert)- ينفذ إنعكاس اللون (مما يضمن أن يكون المخطط التفصيلي مرئيًا ، بغض النظر عن لون الخلفية).

مثال للألوان المختلفة.
خاصية اوت لاين فى سي اس اس

خاصية عرض الإطار (outline width)


يوجد خاصية عرض الإطار (outline width)،ويمكن أن تحتوي على إحدى القيم التالية:

رفيع (عادةً 1 بكسل) 1px
متوسط (عادةً 3 بكسل) 3px
سميك (عادةً 5 بكسل) 5px
حجم معين (بوصة (in)،بكسل(px) ، نقطة(dot) ، سم(cm)  )
مثال للعروض المختلفة:

خاصية عرض الإطار فى سي اس اس

خاصية إزاحة الإطار الخارجي

تضيف خاصية إزاحة الإطار الخارجي مسافة للخارج.وتكون المسافة بين العنصر وإطاره الخارجية شفافة.

يحدد المثال أدناه اطار خارجي  15px  خارج  الحد:
خاصية إزاحة الاطار الخارجي فى css

جميع خصائص CSS Outline


الخاصية                 الوصف
outline                هي خاصية لتحديد عرض الاطار الخارجي 
                            ونمطه ولونه في كود واحد
outline-color       يضبط لون الاطار الخارجي
outline-offset      يحدد المسافة بين الاطار الخارجي وحافة أو حد عنصر
outline-style        يعيّن نمط الاطار الخارجي
outline-width      يضبط عرض الاطار الخارجي


reaction:

تعليقات