HOME   

المنتدى - دروس css - دروس البي اتش بي - قوالب CSS - دروس السيرفر - العاب فلاشيه - برامج مهمه جدا للويندوز - برنامك فك تشفير مع الشرح - 

الدروس  1  2  3  4  5  6  7 8 9 10 11 12 13 14 15 16 17 18 19 20  21 22 23 24 25  

مكتبة دروس css

كاتب الدرس الاخ: كتوم ca2oom

  لمشاهدة مدونة كتوم ودروس css اضغط هنا

الدرس السادس

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

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

 

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

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

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

 

 

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

        

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

 

 

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

 

        

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

 

 

 

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

 

 

<!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 .. إذن يمكننا القول ان مجموعات الفئات والأوسمة تطبق فقط في حاله إن كان الوسم لا يتحتوى على فئه أخرى تعطى له أمر آخر.

 

لمشاهدة مكتبة دروس css------>   هنـــا