طھط¹ط±ظپ ط¹ظ„ظ‰ ظ…ظپظ‡ظˆظ… ط§ظ„ظˆط±ط§ط«ط© ظپظٹ CSS


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

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

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

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

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

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

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

 رمز Code:
CSS : <style type=&quot;text/css&quot;> <!-- html {font-size: 1.5em;} --> </style> HTML : <body> test <div>test</div> </body>


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

حالة حقيبة الروابط <a> :

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

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

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

رمز PHP:
<code style="white-space:nowrap"> <code> 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;
}
</code> </code>

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

رمز PHP:
<code style="white-space:nowrap"> <code> a {
text-align: center;
font-size: 1em;
text-decoration: none;
color: blue;
margin: 0 5px;
}
a:hover {
text-decoration: underline;
color: red;
}
</code> </code>

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

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

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

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

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

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

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

مثال 1 :

رمز PHP:
<code style="white-space:nowrap"> <code> .menu li
{ خاصيات }
</code> </code>

هذه الخاصيات ستطبق على جميع الحقائب <li> التي بداخل القسم &quot;menu&quot;

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

كود HTML:
<li class=&quot;menu&quot;>
في كل مرة

مثال 2 :

رمز PHP:
<code style="white-space:nowrap"> <code> li .menu
{ خاصيات }
</code> </code>

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

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

رمز PHP:
<code style="white-space:nowrap"> <code> li,.menu
{ خاصيات }
</code> </code>

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

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

رمز PHP:
<code style="white-space:nowrap"> <code> li.menu
{ خاصيات }
</code> </code>

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

المثال 3 :

رمز PHP:
<code style="white-space:nowrap"> <code> div.menu a:hover
{ خاصيات }
</code> </code>

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

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

رمز PHP:
<code style="white-space:nowrap"> <code> <div class="menu">
</code> </code>

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


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

كود HTML:
 <p class=&quot;menu&quot;> 
 <a href=&quot;lien.htm&quot;>lien</a> 
 </p>
النهاية

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

و الى اللقاء

المصدر

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










©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©