لنقل بأن لدينا قائمتين من الروابط لأصناف مختلفة من الثمار، الخضار والفواكه، القائمتين في ملف HTML ستكونان بهذا الشكل:
- الكود:
-
<p>الخضار:</p>
<ul>
<li><a href="ab.htm">يقدونس</a></li>
<li><a href="cd.htm">جزر</a></li>
<li><a href="ef.htm">خيار</a></li>
</ul>
<p>فواكه:</p>
<ul>
<li><a href="gh.htm">تفاح</a></li>
<li><a href="ij.htm">أناناس</a></li>
<li><a href="kl.htm">بطيخ</a></li>
</ul>
نريد أن تكون قائمة روابط الخضروات باللون الأصفر، وقائمة الفواكه باللون الأحر وبقية الروابط تبقى باللون الأزرق.
لإنجاز هذا نقسم الروابط إلى مجموعتين، يمكن فعل ذلك بتحديد فئة لكل رابط باستخدام الخاصية class.
لنقم بتحديد فئات للمثال أعلاه:
- الكود:
-
<p>خضار:</p>
<ul>
<li><a href="ab.htm" [b]class="veg"[/b]>بقدونس</a></li>
<li><a href="cd.htm" [b]class="veg"[/b]>جزر</a></li>
<li><a href="ef.htm" [b]class="veg"[/b]>خيار</a></li>
</ul>
<p>فواكه:</p>
<ul>
<li><a href="gh.htm" [b]class="fru"[/b]>تفاح</a></li>
<li><a href="ij.htm" [b]class="fru"[/b]>أناناس</a></li>
<li><a href="kl.htm" [b]class="fru"[/b]>بطيخ</a></li>
</ul>
يمكن الآن تحديد خصائص محددة للروابط التي تتبع فئة الخضروات أو الفواكه بهذا الشكل:
- الكود:
-
a {
color: blue;
}
a.[b]veg[/b] {
color: #FFBB00;
}
a.[b]fru[/b] {
color: #800000;
}
