وسم Outline في CSS | ستايلات CSS


يتم استخدام وسم Outline في CSS لتحديد نمط ولون وعرض مخطط تفصيلي. في هذا الدرس، سنناقش كيفية استخدام هذه الصفة.


المخطط التفصيلي هو خط مرسوم حول عنصر (خارج حدود هذا العنصر). ومع ذلك، تختلف سمة المخطط التفصيلي عن سمة الحدود. لا يعد المخطط التفصيلي عنصرًا في عنصر ولن يتغير مجموع طول وعرض العنصر بإضافة سمة المخطط التفصيلي إليه. 

يحدد الشكل التالي موقع سمة المخطط التفصيلي في عنصر:


الخطوط العريضة


تصميم سمة المخطط التفصيلي

يتم استخدام سمة نمط المخطط التفصيلي لتصميم مخطط تفصيلي.

يمكن أن تحتوي سمة نمط المخطط التفصيلي على إحدى القيم التالية:

  ● منقط : مخطط تفصيلي بنمط منقط
  ● متقطع : مخطط بنمط خط متقطع
  ● صلب : مخطط تفصيلي بنمط خط مستقيم
  ● مزدوج : مخطط تفصيلي بنمطي خط مستقيم
  ● الأخدود : مخطط ثلاثي الأبعاد بنمط مخدد. يعتمد نوع التأثير على قيمة سمة لون المخطط
  ● ريدج : مخطط تفصيلي ثلاثي الأبعاد بنمط ريدج. يعتمد نوع التأثير على قيمة سمة لون المخطط.
  ● أقحم : مخطط تفصيلي ثلاثي الأبعاد بنمط داخلي. يعتمد نوع التأثير على قيمة سمة لون المخطط.
  ● البداية : مخطط تفصيلي ثلاثي الأبعاد بنمط خارجي. يعتمد نوع التأثير على قيمة سمة لون المخطط.
  ● لا شيء : لا مخطط تفصيلي
  ● مخفي : مخطط مخفي

في المثال التالي، يتم وضع حد أسود رفيع في الاعتبار أولاً لكل عنصر <p>، ثم يتم استخدام أنماط مخطط تفصيلي مختلفة لكل عنصر فقرة:


p {
border: 1px solid black;
outline-color: red;
}

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

وستكون النتيجة كالتالي:

   مخطط بنمط نقطة.

   مخطط بنمط خط متباعد.

   مخطط بأسلوب خط مستقيم.

   مخطط تفصيلي بنمطي خط مستقيم.

   مخطط ثلاثي الأبعاد بأسلوب مخدد.

   مخطط ثلاثي الأبعاد بنمط ريدج.

   مخطط تفصيلي ثلاثي الأبعاد بنمط داخلي.

   مخطط ثلاثي الأبعاد بنمط خارجي.

صفة لون المخطط التفصيلي 

تُستخدم سمة لون المخطط التفصيلي لتعيين لون المخطط التفصيلي.

يمكن تعيين لون المخطط التفصيلي بإحدى القيم التالية:


  ● الاسم - اسم صالح للون مثل "أحمر"
  ● RGB - قيمة RGB - مثل "(rgb (255،0،0")
  ● HEX - قيمة سداسية عشرية - مثل "ff0000 #"

p {
border: 1px solid black;
outline-style: double;
outline-color: red;
}
ستكون النتيجة كما يلي:

   مخطط ملون.

 


سمة عرض المخطط التفصيلي

تحدد سمة العرض التفصيلي عرض المخطط التفصيلي. يمكن تحديد عرض المخطط التفصيلي بأحجام معينة (بكسل، سنتيمترات، إلخ) أو يمكن تعيينه بواحدة من ثلاث قيم محددة مسبقًا: رفيع، متوسط ​​، سميك

p {border: 1px solid black;}

p.one {
outline-style: double;
outline-color: red;
outline-width: thick;
}

p.two {
outline-style: double;
outline-color: green;
outline-width: 3px;
}
ستكون النتيجة كما يلي:

   مخطط سميك.

   رقيقة.

 

مخطط تفصيلي - صفة مختصرة

للاختصار في الكود، من الممكن دمج كل السمات المذكورة للمخطط التفصيلي في سمة واحدة. هذه السمات هي:

           ● عرض المخطط التفصيلي
           ● نمط المخطط التفصيلي (إلزامي)
           ● لون المخطط التفصيلي


p {
border: 1px solid black;
outline: 5px dotted red;
}
ستكون النتيجة كما يلي:

   مخطط.

 



كلمات مفتاحية: