قابل ارث بری عناصر در 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 به ارث میبره.

هر ویژگی ای قابل ارث دادن / ارث بری ندارد ، برای اینکه بدونید کدام ویژگی قابل ارث بری دارد باید به جدول مشخصات همان ویژگی در آموزش ویژگی های CSS نگاه کنید.


امتحان کنید

Free-Learn

اونایی که مقدارشون به ارث برده نمیشه

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

هر ویژگی ای قابل ارث دادن / ارث بری ندارد ، برای اینکه بدونید کدام ویژگی قابل ارث بری دارد باید به جدول مشخصات همان ویژگی در آموزش ویژگی های CSS نگاه کنید.

Free-Learn

خب چجوری بفهمیم یک عنصر پدر هس یا فرزند؟!

قبل از هرچیزی بدونید بطور کلی پدر / والد / جَد اصلی تمامی عناصر موجود در یک صفحه تگ html می باشد، و بعدش میشه تگ body که این دوتا در واقع میشن جَد اصلی عناصر در یک صفحه وب.

هر عنصر با توجه به مکان استفادش هم میتونه پدر باشه و هم فرزند، مثلا اگه از یک P درون تگ DIV استفاده بشه خب تگ P میشه فرزند تگ DIV و DIV هم پدر P، و پدر تمامی تگ ها میشه تگ Body

Free-Learn

مثال های مختلف از نشان دادن پدر و فرزندی عناصر در یک صفحه وب

مثال شماره ۱ : تگ DIV میشه پدر و تگ P میشه فرزند

مثال شماره ۲ : تگ P میشه پدر و تگ DIV میشه فرزند

مثال شماره ۳ : تگ Span میشه فرزند تگ P و خوده تگ P میشه فرزند تگ DIV

و همینجور شما دیگه حساب کن، تگی که درون تگ دیگری قرار بگیرد اون تگ میشه فرزند اون تگ دیگه، فقط دیگه همونطور که گفتم پدر اصلی یا جَد تمامی عناصر در یک صفحه وب تگ html هست و بعدش میشه body، و بعدش دیگه نزدیکترین پدری که در کنار یک فرزند قرار داشته باشد.

Free-Learn

حالا نحوه استفاده از کلمه کلیدی یا مقدار  inherit در CSS

خب اصلا این ینی چی؟ خب همونطور که کمی بالاتر گفتم ما یسری ویژگی داریم که قابلیت به ارث برده شدن دارند، مثه ویژگی color و مثال هم دیدم ازش ، خب حالا این رو شما بزارید کنار دیگه کاری به این نداریم.

حالا ما یه کلمه کلیدی یا یه مقدار داریم ، که جز مقادیر تمامی ویژگی های CSS می باشد، یعنی اگه به جدول مقادیر هر یک از ویژگی های CSS نگاه کنید میبینید که یک مقدار داره به اسم inherit یعنی همینی که الان میخوام توضیش بدم.

این یعنی در یه کلام، اون ویژگی مقدارش را از پدرش به ارث ببرد، اینجا دیگه مهم نیست خوده عنصر قابل ارث بری داشته باشد یا خیر، اینجا ما داریم میگیم که مقدار این ویژگی از پدرش ( نزدیکترین پدر ، یعنی مثلا اگه تگ P داخل تگ DIV بود خب DIV میشه پدرش و اگه همین DIV هم نبود پس پدرش میشه Body ) به ارث ببره.

ویژگی Padding قابلیت ارث بری ندارد، یعنی مثه ویژگی Color مقدارش به ارث برده نمیشه.

یعنی اگه دستورات زیر رو داشته باشیم :

خب تعریف کردیم که مقدار Padding تگ P بشه ۱۰ پیکسل، اینجاست که میگم مقدار ویژگی Padding به ارث برده نمیشه، یعنی دیگه اون تگ B که داخل تگ P هس دیگه Padding نمیگیره. این در حالیه که در مثال بالا ما ویژگی Color رو داشتیم و دیدیم که مقدارش به ارث برده میشد توسط تگ b

 

مثال شماره ۱ : در مثال زیر تگ P ، مقدار ویژگی Padding اش را از پدرش که میشه تگ DIV به ارث برده، در نتیجه وقتی مقدار Padding تگ DIV هس ۲۰ پیکسل پس مقدار Padding تگ P هم میشه ۲۰ پیکسل

امتحان کنید

Free-Learn