مدرس: یک مکانیزم فوق‌العاده قدرتمند در CSS وجود دارد
که به آن وراثت (inheritance) گفته می‌شود
پس بیایید حالا همه چیز را درباره‌ی وراثت یاد بگیریم
در واقع ما قبلاً هم وراثت را در عمل دیده‌ایم
پس یادتان هست در ابتدای این بخش
من اشاره کردم که مثلاً این المنت اینجا
یعنی این «Laura Jones» که یک المنت strong است
باز هم استایل‌های المنت پاراگراف را دریافت می‌کند
که داخل آن قرار گرفته است درست است؟
پس بیایید این المنت را بررسی کنیم
و خب البته که این یک المنت strong است
و بنابراین به‌صورت پیش‌فرض
یعنی همان استایل پیش‌فرض مرورگر (user agent stylesheet) یادتان هست
پس به‌صورت پیش‌فرض وزن فونت (font-weight) آن bold می‌شود درست است؟
اما بعد اینجا می‌بینیم که استایل‌ها را همچنین به ارث می‌برد
از پاراگراف یعنی از المنت والد خودش
پس اینجا فونت ایتالیک اندازه فونت ۱۸ پیکسل
و همینطور ارتفاع خط (line-height) برابر با 15 را دارد
و بنابراین اساساً معنی این این است که وراثت
یک مکانیزم است که به‌واسطه‌ی آن برخی استایل‌ها
یعنی بعضی خصوصیات مقادیرشان را به ارث می‌برند
از المنت‌های والد به المنت‌های فرزند
خب حالا بیایید استفاده کنیم
از این ویژگی به شکلی گسترده
با اعمال کردن چند استایل روی المنت body
ما از المنت body برای اعمال استایل‌ها استفاده می‌کنیم
چون المنت body المنت والد است
برای همه‌ی المنت‌های دیگر در سند HTML ما
پس اگر ما بعضی خصوصیات را در body تنظیم کنیم
مقادیر آن‌ها به ارث خواهند رسید
به همه‌ی المنت‌های فرزندشان
البته همه‌ی خصوصیات واقعاً به ارث نمی‌رسند
بیشتر آن‌هایی که مربوط به متن هستند به ارث می‌رسند
پس بیایید با یک نمونه خیلی ساده شروع کنیم
مثلاً color و رنگ را روی قرمز تنظیم کنیم
خب فکر می‌کنید در این شرایط چه اتفاقی خواهد افتاد
با توجه به اینکه ما در واقع رنگ را
روی بیشتر این المنت‌ها همین پایین قبلاً تنظیم کرده‌ایم؟
خب بیایید ببینیم
و وقتی صفحه را رفرش می‌کنیم واقعاً چیزی تغییر نکرد
و دلیل آن این است که اگرچه این رنگ قرمز
به ارث رسیده است
این خصوصیت color همینجا در این قانون
روی استایل به ارث‌رسیده غلبه کرده است درست است
پس استایل‌های به ارث‌رسیده به‌راحتی بازنویسی می‌شوند
هر وقت که قانونی وجود داشته باشد
که روی همان خصوصیت اعمال شود
پس یک خصوصیت به ارث‌رسیده خیلی راحت بازنویسی می‌شود
توسط هر قانونی که مقداری برای همان خصوصیت داشته باشد
پس به نوعی می‌توانیم بگوییم مقادیر به ارث‌رسیده
آن‌هایی هستند که کمترین اولویت را دارند
اما به هر حال اگر ما حالا رنگ را از اینجا حذف کنیم
و بیایید فقط آن را کامنت کنیم خب
همه‌ی متنی که رنگ برایش تعریف نشده است
قرمز خواهد شد
پس این یکی اینجا همه‌ی این‌ها حالا این یکی هنوز آبی است
چون اینجا روی آن override کرده‌ایم درست است؟
اما بعد بقیه همه قرمز هستند
و بنابراین حالا کاری که می‌توانیم انجام دهیم این است که رنگ متن
که واقعاً می‌خواهیم را اینجا در body تنظیم کنیم
و بنابراین حالا همه‌ی متن خاکستری است همانند قبل
اما تنها کاری که باید بکنیم این است که آن مقدار را در body تعریف کنیم
و سپس این مقدار 444 به‌عنوان رنگ به ارث می‌رسد
برای همه‌ی قوانینی که تعریف رنگ ندارند
و حالا بیایید دقیقاً همین کار را با font-family انجام دهیم
پس من آن را از اینجا cut می‌کنم و اینجا paste می‌کنم
برای این یکی هم همینطور
و بنابراین دوباره همه‌ی المنت‌ها
مقدار sans-serif را اینجا به ارث گرفتند
برای خصوصیت font-family
خیلی خب
و در واقع اگر یک قدم برگردیم عقب
خب دارم دوباره آن را برمی‌گردانم
پس می‌بینید که اینجا لینک‌ها در واقع هنوز
در سبک serif هستند چون هیچ‌جا در کدمان
font-family را
برای آن‌ها روی sans-serif تنظیم نکرده‌ایم درست است؟
پس حالا دارم دوباره این کار را اینجا انجام می‌دهم
اینجا paste می‌کنم و نگاه کنید چه اتفاقی می‌افتد
و می‌بینید حالا آن‌ها درست مثل بقیه متن
در sans-serif هستند
و بنابراین در واقع دیگر به این سلکتور اینجا نیازی نداریم
می‌توانیم به‌سادگی حذفش کنیم
و فقط برای اطمینان
واقعاً می‌خواهم یک بار دیگر چیزی را اینجا روشن کنم
پس این واقعاً المنت‌ها هستند که مقادیر را
برای بعضی خصوصیات از یکدیگر به ارث می‌برند
پس این مربوط به سلکتورهای متضاد نیست یا به عبارت دیگر
این سلکتور body اینجا در واقع همه‌ی این المنت‌ها را
انتخاب نمی‌کند خب؟
این به همه المنت‌ها اعمال نمی‌شود
در عوض کاری که می‌کنیم این است که مقادیری را
برای این خصوصیات اینجا مثل color و font-family تعریف می‌کنیم
و سپس آن‌ها به‌سادگی منتقل می‌شوند
به همه‌ی المنت‌های فرزندی که درون body هستند
و بنابراین به همین دلیل است که ما
از تکنیک قرار دادن این خصوصیات مربوط به متن
داخل body استفاده می‌کنیم
درسته؟
چون این‌ها چیزهایی هستن که می‌خوایم همه‌ی عناصر صفحه داشته باشن
همه‌ی عناصر در صفحه باید این ویژگی‌ها رو داشته باشن
خب همون‌طور که قبلاً گفتم خیلی از استایل‌ها
در واقع به ارث برده نمی‌شن
چون این کار برای بیشتر ویژگی‌ها
خیلی غیرعملی خواهد بود
برای مثال فرض کنید border-top
پس اگر ما یک border-top با ضخامت ۱۰ پیکسل
و خط solid با رنگ آبی تعریف کنیم
روی body بیاییم ببینیم چه اتفاقی می‌افته
و بله این مرز آبی رو به بالای المنت body اضافه کرد
به بالای عنصر body اضافه شد
اما روی همه‌ی عناصر فرزند اعمال نشد درسته؟
چون دوباره این کار خیلی خیلی غیرعملی می‌شد
حالا بیایید یک نگاه سریع بندازیم
به یک نمایش گرافیکی
از ارث‌بری تا موضوع کاملاً روشن بشه
اینجا ما یک مثال خیلی ساده از یک صفحه وب داریم
که فقط شامل یک navigation
و یک h1 و یک عنصر p هست
و در سمت راست ما یک‌سری استایل هم داریم
برای عنصر body و به طور خاص
رنگ اندازه فونت خانواده فونت و border-top
خب البته عنصر body اینجا والد همه‌ی این سه عنصر هست
بنابراین به لطف ارث‌بری
همه‌ی این سه عنصر به طور کلی به این سه ویژگی دسترسی پیدا می‌کنن
که قابلیت ارث‌بری دارن
و دوباره همه‌ی این سه ویژگی در واقع مربوط به متن هستن
در حالی که از طرف دیگه
ویژگی border به ارث برده نمی‌شه
پس همه‌ی ویژگی‌ها به ارث برده نمی‌شن
اما بیشتر اون‌هایی که مربوط به متن هستن منتقل می‌شن
پس نه همه‌ی ویژگی‌ها ارث‌بری می‌شن
بلکه بیشتر ویژگی‌های مرتبط با متن هستند
و من یک لیست بزرگ
از خیلی از ویژگی‌هایی که ارث‌بری می‌شن دارم
که می‌تونید نگاهی بهش بندازید اگر علاقه داشتید
ولی به هر حال فرض کنیم که یک قانون هم برای h1 داریم
پس اون در واقع یک رنگ جدید
و یک اندازه فونت جدید تعریف می‌کنه
که بزرگ‌تره و رنگ آبی داره
و چیزی که الان اتفاق می‌افته اینه که این دو اعلان
در واقع استایل‌های به ارث‌رسیده رو بازنویسی می‌کنن
بنابراین برای h1 رنگ دیگه خاکستری نیست
و اندازه فونت دیگه ۱۶ پیکسل نیست
بلکه الان آبی و ۳۲ پیکسل شده
پس این یک نمایش بصری از ارث‌بری در عمله
که امیدوارم موضوع رو کمی روشن‌تر کنه
تا واقعاً بفهمید چطور کار می‌کنه
پس شاید بهتر باشه کمی بیشتر وقت بذارید
و این مثال رو کمی بیشتر بررسی کنید
و بعد یک بار دیگه برمی‌گردیم
به کدمون
و چیزی که الان می‌خوام بهتون نشون بدم اینه که ارث‌بری
در مقیاس خیلی کوچکتر هم کار می‌کنه
که چیزی هست که ما همیشه ازش استفاده می‌کنیم
پس ارث‌بری فقط برای زمانی که استایل‌ها رو روی body بذاریم مفید نیست
بلکه در شرایط دیگه هم کمک می‌کنه
فرض کنید بخوایم اندازه این چهار لینک اینجا رو تغییر بدیم
این کار در واقع خیلی راحت خواهد بود
کاری که باید بکنیم اینه که
بیایم اونجا و یک کلاس براشون بذاریم
بریم سراغش
پس می‌تونیم یک کلاس براشون بذاریم
و بعد این لینک‌ها رو بر اساس اون کلاس انتخاب کنیم درسته؟
یا می‌تونیم چنین کاری انجام بدیم
می‌تونیم nav رو انتخاب کنیم و بعد تگ‌های a داخلش رو
با استفاده از شبه‌کلاس link انتخاب کنیم درسته؟
فرض کنید بخوایم اندازه فونت بشه
۱۸ پیکسل
و می‌بینید که این واقعاً اعمال شد
اما حالا فرض کنید به هر دلیلی
یک پاراگراف هم اینجا داشتیم که می‌گفت «این ناوبری است»
و حالا احتمالاً اندازه این متن ۲۲ پیکسل شده
ببینیم بله چون این همون مقدار پیش‌فرضیه
که برای پاراگراف‌ها تعیین کردیم ولی می‌خوایم این هم بشه ۱۸ پیکسل
مثل بقیه متن‌های ناوبری
خب چطور می‌تونیم این کار رو انجام بدیم؟
خب البته می‌تونیم اینجا به این شکل اضافه کنیم
و دوباره کار خواهد کرد درسته؟
اما می‌تونیم به روش خیلی بهتری هم انجامش بدیم
پس همه‌ی این‌ها رو لازم نداریم
کافیه فقط بگیم
nav و بعد اندازه فونت رو اینجا روی ۱۸ پیکسل بذاریم
و بعد بقیه هم باید همون استایل رو به ارث ببرن
اما در واقع این پاراگراف اینجا ارث‌بری نکرده
چون ما به طور خاص اندازه فونت ۲۲ پیکسل
براش قبلاً تعیین کرده بودیم
پس شاید این مثال چندان خوبی نباشه
بیایید به جای اون از یک عنصر strong استفاده کنیم
باشه
و حالا این باید ۱۸ پیکسل باشه
دقیقاً همون‌طور که اینجا مشخص کردیم
خب اگه این رو برگردونیم ببینیم چی می‌شه
باشه
هیچ تغییر خاصی نمی‌کنه ولی حالا اگه اینجا فعالش کنیم
یعنی اگه اندازه فونت رو در ناوبری روی ۱۸ پیکسل بذاریم
حالا می‌بینیم که عنصر strong اینجا
۱۸ پیکسل رو از nav به ارث برده
درسته؟
و حالا همه‌چیز اینجا ۱۸ پیکسل شده
و این به لطف ارث‌بری هست
باشه؟
پس این تکنیکی هست که ما همیشه ازش استفاده می‌کنیم
ولی بیاییم strong رو اینجا حذف نکنیم
و دوباره من می‌تونم این کد رو کامنت کنم
دقیقاً مثل همون کاری که در CSS انجام دادیم
با زدن دکمه command یا control به‌همراه اسلش
خیلی خب
و حالا برای پایان یک روش دیگه هم هست
برای اضافه کردن استایل به همه‌ی عناصر
پس برگردیم این بالا و من اینجا قرارش می‌دم
چیزی که دارم می‌گم سلکتور عمومی یا ♪ هست
که قبلاً در اسلاید مربوط به تعارض سلکتورها گفتم
به طور کلی سلکتور عمومی همه‌ی عناصر صفحه رو انتخاب می‌کنه
و بنابراین این مفیده
وقتی بخوایم یک ویژگی خاص
روی همه‌ی عناصر اعمال بشه
ولی اون ویژگی به طور پیش‌فرض ارث‌بری نمی‌شه
برای مثال رنگ رو می‌خوایم روی همه عناصر اعمال کنیم
اما رنگ خودش ارث‌بری می‌شه
پس می‌تونیم خیلی راحت اون رو توی body بذاریم درسته؟
اما حالا تصور کنید که بخوایم border-top
روی همه عناصر داشته باشیم
پس می‌تونیم این کد رو اینجا قرار بدیم
و وقتی رفرش کنیم این نتیجه جالب رو می‌گیریم
می‌بینید که همه‌ی عناصر
شامل تگ EM اینجا و strong هم
همه‌شون الان یک border-top دارن درسته؟
خب خیلی کاربردی نیست ولی نشون می‌ده
که ما واقعاً می‌تونیم یک استایل مشخص
روی همه‌ی عناصر صفحه اعمال کنیم
فقط یادتون باشه که این سلکتور
در واقع پایین‌ترین اولویت رو داره
پس خیلی راحت می‌شه اون رو بازنویسی کرد باشه
فرض کنید اینجا رنگ قرمز رو روی body بذاریم
و بعد این یکی قرمز می‌شه
و فقط بقیه آبی می‌شن
و دوباره چون این یک سلکتور عنصری هست
پس اولویتش بالاتر از سلکتور عمومی خواهد بود
اما بیاییم دوباره برگردونیم
و در واقع این یکی رو همین‌جا خاموش کنیم
پس سلکتور عمومی در واقع کاملاً مهمه
فعلاً استفاده بزرگی براش نداریم
اما به زودی خواهیم داشت
و اون موقع بیشتر توضیح می‌دم
ولی الان چیزی که می‌خوام درک کنید اینه که
تفاوت بزرگی وجود داره
بین سلکتور عمومی و سلکتور body
سلکتور عمومی فقط به طور مستقیم اعمال می‌شه
روی همه عناصر و هیچ ارث‌بری‌ای در کار نیست
و بنابراین برای زمانی عالیه که بخوایم
یک ویژگی خاص که به طور خودکار ارث‌بری نمی‌شه
روی همه عناصر اعمال کنیم
از طرف دیگه
هر استایلی که اینجا روی body بذاریم ارث‌بری می‌شه
و بنابراین این مکانیزمی کاملاً متفاوت هست
نسبت به استفاده از سلکتور عمومی