ط¯ط±ط³ ظ…ظ‡ظ… : طھط¹ط±ظٹظپ ظ„ظƒظ„ ظ…ظ† class , id ظˆظ…ط§ظ‡ظˆ ط§ظ„ظپط±ظ‚ ط¨ظٹظ†ظ‡ظ…


class و id هى الفئات و المعرفات الأساسية التى توضع بداخل أوسمة html حتى تتعرف على خصائص css المختلفة، فالـ id هو معرّف يتم تحديدة ويمكن أن يندرج تحته عنده فئات ، ويعرّف بوضع علامة [ # ] قبله ويمكن أن يوضع له أى اسم ، ويتم تطبيقه على عنصر واحد فقط داخل الصفحه.




أما الفئات class يمكن أن تتكرر أكثر من مرة بنفس الصفحة على عكس المعرّفات id ، وتعرّف بوضع نقطه [ . قبلها ويمكن أن تضع لها أي إسم. وتعال نوضح ذلك بالتفصيل مباشرة مع الأمثلة التالية :

رمز Code:
#ahmed { background-color: #ccc; padding: 10px; } .you { color: green; font-size: 12px; }
الفئات class
ويضاف الـ class ويوضع بالصيغه التالية داخل أوسمة html المختلفة

رمز Code:
<p class=&quot;you&quot;>الفئات يمكن تتكررها بنفس الصفحة</p>
تابع معى المثال التالي متعدد الفقرات..

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

لاحظ تم تلوين الفقرتين الأولى والثانيه كما جاء فى امر تلوين الـ css ولكن العنوان لم يتم تلوينه مع انه أخذ تعريف لنفس الفئه !؟ .. السبب هنا اننا حددنا الوسم p قبل الفئه ولهذا لا تتعرف تلك الفئه ويتم تنفيذ ما بداخلها الا إذا كانت بداخل الفقرة او الوسم p &quot;الأمر نفسه مع كل أوسمه html إذا تم تحدديها قبل الفئه&quot;

رمز Code:
p.blue { color: blue; }
وفى حالة ان اردت تطبيق نفس الفئه على العنوان علينا الا نحدد قبل الفئه الوسم الذى نريد التطبيق عليه ـ وبهذا يمكننا بحريه تطبيقها على كافة الأوسمة وباكثر من مكان بنفس الصفحة .

رمز Code:
.blue { color: blue; }

المعرّفات id
المعرفات id لها نفس قواعد الفئات class ولكن مع إختلاف ان المعرف يتم تطبيقه مرة واحده فقط في الصفحه أى لا يمكنك تطبيق نفس المعرّف على أكثر من وسم بذات الصفحه .. وشاهد معي نفس المثال السابق ولكن مع إضافة معرف جديد خاص بالعنوان

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

اسئلة للفهم صح او خطآ
يمكن أن تتكرر الفئات class داخل الصفحات أكثر من مرة ؟ ( )
المعرفات id لا تتكرر أكثر مرتين فقط بنفس الصفحة ؟ ( )







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