الدرس السادس .. المجموعات التطبيق على أكثر من وسم وفئة بنفس الوقت

**خالد القحطاني** · 12-29-2008 01:01 AM

المجموعات تستخدم للإنجاز في العمل بمعنى أن لو كان لديك أكثر من "فئة" أو "معرّف" أو "وسم" بالصفحة
مشتركين في نفس أوامر css من خصائص فبدلاً من تقوم بكتابة كل منهم بشكل مستقل يتم تجميعها لتأخذ
نفس القيم وتتخذ الشكل التالي مع الفصل بين كل وسم والآخر بفاصلة.

كود PHP:

 h1, h2, h3, h4, h5, h6 {
    font-family: Arial; margin: 0;
}

هناك أخطاء يجب ألا تقع فيها عند التطبيق على المعرّفات id أو الفئات class ولها علاقة بالدرس السابق
الخاص بتسلسل الأوسمة فإن أردت مثلا تطبيق نفس الخصائص على الوسم <ul> والوسم <p>
بداخل معرّف معين لا تضعه هكذا

كود PHP:

 #ahmed p, ul {
    color: #F00; padding: 10px; margin: 0px;
}

الصحيح ان يكتب هكذا

كود PHP:

 #ahmed p, #ahmed ul {
    color: #F00; padding: 10px; margin: 0px;
}

هناك خطأ آخر يجب الا تقع فيه وهو وضع فاصلة أو نسيانها بنهاية الكود هكذا لانه ذلك يجعل
المتصفح يتجاهل الأمر

كود PHP:

 .you p, .you ul, {
    padding: 10px; margin: 0px;
}

مثال يحتوى على 3 فقرات وعنوانين مطبق على فقرتين منهم فئه تحتوى على أمر تلوين وعلى
عنوان واحد معرّف أيضا للتلوين

كود PHP:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS الأنماط الإنسابية</title>
 
<style type="text/css">
<!--
p.blue { color: blue; }
h1#red, p, h3 { color: red; }
-->
</style>
 
</head>
<body>
 
<h1 id="red">فوائد إستخدام الأنماط الإنسابية</h1>
<h3>إحتراف ـ مرونة ـ سهولة</h3>
<p class="blue">فصل محتويات الموقع عن التصميم ، والتحكم بجميع الصفحات من خلال ملف واحد</p>
<p class="blue">ضمان ظهور الموقع بشكل واحد على كافة المتصفحات والأجهزة أخرى</p>
<p>إضافة مزيد من الأحترافية والسهولة لتصميم المواقع</p>
 
</body>
</html>

شاهد على المتصفح ..

تم تلوين العناوين كما طلبنا من الأمر باللون الأحمر ولكنه لم يلون كل الفقرات بل قام بتلوين آخر
فقرة فقط !! السبب فى ذلك ان الفقرتين باللون الأزرق يحتوى كل منهم على فئه class تحدد لكل
منهم بشكل خاص لون معين ولهذا لا تتأثر عندما وضعنا الوسم <p> وحده وظهر اللون فقط على
الفقرة <p> الاخيرة التى لا تحتوي على أي فئات class .. إذن يمكننا القول ان مجموعات الفئات
والأوسمة تطبق فقط في حاله إن كان الوسم لا يتحتوى على فئه أخرى تعطى له أمر آخر.