كيف يعمل الوراثة CSS في مستندات الويب

جزء مهم من تصميم موقع على شبكة الإنترنت مع CSS هو فهم مفهوم الميراث.

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

ما هو الوراثة CSS؟

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

على سبيل المثال ، يحتوي رمز HTML أدناه على علامة H1 مرفقة بعلامة EM:

هذا عنوان كبير

عنصر EM هو عنصر من عنصر H1 ، وسيتم تمرير أي أنماط على H1 الموروثة إلى نص EM أيضًا. فمثلا:

h1 {font-size: 2em؛ }

نظرًا لأن خاصية حجم الخط موروثة ، فإن النص الذي يقول "كبير" (وهو ما يكون محاطًا بعلامات EM) سيكون بنفس حجم بقية H1. ويرجع ذلك إلى أنه يرث مجموعة القيمة في خاصية CSS.

كيفية استخدام المغلق الوراثة

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

أفضل طريقة لاستخدام هذا هو تعيين أنماطك الأساسية على عنصر عالي المستوى للغاية ، مثل BODY. إذا قمت بتعيين عائلة الخط الخاصة بك على خاصية body ، فبفضل الوراثة ، سيحتفظ المستند بأكمله بنفس عائلة الخط. سيؤدي ذلك بالفعل إلى استخدام أوراق أنماط أصغر يسهل التعامل معها لأن هناك أنماطًا عامة أقل. فمثلا:

الجسم {font-family: Arial، sans-serif؛ }

استخدم قيمة نمط الوراثة

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

body {margin: 1em؛ } p {margin: inherit؛ }

يستخدم الميراث القيم المحسوبة

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

إذا قمت بتعيين حجم خط يبلغ 1em على عنصر BODY ، فلن تكون صفحتك كلها بحجم 1em فقط. وذلك لأن عناصر مثل العناوين (H1-H6) وعناصر أخرى (بعض المتصفحات تحسب خصائص الجدول بشكل مختلف) لها حجم نسبي في مستعرض الويب. في حالة عدم وجود معلومات أخرى عن حجم الخط ، سيعمل متصفح الويب دائمًا على جعل العنوان H1 أكبر نص في الصفحة ، متبوعًا بـ H2 وهكذا. عندما تقوم بتعيين عنصر BODY إلى حجم خط معين ، فسيتم استخدامه كـ "حجم الخط" المتوسط ​​، ويتم حساب عناصر العنوان من ذلك.

ملاحظة حول الوراثة وخلفية الخصائص

هناك عدد من الأنماط المسرودة التي لم يتم توريثها في CSS 2 على W3C ، ولكن لا تزال متصفحات الويب ترث القيم. على سبيل المثال ، إذا كتبت HTML و CSS التاليين: