39. الوراثة والخصائص الموروثة

الوراثة (Inheritance) هي آلية حيوية أخرى في الـ Cascade. تنتقل بعض خصائص CSS تلقائياً من العنصر الأب إلى أحفاده عند تطبيقها عليه.

كيف تعمل الوراثة

إذا قمت بضبط color: red; على عنصر <body> ، فإن جميع عناصر النص (p و h1 و span وما إلى ذلك) داخل الجسم سترث هذا اللون بشكل طبيعي، ما لم تلغِ قاعدة أكثر تحديداً ذلك.

مثال:

html

هذا النص أخضر.

هذا النص أيضاً أخضر.

css body { color: green; }

الخصائص الموروثة بشكل شائع

الخصائص المتعلقة بالطباعة وعرض النص عادة ما يتم توريثها، حيث من المنطقي عادةً أن يبدو النص متسقاً:

color
font-family, font-size, font-weight, font-style
line-height
text-align
list-style

الخصائص غير الموروثة

الخصائص المتعلقة بنموذج الصندوق والتخطيط بشكل عام لا يتم توريثها، لأنه سيحدث فوضى إذا ورث كل طفل حشوة الأب أو هامشه أو حدوده.

width, height
padding, margin, border
background-color, background-image
display, position

إجبار الوراثة

يمكنك إخبار أي خاصية صراحة (حتى غير الموروثة) بأخذ قيمة الأب باستخدام الكلمة المحجوزة inherit.

css .child-box { border: inherit; /* إذا كان للأب حدود، سيستخدم الطفل نفس الحدود */ }