الفرق بين ID’s و Classes

اثناء تصميم صفحات الويب نحتاج الى تخصيص طريقة عرض بعض عناصر Html ويتم ذلك عن طريق منحها خواص css خاصه بها ولهذا فنحن نسنتخدم ID’s و Classes … في هذه التدوينه سنتناول تعريف كل منهما وكيفية استخدامها .

لا يوجد ما يميز ID عن Class في CSS من حيث الاستخدام فما يمكنك القيام به باحدهما يمكنك القيام به بالاخر وتبقى لك الحرية في استخدام اي منهما تبعاً لرؤيتك و تقديرك اي منهما سيكون مناسب لعنصرك أكثر .

نظرة على Classes
– يمكن استخدام نفس class لاكثر من عنصر في الصفحة الواحده .
– يمكن استخدام اكثر من class للعنصر الواحد .

استخدام Classes
عند تعريف class في CSS يجب ان يسبق اسم الكلاس نقطة ( . ) بالشكل التالي :
( تذكر لا تبدأ اسم الكلاس برقم )

في المثال السابق قمنا بتعريف كلاسين الاول اسميناه paragraph و الثاني center
الان علينا تحديد العناصر التي نرغب في تطبيق الكلاس عليها :

في المثال السابق سيقوم المستعرض بتطبيق الخواص التي تم تحديدها في الكلاس paragraph على الفقرتين ( وعلي اي عناصر اخرى تم تحديد الكلاس paragraph لها ) اي ستظهر الفقرتين بخط عريض ولون أزرق .

حسنا .. ماذا اذا اردت ان اطبق اكثر من كلاس على عنصر واحد .. ؟
لتطبيق ذلك عليك كتابة اسماء الكلاسات مع ترك فراغ بين الاسماء بالشكل التالي :

في المثال السابق سيتم تطبيق الخواص المحدده في الكلاسين paragraph و center اي ستعرض الفقرة بخط عريض ولون ازرق ومحاذاة الفقرة سيكون في الوسط .

نظرة على ID
– لكل عنصر id واحد .
– تحتوي الصفحة الواحدة على عنصر وحيد يحمل ID فريد ( خاص به ) .

يمكننا ان نشبة ID بالارقم التسلسلية للمنتجات و الكروت مسبقة الدفع ( كروت شحن الجوالات و الانترنت وغيرها ) .. فلكل منها رقم فريد خاص بها لا يمكن أن يتكرر .

استخدام ID’s :
عند تعريف ID في css علينا وضع ( # ) قبل اسم ID :
( تذكر لا تبدأ اسم ID برقم )

الان علينا ان نحدد ما هو العنصر الوحيد الذي نريد تطبيق هذه الخواص عليه :

استخدام اسماء ID’s في الروابط :
تتميز ID بامكانية استخدامها في الروابط حيث سيؤدي الرابط الى العنصر الذي يحمل ID الذي استخدمناه في الرابط :

يجب وضع # قبل اسم ID المراد الانتقال اليه في الرابط .
بالضغط على ” الانتقال الى الفقرة ” سينتقل المستعرض الى الفقرة التي تحمل ID باسم paragraph1 . وستلاحظ تغير مسار الصفحة في شريط العنوان في المستعرض باضافة #paragraph1 الى مسار الصفحة الحالية :
http://www.yourpath.com/example.html#paragraph1

يمكن للعنصر الواحد ان يحتوي على id و class معا

تخصيص class او ID لعنصر معين :
يمكنك تخصيص Class او ID لعنصر معين لا يتم تطبيق خواصهما الا على هذا العنصر فقط ويتم ذلك عن طريق وضع اسم العنصر قبل اسم Cass او ID … دعني اوضح بمثال :

اكواد css

اكواد html

لنشرح المثال …
اولا عرفت class باسم example بخط عريض من نوع Arial و حجم 12pt ثم بعد ذلك حددت بان اي فقرة تحمل كلاس example تعرض بلون أحمر و حددت بان اي عنوان يحمل الكلاس example يعرض بلون ازرق.. مع الاحتفاظ بخواص الكلاس example الخاصة بالخط لكل من الفقرة و العنوان .

انتهى الدرس ..
تذكر التطبيق افضل وسيلة للتعلم .
الى اللقاء في الدرس القادم . :)