http://www.dzbatna.com/images/icons/iconrote.gif طھط¹ط±ظپ ط¹ظ„ظ‰ ظ…ظپظ‡ظˆظ… ط§ظ„ظˆط±ط§ط«ط© ظپظٹ CSS
تعرف على مفهوم الوراثة في CSS
هذا الدرس مفصل ينبغي له تركيز و راح تفهموا ان شاء الله
هناك العديد من لغات البرمجة التي تعتمد على مفهوم الوراثة الذي يسهل الامور على المبرمجين ك php و java
و تقنية css بدورها يمكن ان يطبق فيها هذا المفهوم
الوراثة في css ترتكز على مفهوم أب/ابن ( او ابناء) , كل عنصر ابن يأخذ وراثيا جميع خصائص و مميزات العنصر الأب مثلا حقيبة ام ل وام ل
و هذه الأخيرة ام ل .
مفهوم الوراثة مفيذ جدا و يسمح للمصمم بتجنب التكرار مثلا اذا اضفنا خاصية لعنصر اب مثلا ( background-color:white ) فهذه الخاصيية سترثها جميع العناصر الأبناء بل و حتى ابناء الابناء...
ملاحظة : العنصر الابن يرث عن العنصر الاب الخصائص التي يمكن وراثتها لان هناك خصائص لا تتم وراثتها ك ( margin;padding;وخصائص أخرى تهم العلبة...)
هذا مثال يوضح مفهوم الوراثة سيتم تطبيق خصائص معينة على حقيبة html و سيتم تطبيق هذه الخصائص على العناصر (الابناء) وهي body و div :
رمز Code:
CSS : HTML : testtest
لتعرف جميع روابط الابوة التي تربط عناصر لغة html بامكانك زيارة هذا الرابط هنا
حالة حقيبة الروابط :
الوراثة تطبق كذلك على الحقيبة ابنائها هم المصطلحات الشائعة :
link : الرابط الافتراضي
visited : الرابط المزار
hover : الرابط عند مرور الفأرة
active : الرابط عند الضغط بالفارة
الكود code التالي اذن غير ناجع و يعتبر تكرار :
رمز 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;
}
الكود code الصحيح هو كالتالي :
رمز 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 :
لفعل هذا ما عليك سوى كتابة كود code css حيث تكون فيه الاقسام واحدة بجنب الأخرى مع الفصل بينها ب space
الاولي ستكون اب للثانية ه و هذه الاخيرة ستكون اب للثالثة...
المهم ان تكون الثانية داخل الاولى حسب ترتيبك في كود code css
علينا ان نعلم ان خصائص الاب ستطبق على الابن الا اذا كان الابن يحمل خصائص تميزه عن الاب
و الامثلة ستوضح اكثر :
مثال 1 :
رمز PHP:
.menu li
{ خاصيات }
هذه الخاصيات ستطبق على جميع الحقائب- التي بداخل القسم "menu"
مثال 2 :
هذا سيجنبنا كتابة
في كل مرةكود HTML:<li class="menu">
رمز PHP:
li .menu
{ خاصيات }
هنا ستكون العناصر ذات القسم menu التي بداخل حقائب- ابنا و ستطبق عيها هذه الخصائص
و علينا ان نفرق بين الكود code الاول و هذا
رمز PHP:
li,.menu
{ خاصيات }
لان هذا الكود code سيطبق على جميع حقائب- و جميع العناصر ذات القسم menu ليس فقط التي بداخل حقائب
- لذا وجب التنبيه.
و علينا نفرق ايضا بين الكود code الاول و هذا
رمز PHP:
li.menu
{ خاصيات }
لان الخاصيات في هذا الكود code ستطبق على جميع حقائب- ذات القسم menu لذا وجب التنبيه
المثال 3 :
رمز PHP:
div.menu a:hover
{ خاصيات }
اذا اردنا ترجمة هذا الكود code قسنجد انه يقول : اريد تطبيق هذه الخاصيات على hover ابنة الحقيبة و التي بدورها ابنة الحقيبةذات القسم menu .
اي ان هذه الخاصيات ستطبق على جميع الروابط عند مرور الماوس في علية div التي تحمل وسم menu.
رمز PHP:
<div class="menu">
ما يمكن ملاحظته هو ان ".menu li" او "li" لن يغير شيئ على مستوى الوراثة لكن سيغير على مستوى الترابط بين العناصر لان الخاصيات لا تطبق على نفس العنصر في الصفحة اي ان "li" ستطبق على جميع حقائب- اما ".menu li" فستطبق على حقائب
- التي بداخل عنصر يحمل وسم "menu" .
و لمزيد من التدقيق هذا الكود code لن ياخذ بعين الاعتبار في CSS في المثال 3 لان العنصر المحتوي ليس حقيبةو انما.
النهايةكود HTML:<p class="menu">
<a href="lien.htm">lien</a>
</p>
اتمنى ان تستفيذوا من الموضوع
و الى اللقاء
المصدر
تعرف على مفهوم الوراثة في CSS
https://fbcdn-sphotos-d-a.akamaihd.n...93518507_n.png
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©
