فاصلة
  • CSS
  • ?
    : ترتيب الدرس
  • 13
    عدد الدروس
  • ?
    أخر تحديث

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

خاصية ouline لأضافة حدود غير محسوبة مع الحجم الحقيقي للعنصر ,ولمعرفة الحجم الحقيقي للعنصر والحجم الغير حقيقي يجب ان تكون قرأت درس box Model ,وهو الدرس المسؤول عن معرفة الحجم الحقيقي للعنصر بعد حساب الحدود والهوامش الداخلية والخارجية والحجم الاساسي للعنصر ,ولكن خاصية outline لا يتم أحتسابها للحجم الحقيقي للعنصر ,بحيث لو افترضانا وجود عنصر حجمة الاساسي هو 100*100 وقمنا بأعطائة حدود 20  وهامش داخلي 20 وهامش خارجي 20 , في تلك الحالة , الحجم الحقيقي للعنصر يساوي مجموع الخواص السابقة = 100 + 20 + 20+ 20  = 160

الفرق بين outline و Border

خاصية الــ Outline  لا يتم احتسابها علي قيمة الحجم الحقيقي للعنصر في حالة اضافتها ,لو افترضنا وجود عنصر حجمة الاساسي هو 100*100 ,وقمنا بأضافة خاصية الــ Ouline واعطيناها 20px , في تلك الحالة سيظل الحجم الحقيقي للعنصر هو 100*100 نتيجة استخدام الخاصية outline , ولكن لو أستخدمنا الخاصية Border يزيد حجم العنصر ببقدار القمية الخاصة بة

قم بالنظر الي الشكل رقم 1 هو مربع حجمة الاساسي هو 50*50 وقمنا بأعطاءة حدود 20px وهامش داخلي 20px

الحجم الحقيقي للعنصر = 50 + 20 + 20 = 90

الشكل رقم 2 هو مربع حجمة الأساسي 50*50 وقمنا بأعطاءة حدود 20px وهامش داخلي 20px وحدود غير محسوبة من حجم العنصر outline بقيمة 20

الحجم الحقيقي للعنصر = 50+50+20 = 90

الشكل رقم 3 هو عنصر حجمة الاساسي هو 50*50  وقمنا بأعطاءة حدود غير محسوبة outline بقيمة 20px

الحجم الحقيقي للعنصر = 50 فقد

 

1
2
3

 

في حالة نظرت الي الأشكال بشكل جيد ,سوف تري بأن الحدود السوداء Outline للشكل الثاني والثالث متداخلة مع بعضها والشكل الثاني متداخل مع الشكل الاول  ,وهذا ما نقصد بة بأن الحدود الغير محسوبة outline تأخذ من مساحة الصفحة وليس من مساحة العنصر , والان قم بالنظر للشكل مرة اخري ولكن لا تنظر للحدود السوداء وقم بالنظر بشكل يوحي بعدم وجود الحدود السوداء سوف تجد العناصر مرتبة بجانب بعضها كما في الاشكال التالية

4
5
6

ولهذا لا يتم احتساب الحدود outline من الحجم الحقيقي للعنصر , لأنها لو كانت من الحجم الحقيقي للعنصر كانت الأشكال سوف تظهر كما هي  موجودة في الشكل 4 5 6 . 


الأوامر الخاصة بالــ outline

الاوامر الخاصة بالحدود الغير محسوبة Outline هي تماماً مثل اوامر الحدود العادية ولكن يتم تغيير كلمة واحدة فقد بدلاً من border نقوم بكتابة outline كما في الأمثلة التالية

;	border : solid 10px red 
;	outline : solid 10px red

 

أساسيات التضمين الألوان الخلفيات الحدود الهوامش الهوامش الداخلية العرض والأرتفاع الصناديق حدود خارجية النصوص الخطوط الأيقونات