چگونه وراثت CSS در اسناد وب کار می کند

بخش مهمی از یک ظاهر طراحی وب سایت با CSS، درک مفهوم وراثت است.

وراثت CSS به طور خودکار توسط سبک مورد استفاده مورد استفاده قرار می گیرد. هنگامی که شما به رنگ پس زمینه رنگ اموال نگاه می کنید، بخش هایی با عنوان "به ارث بردن" را خواهید دید. اگر شما مانند بسیاری از طراحان وب هستید، شما این بخش را نادیده گرفتهاست، اما هدفش خدمت رسانی است.

وراث CSS چیست؟

هر عنصر در یک سند HTML بخشی از یک درخت است و هر عنصر به جز عنصر اولیه دارای یک عنصر parent است که آن را محصور می کند. هر سبک که به آن عنصر والد اعمال می شود می تواند به عناصر محصور شده در آن اعمال شود، اگر خواص آنهایی باشند که می توانند به ارث برده شوند.

به عنوان مثال، این کد زیر یک تگ H1 را دربر می گیرد که تگ EM را محصور می کند:

این بزرگ سرصفحه است

عنصر EM یک کودک از عنصر H1 است، و هر سبک در H1 که به ارث برده می شود به متن EM نیز منتقل می شود. مثلا:

h1 {font-size: 2em؛ }

از آنجا که ویژگی font-size به ارث برده می شود، متن که می گوید "بزرگ" (که درون تگ های EM محصور شده است) همان اندازه باقی مانده از H1 خواهد بود. این به این دلیل است که مقدار تعیین شده در خصوص CSS به ارث برده است.

نحوه استفاده از وراث CSS

ساده ترین راه استفاده از آن این است که با خواص CSS آشنا شوید که به ارث برده نمی شوند. اگر ملک به ارث برده شود، شما می دانید که مقدار برای هر عنصر کودک در سند باقی خواهد ماند.

بهترین روش برای استفاده از این است که سبک های پایه خود را بر روی عنصر بسیار بالا مانند BODY تنظیم کنید. اگر خانواده فونت خود را بر روی مالکیت بدن تنظیم کنید، پس، به لطف وراثت، کل سند همان فونت خانواده را حفظ خواهد کرد. این در واقع سبدهای سبک کوچکتر است که برای مدیریت آسان تر است چرا که سبک کلی کمتر وجود دارد. مثلا:

body {font-family: Arial، sans-serif؛ }

از ارزش سبک درختی استفاده کنید

هر ویژگی CSS شامل مقدار "به ارث بردن" به عنوان یک گزینه ممکن است. این به مرورگر وب می گوید که حتی اگر ملک به طور معمول به ارث برده نشود، باید همان مقدار را با پدر و مادر داشته باشد. اگر شما یک سبک مانند حاشیه ای را به ارث برده اید، می توانید از مقدار ارث در خواص بعدی استفاده کنید تا حاوی همان حاشیه به عنوان والدین باشد. مثلا:

body {margin: 1em؛ } p {حاشیه: به ارث برده؛ }

به ارث بردن از ارزش های محاسبه شده استفاده می کند

این برای مقادیر ارثی مانند اندازه فونت که از طول استفاده می کند اهمیت دارد. یک مقدار محاسبه ارزش است که نسبت به مقدار دیگری در صفحه وب است.

اگر فونت اندازه 1em را در عنصر BODY خود تنظیم کنید، کل صفحه شما تنها 1 در اندازه نخواهد بود. این به این دلیل است که عناصری مانند عنوان (H1-H6) و عناصر دیگر (برخی از مرورگرها خواص جدول را به صورت های مختلف محاسبه می کنند) دارای اندازه نسبی در مرورگر وب هستند. در غیاب اطلاعات دیگر اندازه فونت، مرورگر وب همیشه یک عنوان H1 بزرگترین متن را در صفحه ایجاد می کند، به دنبال آن H2 و غیره. هنگامی که عنصر BODY خود را به یک اندازه فونت خاص تنظیم می کنید، آن را به عنوان اندازه فونت "متوسط" استفاده می کنید و عناصر عناصر از آن محاسبه می شود.

یک یادداشت درباره وراث و ویژگی های پس زمینه

تعدادی از سبک هایی که لیست شده اند در CSS 2 در W3C ارث نمی برند، اما مرورگرهای وب هنوز ارقام را ارث می برند. به عنوان مثال، اگر شما HTML و CSS زیر را نوشتید: