كيف تعمل الوراثة (Inheritance) في CSS بشكل عام؟
نظريتُعد "الوراثة" (Inheritance) مفهوماً أساسياً في CSS، حيث تحدد كيفية انتقال الأنماط من العناصر الأب (parent elements) إلى العناصر الابنة (child elements) التابعة لها.
تماماً كما هو الحال في العالم الحقيقي، حيث غالباً ما يرث الأطفال سماتٍ من والديهم، يمكن في CSS لعناصر فرعية (child elements) أن ترث خصائصَ معينةً (certain properties) من العناصر الأصلية (parent elements).
يتيح ذلك طريقةً أكثر كفاءةً لتطبيق تنسيقٍ متسقٍ على المستند بأكمله.
في CSS، لا تُورَث جميع الخصائص (all properties) بشكل افتراضي (by default). فعلى سبيل المثال، تُورَث خصائص مثل color و font-family و line-height. وهذا يعني أنه إذا قمت بتحديد لون النص لعنصر أب (parent element)، فإن جميع العناصر التابعة له سترث ذلك اللون ما لم تقم بتغييره (تجاوزه) بشكل صريح.
على سبيل المثال، لننظر في الحالة التالية التي يتم فيها تحديد لون عنصر div باستخدام نمط مضمّن (inline style)، ويرث العنصر الابن p ذلك اللون:
<div style="color: blue;">
هذا هو العنصر الأب.
<p>هذا هو العنصر الابن الذي يرث اللون.</p>
</div>
معاينة:
هذا هو العنصر الابن الذي يرث اللون.
في هذه الحالة، سيعرض كل من العنصر الأب div والعنصر الابن p النص باللون الأزرق؛ لأن اللون يُورَّث (the color is inherited).
من ناحية أخرى، لا يتم توريث خصائص مثل الهوامش margin والهوامش الداخلية padding والحدود border والخلفية background بشكل افتراضي. وإذا أردت أن يرث عنصر فرعي هذه الأنماط (styles)، فيجب عليك تحديدها صراحةً، سواءً مباشرةً على العنصر الفرعي نفسه أو باستخدام الكلمة المفتاحية (inherit keyword).
يمكن استخدام الكلمة المفتاحية inherit لفرض وراثة خاصية ما من العنصر الأب (parent element)، حتى وإن كانت تلك الخاصية لا تُورَّث عادةً.
على سبيل المثال، إذا أردت أن يكون لعنصر فرعي محدد نفس مقدار الهامش الداخلي padding الخاص بالعنصر الأب، يمكنك تعيين padding: inherit للعنصر الفرعي:
<div style="padding: 20px;">
هذا هو العنصر الأب الذي يحتوي على هامش داخلي.
<p style="padding: inherit;">هذا هو العنصر الابن الذي يرث الهامش الداخلي.</p>
</div>
معاينة:
هذا هو العنصر الابن الذي يرث الهامش الداخلي.
في هذه الحالة، سيرث العنصر الابن p قيمة الهامش الداخلي padding البالغة 20px من العنصر الأب div.
تُعد خاصية التوريث (Inheritance) مفيدة بشكل خاص للحفاظ على الاتساق وتقليل التكرار في ملفات الأنماط الخاصة بك.
بدلاً من كتابة قاعدة التنسيق نفسها لعناصر متعددة، يمكنك تعريفها مرة واحدة على عنصر أب (parent element)، وستقوم العناصر الابنة (child elements) بوراثتها (inherit it)؛ مما يجعل كود CSS أكثر إيجازاً وأسهل في الإدارة.
ومع ذلك، من المهم تذكر أن التوريث (inheritance) يعمل في اتجاه واحد فقط: من العنصر الأب إلى العنصر الابن. فإذا قمت بتجاوز (override) نمطٍ ما في عنصر ابن، فلن يؤثر ذلك على العنصر الأب.
أسئلة :
أي من خصائص CSS التالية تُورَّث عادةً بشكل افتراضي؟
1. padding ❌
2. border ❌
3. color ✅
4. background ❌
ما هي الكلمة المفتاحية التي يمكن استخدامها لإجبار عنصر فرعي (child element) على وراثة خاصية (inherit a property) من العنصر الأب (parent element) ؟
1. default ❌
2. inherit ✅
3. initial ❌
4. none ❌
بناءً على كود CSS التالي، ما هو لون نص العنصر span الموجود داخل العنصر p ؟
<head>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>
هذا
<span>اختبار</span>
</p>
</body>
1. blue ✅
2. red ❌
3. green ❌
4. black ❌