ارث‌بری (Inheritance) یکی از مفاهیم کلیدی در CSS است که به برخی از خصوصیات اجازه می‌دهد از عنصر والد به فرزند منتقل شوند.
این ویژگی به کاهش تکرار کد و بهینه‌سازی استایل‌دهی کمک می‌کند. در این مقاله، نحوه ارث‌بری در CSS و روش‌های مدیریت آن را بررسی خواهیم کرد.
۱. ارث‌بری در CSS چیست؟
ارث‌بری در CSS به این معناست که برخی ویژگی‌ها به‌طور خودکار از والد به فرزند منتقل می‌شوند. این ویژگی‌ها معمولاً مربوط به متن و تایپوگرافی هستند.
مثال ساده:
body {
color: blue;
font-family: Arial, sans-serif;
}
p {
font-size: 18px;
}
<body>
<p>این متن آبی خواهد شد.</p>
</body>
🔹 نتیجه:
- رنگ متن (
color) ازbodyبهpبه ارث می‌رسد. - اندازه فونت (
font-size) فقط رویpتنظیم شده و فرزندانش بدون مقداردهی دستی تغییر نمی‌کنند.
۲. خصوصیات قابل ارث‌بری و غیرقابل ارث‌بری در CSS
✅ خصوصیات قابل ارث‌بری
✅ این خصوصیات معمولاً مربوط به متن و تایپوگرافی هستند و به‌طور پیش‌فرض از والد به فرزند منتقل می‌شوند:
color(رنگ متن)font(همه ویژگی‌های فونت شاملfont-family,font-size,font-style,font-variant,font-weight)letter-spacing(فاصله بین حروف)word-spacing(فاصله بین کلمات)visibility(قابلیت مشاهده بودن)direction(جهت متن)
❌ خصوصیات غیرقابل ارث‌بری
🚫 این خصوصیات مربوط به جعبه‌بندی و چیدمان هستند و به‌طور پیش‌فرض از والد به فرزند منتقل نمی‌شوند:
width(عرض)height(ارتفاع)margin(حاشیه)padding(فاصله داخلی)border(حاشیه دور عنصر)display(نوع نمایش عنصر)position(موقعیت عنصر)background(پس‌زمینه)box-shadow(سایه جعبه)
🔹 مثال:
div {
border: 2px solid red;
width: 200px;
}
span {
border: inherit; /* این مقدار بدون تعریف، به ارث برده نمی‌شود */
}
🔹 نتیجه:
borderبه‌طور پیش‌فرض به فرزند منتقل نمی‌شود، اما می‌توان با مقدارinheritآن را ارث‌بری کرد.
۳. مدیریت ارث‌بری در CSS
برای کنترل ارث‌بری، سه مقدار inherit، initial و unset در CSS وجود دارند.
✅ مقدار inherit (اجبار به ارث‌بری)
ویژگی‌هایی که به‌طور پیش‌فرض به ارث نمی‌رسند، می‌توانند با مقدار inherit از والد دریافت شوند.
div {
color: red;
border: 2px solid blue;
}
p {
color: inherit; /* رنگ از div به ارث می‌رسد */
border: inherit; /* حاشیه نیز به ارث می‌رسد (به‌طور پیش‌فرض ارث‌بری نمی‌کند) */
}
🔹 نتیجه:
✅ p متن قرمز خواهد داشت، چون color را به ارث برده است.
✅ p یک حاشیه آبی ۲ پیکسلی خواهد داشت، چون border را نیز به ارث برده است.
✅ مقدار initial (بازگرداندن به مقدار پیش‌فرض مرورگر)
با استفاده از initial، مقدار ویژگی به مقدار پیش‌فرض آن در CSS بازمی‌گردد.
p {
color: initial; /* رنگ پیش‌فرض مرورگر اعمال می‌شود (معمولاً مشکی) */
}
🔹 نتیجه:
✅ رنگ p دیگر از والد ارث نمی‌برد و مقدار پیش‌فرض مرورگر را می‌گیرد.
✅ مقدار unset (حذف مقدار و اعمال ارث‌بری در صورت امکان)
🔹 مقدار unset به این شکل عمل می‌کند:
- اگر ویژگی قابل ارث‌بری باشد → مقدار آن را inherit قرار می‌دهد.
- اگر ویژگی غیرقابل ارث‌بری باشد → مقدار آن را initial قرار می‌دهد.
h1 {
color: red;
}
p {
color: unset; /* اگر متن باشد، ارث‌بری انجام می‌شود */
width: unset; /* مقدار اولیه مرورگر اعمال می‌شود */
}
🔹 نتیجه:
✅ p متن قرمز خواهد شد، چون color از h1 به ارث برده است.
✅ p عرضی نخواهد داشت، چون unset مقدار پیش‌فرض مرورگر را برمی‌گرداند.
۴. بهترین روش‌ها برای مدیریت ارث‌بری در CSS
✅ ۱. استفاده از inherit برای هماهنگ‌سازی متن در صفحه
body {
color: #333;
font-family: Arial, sans-serif;
}
p, h1, h2, h3 {
color: inherit;
}
✅ این روش باعث می‌شود که تمام متن‌ها هم‌رنگ با body شوند.
✅ ۲. جلوگیری از ارث‌بری ناخواسته با initial
p {
font-size: 18px;
}
span {
font-size: initial;
}
✅ span مقدار پیش‌فرض مرورگر را دریافت می‌کند، نه مقدار p.
✅ ۳. استفاده از unset برای ریست کردن خصوصیات
div {
border: 2px solid red;
}
p {
border: unset; /* اگر ارث‌بری کند، مقدار را می‌گیرد، در غیر این صورت حذف می‌شود */
}
✅ p اگر والدش border داشته باشد، آن را دریافت می‌کند. اگر نداشته باشد، مقدار پیش‌فرض مرورگر اعمال می‌شود.
۵. نتیجه‌گیری
✅ برخی ویژگی‌های CSS (مانند رنگ و فونت) به‌طور پیش‌فرض به ارث می‌رسند، اما ویژگی‌های مربوط به اندازه و چیدمان این خاصیت را ندارند.
✅ می‌توان با inherit ویژگی‌های غیرقابل ارث‌بری را نیز از والد دریافت کرد.
✅ مقدار initial مقدار پیش‌فرض مرورگر را تنظیم می‌کند.
✅ مقدار unset ویژگی را بر اساس نوع آن یا inherit می‌کند یا initial.
درک صحیح ارث‌بری در CSS به بهینه‌سازی استایل‌ها، کاهش تکرار کد و افزایش انعطاف‌پذیری طراحی وب کمک می‌کند.
