قابل ارث بری عناصر در CSS

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

Free-Learn

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

فرض میگیریم یک عنصر داریم به اسم A و یه عنصر دیگه به اسم B ، حال عنصر B رو میزاریم داخل عنصر A ، در نتیجه عنصر A میشه پدر و B میشه فرزند و یا برعکس هیچ فرقی ندارد.

Free-Learn

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

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

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

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

و همینجور شما دیگه حساب کن، تگی که درون تگ دیگری قرار بگیرد اون تگ میشه فرزند اون تگ دیگه.

Free-Learn

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

خب همونطور که گفتم عناصر میتونن در CSS مقدار ویژگی هاشون رو از تگ پدرشون به ارث ببرن، برای ارث بری مقدار یک ویژگی ما باید از کلمه کلیدی ( که در واقع همون یک مقدار ویژگی می باشد ) inherit استفاده نماییم.

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

امتحان کنید