أساسيات لغة CSS | الدرس 22 (التوارث)

 بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

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

كما هو معلوم علاقة عناصر html داخل بعضها البعض هي علاقة آباء Parents مع أبناء Childs ، وبالتالي هناك خصائص css يتم توارثها من الآباء إلى الأبناء ، وأخرى لا يتم توارثها ، ولأخذ فكرة أولية عن الموضوع إليك هذا المثال التوضيحي :

 كما تلاحظ الديف parent يعتبر أب للعناصر h3 و الديف child وكذلك p ، والآن سنعطي تنسيقات للديف الأب :

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

 وكما ترى العنصر h3 والفقرة p توارثتا قيم الخصائص التالية:
font-family
font-size
color
والديف child توارث قيم :
width
background
سنقوم الآن بتنسيق الديف child :

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

 وكما تلاحظ الديف child الواضح الآن بفضل خلفيته الخضراء ، توارث قيمة width ولم يتوارث قيمة الخاصية height .
سنضيف الآن padding و margin للديف parent لنرى ما سيحدث:

والنتيجة:

 ويتضح هنا أن الديف child توارث قيمة margin ولم يتوارث قيمة padding .
وتوجد طريقة في لغة css لإجبار عنصر على توارث خاصية لا يتوارثها عادة ، وهي كتابة الخاصية مع القيمة inherit ، سنجرب ذلك مع الخاصية padding :

والنتيجة هذه المرة:

وهكذا أجبرنا الديف child على توارث قيمة padding التابعة لأبيه الديف parent .

معرفة الخصائص التي تورث والتي لا تورث يرجع لتجربتك الخاصة ، فيمكنك مع الوقت معرفة المزيد منها ، وكيفية التعامل معها.

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

دمتم في رعاية الله تعالى ، وموعدنا في درس قادم عنا قريب.