پادکست CSS - 005: Inheritance
فرض کنید شما فقط مقداری CSS نوشتید تا عناصر شبیه یک دکمه به نظر برسند.
<a href="http://example.com" class="my-button">I am a button link</a>
.my-button {
display: inline-block;
padding: 1rem 2rem;
text-decoration: none;
background: pink;
font: inherit;
text-align: center;
}
سپس یک عنصر پیوند را به یک مقاله از محتوا اضافه میکنید، با مقدار class
.my-button
. با این حال، مشکلی وجود دارد، متن آن رنگی نیست که انتظار داشتید باشد. چگونه این اتفاق افتاد؟
اگر مقداری برای آنها تعیین نکنید، برخی از ویژگیهای CSS ارث میبرند. در مورد این دکمه، color
از این CSS به ارث برده است:
article a {
color: maroon;
}
در این درس خواهید آموخت که چرا این اتفاق می افتد و چگونه وراثت یک ویژگی قدرتمند است که به شما کمک می کند کمتر CSS بنویسید.
جریان ارثی
بیایید با استفاده از این قطعه HTML به نحوه عملکرد وراثت نگاهی بیندازیم:
<html>
<body>
<article>
<p>Lorem ipsum dolor sit amet.</p>
</article>
</body>
</html>
عنصر ریشه ( <html>
) هیچ چیزی را به ارث نمی برد زیرا اولین عنصر در سند است. مقداری CSS روی عنصر HTML اضافه کنید، و آن شروع به آبشاری سند می کند.
html {
color: lightslategray;
}
ویژگی color
به طور پیش فرض توسط عناصر دیگر به ارث می رسد. عنصر html
دارای color: lightslategray
، بنابراین همه عناصری که می توانند رنگ را به ارث ببرند اکنون دارای رنگ lightslategray
خواهند بود.
body {
font-size: 1.2em;
}
p {
font-style: italic;
}
فقط <p>
متن ایتالیک خواهد داشت زیرا عمیق ترین عنصر تودرتو است. وراثت فقط به سمت پایین جریان می یابد، نه به عناصر والد.
کدام ویژگی ها به طور پیش فرض به ارث می رسند؟
همه ویژگیهای CSS بهطور پیشفرض به ارث برده نمیشوند، اما بسیاری از ویژگیها هستند. برای مرجع، در اینجا لیست کاملی از ویژگی هایی است که به طور پیش فرض به ارث برده می شوند، که از مرجع W3 تمام ویژگی های CSS گرفته شده است:
- آزیموت
- فروپاشی مرز
- فاصله مرزی
- سمت عنوان
- رنگ
- مکان نما
- جهت
- سلول های خالی
- فونت-خانواده
- اندازه فونت
- سبک فونت
- نوع فونت
- وزن فونت
- فونت
- فاصله حروف
- ارتفاع خط
- لیست-سبک-تصویر
- فهرست-سبک-موقعیت
- لیست-سبک-نوع
- به سبک فهرست
- یتیمان
- نقل قول ها
- متن تراز کردن
- تورفتگی متن
- تبدیل متن
- دید
- فضای سفید
- بیوه ها
- فاصله بین کلمات
وراثت چگونه کار می کند
هر عنصر HTML دارای هر ویژگی CSS است که به طور پیش فرض با مقدار اولیه تعریف شده است. مقدار اولیه خاصیتی است که به ارث نمی رسد و اگر آبشار نتواند مقداری را برای آن عنصر محاسبه کند به عنوان یک پیش فرض نشان داده می شود.
ویژگی هایی که می توانند به ارث برده شوند به سمت پایین حرکت می کنند و عناصر فرزند یک مقدار محاسبه شده دریافت می کنند که نشان دهنده مقدار والد آن است. این بدان معناست که اگر والدین font-weight
را روی bold
تنظیم کرده باشد، همه عناصر فرزند پررنگ خواهند بود، مگر اینکه font-weight
آنها روی مقدار دیگری تنظیم شده باشد، یا شیوه نامه عامل کاربر مقداری برای font-weight
برای آن عنصر داشته باشد.
نحوه ارث بردن و کنترل ارث به صراحت
وراثت می تواند عناصر را به روش های غیرمنتظره ای تحت تأثیر قرار دهد، بنابراین CSS ابزارهایی برای کمک به آن دارد.
کلمه کلیدی inherit
شما می توانید هر ویژگی را با کلمه کلیدی inherit
کاری کنید که ارزش محاسبه شده والد خود را به ارث ببرد. یک راه مفید برای استفاده از این کلمه کلیدی ایجاد استثناها است.
strong {
font-weight: 900;
}
این قطعه CSS همه عناصر <strong>
را طوری تنظیم می کند که font-weight
900
را داشته باشند، به جای مقدار bold
پیش فرض، که معادل font-weight: 700
است.
.my-component {
font-weight: 500;
}
کلاس .my-component
font-weight
را روی 500
تنظیم می کند. برای ساختن عناصر <strong>
داخل .my-component
همچنین font-weight: 500
اضافه کنید:
.my-component strong {
font-weight: inherit;
}
اکنون، عناصر <strong>
داخل .my-component
دارای font-weight
500
خواهند بود.
شما میتوانید این مقدار را به صراحت تنظیم کنید، اما اگر در آینده از inherit
و CSS تغییرات .my-component
استفاده کنید، میتوانید تضمین کنید که <strong>
شما بهطور خودکار با آن بهروز خواهد ماند.
کلمه کلیدی initial
وراثت می تواند باعث ایجاد مشکل در عناصر شما شود و initial
یک گزینه بازنشانی قدرتمند را در اختیار شما قرار می دهد.
قبلاً یاد گرفتید که هر ویژگی یک مقدار پیش فرض در CSS دارد. کلمه کلیدی initial
یک ویژگی را به مقدار اولیه و پیش فرض باز می گرداند.
aside strong {
font-weight: initial;
}
این قطعه، وزن پررنگ را از تمام عناصر <strong>
داخل یک عنصر <aside>
حذف میکند و به جای آن، آنها را وزن عادی میکند، که مقدار اولیه است.
کلیدواژه unset
اگر یک ویژگی به طور پیش فرض به ارث برده شود یا خیر، ویژگی unset
رفتار متفاوتی دارد. اگر یک ویژگی به طور پیشفرض به ارث برده شود، کلمه کلیدی unset
همان inherit
خواهد بود. اگر ویژگی به طور پیشفرض به ارث نمیرسد، کلمه کلیدی unset
برابر با initial
است.
به خاطر سپردن ویژگیهای CSS که بهطور پیشفرض به ارث برده میشوند، میتواند سخت باشد، unset
میتواند در این زمینه مفید باشد. به عنوان مثال، color
به طور پیش فرض به ارث می رسد، اما margin
اینطور نیست، بنابراین می توانید این را بنویسید:
/* Global color styles for paragraph in authored CSS */
p {
margin-top: 2em;
color: goldenrod;
}
/* The p needs to be reset in asides, so you can use unset */
aside p {
margin: unset;
color: unset;
}
اکنون، margin
حذف شده و color
به مقدار محاسبه شده ارثی برمی گردد.
می توانید مقدار unset
را با ویژگی all
نیز استفاده کنید. اگر به مثال بالا برگردیم، اگر استایل های p
سراسری چند ویژگی اضافی دریافت کنند، چه اتفاقی می افتد؟ فقط قانونی که برای margin
و color
تنظیم شده است اعمال می شود.
/* Global color styles for paragraph in authored CSS */
p {
margin-top: 2em;
color: goldenrod;
padding: 2em;
border: 1px solid;
}
/* Not all properties are accounted for anymore */
aside p {
margin: unset;
color: unset;
}
اگر قانون aside p
به all: unset
در عوض، مهم نیست که در آینده چه سبک های جهانی برای p
اعمال می شود، آنها همیشه تنظیم نشده خواهند بود.
aside p {
margin: unset;
color: unset;
all: unset;
}
درک خود را بررسی کنید
دانش خود را در مورد وراثت آزمایش کنید
کدام یک از خواص زیر قابل ارث است؟
text-align
line-height
color
font-size
animation
کدام مقدار مانند inherit
رفتار می کند مگر اینکه چیزی برای ارث بردن وجود نداشته باشد و سپس مانند initial
رفتار می کند؟
reset
superset
unset