ارث بری و وراثت در زبان های برنامه نویسی سطح بالا و شرایط آن در css

ارث بری در css

از سری آمورش های کدپز با آموزش ارث بری در css در خدمتتون هستم.

مفهوم ارث بری در css

وراثت یا همان ارث بری یکی از قابلیت های شئ گرایی در زبان های برنامه نویسی مانند java,c#, وغیره می باشد که css  هم از جمله ی این زبان ها است.اما تفاوتی که وجود دارد این است که در زبان css ارث بری نسبت به زبان های دیگر ساده تر است.یعنی بر خلاف زبان های دیگر که فرزند از تمام ویژگی های پدر استفاده می کند در css فقط از بعضی ویژگی های پدر می تواند استفاده کند.

همانطور که در آموزش html و tag های آن اشاره شد عناصری که در صفحه از آنها بهره می بریم داخل تگ body قرار می گیرند.یعنی تک تک عناصر صفحه فرزند تگ body هستند و از آن ارث بری می کنند.اکنون اگر بخواهیم برای body  در css  استایل تعریف کنیم و ویژگی هایی برای آن انتخاب کنیم عناصر دیگر نیز برخی از این ویژگی ها را به ارث می برند.

ویژگی هایی که فرزند در  css از پدر به ارث می برد

همانطور که عرض کردم در css  فقط برخی از ویژگی ها از پدر به ارث برده می شوند.عمده ی این ویژگی ها مربوط به کار با متن و استایل هایی می باشد که به متن اختصاص داده می شود.

چند نمونه از این ویژگی ها را باهم بررسی می کنیم.

Color                                       تعیین رنگ مورد نظر

cursor                                     نوع اشاره گر موس را در هنگام قرار گيری بر روی عنصر مورد نظر تعيين می کند

Direction                                 جهت نوشتن متن را مشخص می کند

Font                                       فونت نوشته را مشخص می کند

Border-collapse                         از این قابلیت برای تبدیل لبه های دو خطی یک جدول به لبه های یک خطی یا مجزا استفاده می شود

Border-spacing         میزان فاصله بین خطوط حاشیه خانه های درونی جدول را با خطوط حاشیه دور جدول بر حسب واحدی مانند پیکسل یا نقطه تعیین می کند

Visibility                                    قابلیت نمایش دادن یا مخفی کردن

empty-cells , font-family , font-size , font-style , font-variant , font-weight , font-size-adjust , font-stretch , letter-spacing , line-height , list-style-image , list-style-position , text-align , text-indent , …

قابلیت هایی که در بالا به آن اشاره شد خاصیت ارث پذیری دارند.

نکته ای که در اینجا حائز اهمیت می باشد این است که اگر قابلیتی به پدر داده شود که قابلیت ارث بری داشته باشد و همزمان برای فرزند قابلیتی مشابه تعریف کنیم الویت با ویژگی خود فرزند می باشد.

برای مثال اگر برای تگ body رنگ قرمز تعریف کنیم و همزمان برای تگ p رنگ مشکی, تگ p رنگ مشکی می گیرد.

آخرین مسئله ی مهم در ارث بری css استفاده از کلمه ی  inherit می باشد.

اگر ما بخواهیم همه ی ویژگی های پدر توسط فرزند به ارث برده شوند یا در واقع قدرت ارث بری در css  را افزایش دهیم باید از کلمه ی inherit استفاده کنیم.با استفاده از این کلمه می توانیم تمام ویژگی ها را مجبور به ارث بری کنیم.

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

خیلی ممنون از این که همراه ما هستید.برای این که بیشتر با مطالبی که در این متن بهش اشاره شد آشنا بشید به w3schools و css-tricks مراجعه کنید.