آنچه در این جلسه میخوانید :
قابل ارث بری عناصر در CSS
قابل ارث بری عناصر در CSS یعنی اینکه یک عنصر میتواند مقدارش را از پدرش / والدش به ارث ببرد، و در کل تمامی عناصر در یک صفحه وب هم میتونن پدر باشن و هم میتونن فرزند باشن، فقط بستگی به نحوه استفاده خودمون داره.
در بحث ارث بری عناصر بطور کلی میتونیم، عناصر رو به ۳ دسته زیر تقسیم کنیم :
- اونایی که بصورت پیشفرض مقدارشون توسط فرزندان به ارث برده میشه ( مثلا ویژگی Color ویژگی ایست که مقدارش به ارث برده میشه، این یعنی اگه مثلا از این ویژگی با مقدار blue در عنصر پدر استفاده کردیم، فرزندان اون پدر هم بصورت خودکار رنگ متنشون میشه blue )
- اونایی که مقدارشون به ارث برده نمیشه ( مثله ویژگی Padding ) دیگه مثلا مقدار ویژگی Padding بصورت خودکار توسط فرزندان به ارث برده نمیشه
- استفاده از کلمه کلیدی / مقدار inherit برای اینکه بگیم مثلا فلان ویژگی مقدارش را از پدرش به ارث ببرد ولی اینجا دیگه کاری به این نداره که خوده ویژگی مثه Color مقدارش به ارث برده بشه یا نه. فقط میگیم که مقدار این ویژگی از پدرش به ارث برده بشه ( مثال در پایان همین صفحه )
Free-Learn
اونایی که بصورت پیشفرض مقدارشون توسط فرزندان به ارث برده میشه
خب این یعنی چی؟ اصلا ارث بری برای چیه و به چه درد میخوره؟ خب ساده هس و واضح، ارث بری در CSS یکی از نقات قوت این زبان می باشد و همین ارث بری خیلی میتونه در سرعت و بهینه بودن دستورات CSS که مینویسیم کمکمون کنه.
بفرض مثال من میام و برای تگ Body تعریف میکنم که رنگ متنش blue ( آبی ) باشه، در نتیجه تمامی متن های موجود در صفحه رنگ متنشون ( حالا میخواد تگ p باشه یا h1-h6 و… ) میشه آبی، و همین یعنی به ارث بردن عناصر موجود در body از تگ body که میشه پدرشون یا جَد اصلیشون.
پس بطور کلی ارث بری یعنی اینکه یک عنصر اگه مقداری براش تنظیم نکردیم، میتونه مقدارش رو از پدرش ( اگر پدر هم نداشت از جَدش که میشه تگ html ) به ارث ببره.
مثال : در مثال زیر میتوانید مشاهده نمایید که ویژگی color یک ویژگی ایست که مقدارش به ارث برده میشه ، همانطور که در دستورات زیر مشاهده مینمایید من از تگ b هم در تگ p استفاده کردم، بعد برای تگ p تعریف کردم که رنگ متنش آبی باشه. چون ویژگی color یک ویژگی ایست که مقدارش به ارث برده میشه پس در نتیجه تگ b هم بصورت خودکار رنگش آبی میشه و عملا میتونیم بگیم مقدار رنگش رو از p به ارث میبره.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <style> p{ color:blue; } </style> </head> <body> <p>Salam In Yek Matn <b>Baraye</b> Test Mibashad.</p> </body> </html> |
Free-Learn
اونایی که مقدارشون به ارث برده نمیشه
حالا یه عده هم از ویژگی های CSS هستن که مقدارشون بصورت خودکار به ارث برده نمیشه، مثلا یه ویژگی مثه Padding یا Margin از اونایی هست که بصورت خودکار توسط فرزندان به ارث برده نمیشن.
Free-Learn
خب چجوری بفهمیم یک عنصر پدر هس یا فرزند؟!
قبل از هرچیزی بدونید بطور کلی پدر / والد / جَد اصلی تمامی عناصر موجود در یک صفحه تگ html می باشد، و بعدش میشه تگ body که این دوتا در واقع میشن جَد اصلی عناصر در یک صفحه وب.
Free-Learn
مثال های مختلف از نشان دادن پدر و فرزندی عناصر در یک صفحه وب
مثال شماره ۱ : تگ DIV میشه پدر و تگ P میشه فرزند
1 2 3 |
<div> <p> سلام خوبی؟ من الان میشم فرزند تگ دایو </p> </div> |
مثال شماره ۲ : تگ P میشه پدر و تگ DIV میشه فرزند
1 2 3 |
<p> <div>سلام خوبی؟ من الان میشم فرزند تگ پی</div> </p> |
مثال شماره ۳ : تگ Span میشه فرزند تگ P و خوده تگ P میشه فرزند تگ DIV
1 2 3 |
<div> <p>Salam Khobi? <span>Man</span> Sadegh Hastam.</p> </div> |
و همینجور شما دیگه حساب کن، تگی که درون تگ دیگری قرار بگیرد اون تگ میشه فرزند اون تگ دیگه، فقط دیگه همونطور که گفتم پدر اصلی یا جَد تمامی عناصر در یک صفحه وب تگ html هست و بعدش میشه body، و بعدش دیگه نزدیکترین پدری که در کنار یک فرزند قرار داشته باشد.
Free-Learn
حالا نحوه استفاده از کلمه کلیدی یا مقدار inherit در CSS
خب اصلا این ینی چی؟ خب همونطور که کمی بالاتر گفتم ما یسری ویژگی داریم که قابلیت به ارث برده شدن دارند، مثه ویژگی color و مثال هم دیدم ازش ، خب حالا این رو شما بزارید کنار دیگه کاری به این نداریم.
حالا ما یه کلمه کلیدی یا یه مقدار داریم ، که جز مقادیر تمامی ویژگی های CSS می باشد، یعنی اگه به جدول مقادیر هر یک از ویژگی های CSS نگاه کنید میبینید که یک مقدار داره به اسم inherit یعنی همینی که الان میخوام توضیش بدم.
این یعنی در یه کلام، اون ویژگی مقدارش را از پدرش به ارث ببرد، اینجا دیگه مهم نیست خوده عنصر قابل ارث بری داشته باشد یا خیر، اینجا ما داریم میگیم که مقدار این ویژگی از پدرش ( نزدیکترین پدر ، یعنی مثلا اگه تگ P داخل تگ DIV بود خب DIV میشه پدرش و اگه همین DIV هم نبود پس پدرش میشه Body ) به ارث ببره.
یعنی اگه دستورات زیر رو داشته باشیم :
خب تعریف کردیم که مقدار Padding تگ P بشه ۱۰ پیکسل، اینجاست که میگم مقدار ویژگی Padding به ارث برده نمیشه، یعنی دیگه اون تگ B که داخل تگ P هس دیگه Padding نمیگیره. این در حالیه که در مثال بالا ما ویژگی Color رو داشتیم و دیدیم که مقدارش به ارث برده میشد توسط تگ b
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style> p{ padding: 10px; } </style> <body> <p>Salam In Yek Matn <b>Baraye</b> Test Mibashad.</p> </body> |
مثال شماره ۱ : در مثال زیر تگ P ، مقدار ویژگی Padding اش را از پدرش که میشه تگ DIV به ارث برده، در نتیجه وقتی مقدار Padding تگ DIV هس ۲۰ پیکسل پس مقدار Padding تگ P هم میشه ۲۰ پیکسل
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> div{ background-color:#607D8B; color:#fff; padding:20px; } div p{ background-color:#8AC007; padding:inherit; } </style> |