منتدى استراحات زايد - تعرف على مفهوم الوراثة في css

<div><div align="center">تعرف على مفهوم الوراثة في CSS

هذا الدرس ينبغي له تركيز و راح تفهموا ان شاء الله

هناك العديد من لغات البرمجة التي تعتمد على مفهوم الوراثة الذي يسهل الامور على المبرمجين ك php و java
و تقنية css بدورها يمكن ان يطبق فيها هذا المفهوم

الوراثة في css ترتكز على مفهوم أب/ابن ( او ابناء) , كل عنصر ابن يأخذ وراثيا جميع خصائص و مميزات العنصر الأب مثلا حقيبة ام ل و ام ل و هذه الأخيرة ام ل .

مفهوم الوراثة مفيذ جدا و يسمح للمصمم بتجنب التكرار مثلا اذا اضفنا خاصية لعنصر اب مثلا ( background-color:white ) فهذه الخاصيية سترثها جميع العناصر الأبناء بل و حتى ابناء الابناء...

ملاحظة : العنصر الابن يرث عن العنصر الاب الخصائص التي يمكن وراثتها لان هناك خصائص لا تتم وراثتها ك ( margin;padding;وخصائص أخرى تهم العلبة...)

هذا مثال يوضح مفهوم الوراثة سيتم تطبيق خصائص معينة على حقيبة html و سيتم تطبيق هذه الخصائص على العناصر (الابناء) وهي body و div :

رمز Code:
CSS :

HTML :

test
test

لتعرف جميع روابط الابوة التي تربط عناصر لغة html بامكانك زيارة هذا الرابط هنا

حالة حقيبة الروابط :

الوراثة تطبق كذلك على الحقيبة ابنائها هم المصطلحات الشائعة :

link : الرابط الافتراضي
visited : الرابط المزار
hover : الرابط عند مرور الفأرة
active : الرابط عند الضغط بالفارة

الكود التالي اذن غير ناجع و يعتبر تكرار :

رمز PHP:

a {
text-align: center;
font-size: 1em;
text-decoration: none;
color: blue;
margin: 0 5px;
}
a:hover {
text-align: center;
font-size: 1em;
text-decoration: underline;
color: red;
margin: 0 5px;
}

الكود الصحيح هو كالتالي :

رمز PHP:

a {
text-align: center;
font-size: 1em;
text-decoration: none;
color: blue;
margin: 0 5px;
}
a:hover {
text-decoration: underline;
color: red;
}

الوراثة بتداخل الاقسام ( classes ) او المعرفات ( id ) :

كما يمكن ان يتم تطبيق الوراثة عن طريق الروابط بين حقائب html يمكننا ان نطبقها عن طريق classes او id :

لفعل هذا ما عليك سوى كتابة كود css حيث تكون فيه الاقسام واحدة بجنب الأخرى مع الفصل بينها ب space

الاولي ستكون اب للثانية ه و هذه الاخيرة ستكون اب للثالثة...

المهم ان تكون الثانية داخل الاولى حسب ترتيبك في كود css

علينا ان نعلم ان خصائص الاب ستطبق على الابن الا اذا كان الابن يحمل خصائص تميزه عن الاب

و الامثلة ستوضح اكثر :

مثال 1 :

رمز PHP:

.menu li
{ خاصيات }

هذه الخاصيات ستطبق على جميع الحقائب التي بداخل القسم "menu"

هذا سيجنبنا كتابة

[HTML][/HTML]في كل مرة

مثال 2 :

رمز PHP:

li .menu
{ خاصيات }

هنا ستكون العناصر ذات القسم menu التي بداخل حقائب ابنا و ستطبق عيها هذه الخصائص

و علينا ان نفرق بين الكود الاول و هذا

رمز PHP:

li,.menu
{ خاصيات }

لان هذا الكود سيطبق على جميع حقائب و جميع العناصر ذات القسم menu ليس فقط التي بداخل حقائب
لذا وجب التنبيه.

و علينا نفرق ايضا بين الكود الاول و هذا

رمز PHP:

li.menu
{ خاصيات }

لان الخاصيات في هذا الكود ستطبق على جميع حقائب ذات القسم menu لذا وجب التنبيه

المثال 3 :

رمز PHP:

div.menu a:hover
{ خاصيات }

اذا اردنا ترجمة هذا الكود قسنجد انه يقول : اريد تطبيق هذه الخاصيات على hover ابنة الحقيبة و التي بدورها ابنة الحقيبة ذات القسم menu .

اي ان هذه الخاصيات ستطبق على جميع الروابط عند مرور الماوس في علية div التي تحمل وسم menu.

رمز PHP:

ما يمكن ملاحظته هو ان ".menu li" او "li" لن يغير شيئ على مستوى الوراثة لكن سيغير على مستوى الترابط بين العناصر لان الخاصيات لا تطبق على نفس العنصر في الصفحة اي ان "li" ستطبق على جميع حقائب اما ".menu li" فستطبق على حقائب
التي بداخل عنصر يحمل وسم "menu" .

و لمزيد من التدقيق هذا الكود لن ياخذ بعين الاعتبار في CSS في المثال 3 لان العنصر المحتوي ليس حقيبة و انما
.

[HTML]
lien

[/HTML]النهاية

اتمنى ان تستفيذوا من الموضوع

و الى اللقاء

المصدر

تعرف على مفهوم الوراثة في CSS