در ادامه آموزش های CSS در این مقاله در رابطه با ارث بری در زبان CSS صحبت خواهیم کرد.
ارث بری (وراثت) مفهومی است که در بحث شی گرایی در زبان های برنامه نویسی سطح بالا همچون زبان برنامه نویسی جاوا یا سی شارپ و ... کاربرد دارد اما در زبان CSS مفهموم ارث بری بسیار ساده تر می باشد و اگر بخواهیم آن را به زبان ساده بیان کنیم می توان آن را " ارث بری فرزند از برخی ویژگی های عنصر پدر " تعریف کرد.
همانطور که می دانید عناصر صفحه داخل تگ body قرار می گیرند،بنابراین هر عنصری که داخل صفحه قرار می دهیم فرزند تگ body می باشد،حال اگر در CSS استایل خاصی را برای تگ body در نظر بگیریم،عناصر دیگر نیز برخی از این استایل ها را به ارث خواهند برد.
برای درک بهتر موضوع به مثال زیر توجه کنید:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>شرکت پیشگامان صفر و یک فرساد</title>
<style>
body{
direction:rtl;
font-weight:bold;
color:red;
}
</style>
</head>
<body>
<p>آشنایی با وراثت در سی اس اس</p>
</body>
</html>
همانطور که در کد فوق مشاهده می کنید یک تگ p که حاوی عبارت " آشنایی با وراثت در سی اس اس " می باشد را داخل تگ body قرار داده ایم،اما به تگ p هیچ استایل خاصی را اختصاص نداده ایم.خروجی قطعه کد بالا در مرورگر به صورت زیر خواهد بود:
از آنجا که تگ p فرزند تگ body محسوب می شود، از اینرو استایلی که برای تگ bodyدر نظر گرفته ایم برای تگ p هم اعمال می شود. حال اگر برای تگ p نیز یک رنگ متفاوت در نظر بگیریم چه اتفاقی خواهد افتاد؟ کدهای CSS خود را تغییر می دهیم و نتیجه را با هم بررسی خواهیم کرد.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>شرکت پیشگامان صفر و یک فرساد</title>
<style>
body{
direction:rtl;
font-weight:bold;
color:red;
}
p{
color:blue;
}
</style>
</head>
<body>
<p>آشنایی با وراثت در سی اس اس</p>
</body>
</html>
خروجی کدهای بالا در مرورگر به صورت زیر خواهد بود :
با توجه به این که تگ p فرزند تگ body است از اینرو یک تضادی در کد فوق پیش می آید. در چنین مواقعی مقادیری که برای تگ فرزند در نظر گرفته ایم اعمال خواهند شد.
خواصی که به ارث برده می شوند
تنها چند خاصیت CSS وجود دارند که می‌توانند مقدار خود را از والد به ارث ببرند که معمولا خواص مربوط به متن هستند،خواصی که از والد به ارث برده می شوند را در فهرست زیر مشاهده می کنید.
border-collapse
border-spacing
caption-side
color
cursor
direction
empty-cells
font-family
font-size
font-style
font-variant
font-weight
font-size-adjust
font-stretch
font
letter-spacing
line-height
list-style-image
list-style-position
list-style-type
list-style
text-align
text-indent
text-justify
text-shadow
text-transform
visibility
white-space
word-break
word-spacing
word-wrap
همانطور که در لیست فوق هم مشاهده می کنید قالب مواردی که به ارث برده می شوند مربوط به خواص متنی می باشد.استفاده از ارث بری در سی اس اس بسیار پرکاربرد می باشد،به عنوان مثال شما می خواهید به جز تیتر ها تمام عناصر در صفحه وب font-size یکسان داشته باشند برای این منظور می توانید به صورت زیر عمل کنید(فرض می کنید در صفحه خود تیترها را داخل تگ h2 قرار داده باشید).
نکته :همه خواص CSS می توانند مقدار inherit را بپذیرند که این خاصیت را در مقاله بعدی مورد بررسی خواهیم داد تا بحث مربوط به ارث بری را به طور کامل فرا گرفته باشید.
امیدوارم مطالعه این مقاله برای شما مفید بوده باشد،با ادامه مقالات آموزش CSS با ما همراه باشید.
کامنت جدید ...