الأرشيف ٢٠٠٨ - ٢٠١٢

الفرق بين 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 الخاصة بالخط لكل من الفقرة و العنوان .

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

الوسوم

‫۱۳ تعليقات

  1. تنبيه: مساعدة بخصوص تخصيص فعالية ملف css في جزء معين من الصفحة - سوالف سوفت
  2. الكلاس يمكن إستعماله بنفس الإسم بأكثر من فقرة، كذلك id ، ولكن ينصح في هذه الحالة إستخدام الكلاس، السبب أن نفس الid في نفس الصفحة ليس متوافق مع المعايير القيياسية w3c

  3. شكرا لكم جميعا ..

    Ahmad Ismail
    أخي أحمد ربما استخدام ID واحد أكثر من مره في نفس الصفحة سيعطي نفس نتائج استخدام الكلاس لكن لكل من الكلاس و الـ ID خواص مميزة و وظيفة خاصه به ، كذلك لا فائدة من اسخدام ID واحد أكثر من مره في الصفحة فهذا لن يفيد بشئ !!

  4. انت انسان رائع و الله او مرة استفيد قدر هذه الافادة
    بارك الله فيك و الله ليست كلمة اقولها فقط انما اعنيها بكل معانيها بارك الله فيك و نفع بعلمك
    واصل اخي الحبيب

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

إقرأ أيضاً

زر الذهاب إلى الأعلى
إغلاق