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

الفارق بين outline و border في لغة CSSCSS Outline Offset

ستتعلم في هذا الدرس عمل مساحات داخلية بين outline وبين border داخل حدود العنصر  والتحكم في حجم هذة المساحات في لغة CSS.

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

CSS Outline Offset الفارق بين outline و border في لغة CSS

تُستخدم خاصية outline-offset في إضافة مساحات فارغة بين outline وبين border لأي عنصر والمساحات التي بين outline وبين border شفافة.


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

  • length وهي تحديد المساحة بوحدات [px-em-rem-cm-%] والقيمة الأفتراضية هي 0.

outline-offset syntax

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

HTML 
outline-offset:value;

outline-offset values

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

HTML 
outline-offset:length|initial|inherit;

CSS outline offset property خاصية outline-offset في لغة CSS

تًستخدم خاصية outline-offset في لغة CSS لعمل مساحات فارغة بين outline وبين border في لغة CSS والقيمة الأفتراضية هي 0.

CSS outline offset

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

Result

جرّب بنفسك

CSS outline offset

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

HTML 
p 
{
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}
جرّب بنفسك

CSS outline transparent offset خاصية outline-offset تخلق مساحات شفافة في لغة CSS

المساحةبين outline وبين border هي مساحة شفافة ولا يمكن تغيير لونها في لغة CSS إلا في حالة واحده وهي أن يكون للعنصر الأب parent لون فسوف يكون لها نفس لون الأب.

CSS outline transparent offset

HTML 
p
{
  background:yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}
جرّب بنفسك

مشاركة

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

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

ابنِ لغتك البرمجية

المصطلحات5

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 5 مفهومةأول بطاقة، أول خطوة
01 Outline حدود عريضة خارجية
للمراجعة
02 Offset إلتواء
للمراجعة
03 Border حد
للمراجعة
04 Property خاصية
للمراجعة
05 Transparent شفافية
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات1

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 1 مفهومةأول بطاقة، أول خطوة
01 CSS CSS
Cascading Style Sheets
صفحات الأنماط الانسيابية
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

1أسئلة 1أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي1 أسئلة تنتظرك
01

في ماذا تستخدم خاصية outline-offset ؟