CSS الإستئناس

الصفتان class و id

آخر تحيين: 04-01-2015

span و div تطبيق الأنماط على الوسوم


لإضافة الأنماط ، يمكننا تطبيقها مباشرة على الوسوم . مثلا ، لتلوين جميع عناوين h1 باللون الأخضر ، نكتب شيفرة CSS التالية h1{color: green;} . لكن الإرتكاز على الوسوم فقط ، يبقى غير كاف و لا يستجيب لجميع مطالبنا في الكثير من الأحيان . إذ لا يمكننا التحكم في وسم واحد ، فجميعها سترث نفس النمط . كما في مثالنا السابق ، لهذا وجدت الصفتان class و id . إذا أردت مثلا لعنوان ما من عناوين h1 أن يكون مختلفا عن البقية ، يجب أن أميزه بصفة من الصفتين : <h1 class="my-style">
نكتب الصفة داخل الوسم ثم بين مزدوجتين نضيف قيمة الصفة ، و هي عبارة عن أسماء من اختياركم.

<h1> العنوان العادي </h1>
<h1 class="my-style"> العنوان الذي نريد تمييزه </h1>
<h1> العنوان العادي </h1>

يمكن إضافة class و id لجميع وسوم HTML .هاتان الصفتان متشابهتان في تقنية استعمالهما ، لكن تختلفان نوعا ما في وظيفتيهما . سنرى كل على حدة ، مع توضيح نقط الإختلاف بينها

الصفة class

لإضافة نفس النمط على مجموعة من عناصر المحتوى ، نستعمل الصفة class ثم نعطيها القيمة التي نريدها .

<p> هذه الفقرة عادية </p>
<p class="mola7ada"> هذه الفقرة مميزة </p>
<p> هذه الفقرة عادية </p>
<p class="mola7ada"> هذه الفقرة مميزة </p>

إضافة الصفة class ليس له أي تأثير على الوسم إلا إذا قمنا بتفعيلها في شيفرة CSS .

للقيام بذلك ، فالأمر جد سهل : نأخذ الإسم الذي أعطيناه لقيمة الصفة و نكتبه مسبوقا بنقطة على الشكل التالي .mola7ada { /* شيفرات css */ }

.mola7ada {
  color: green;
  font-weight: bold;
  font-size : 18px;
}
مشاهدة النتيجة


يمكن إضافة العدد الذي نريده من القيم للصفة class مع ترك فراغ بينها . و هذا جد عملي ، لتدقيق التحكم في العناصر . مثلا إذا أردت لإحدى الفقرتين المميزتين أن تكون بلون أحمر :

<p> هذه الفقرة عادية </p>
<p class="mola7ada myColor"> هذه الفقرة مميزة </p>
<p> هذه الفقرة عادية </p>
<p class="mola7ada"> هذه الفقرة مميزة </p>

و في شيفرة css أكتب القيمة ثم أختار اللون الذي أعجبني.myColor{color: red;}
مثال :

.mola7ada {
  color: green;
  font-weight: bold;
  font-size : 18px;
 }
.myColor {
   color: red;
  }
مشاهدة النتيجة

الصفة id

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

في بداية مشواري لتعلم لغة html ، كثيرا ما كنت أصادف مثل هذا التنبيه في كثير من المراجع . آنذاك كان يخيل إلي بأنها مسألة تنظيم فقط . لأنه في حقيقة الأمر ، أنني أستطيع إضافة ما يحلو لي من الأنماط و سواء استعملت الصفة id أو class ، فلغة CSS لا يهمها الأمر . ستعطينا دائما نفس النتيجة . و هذا سبب كاف جعلني لا أعير أهتماما كبيرا للتنبيه . مع مرور الوقت أصبحت أدرك هذه الأهمية ، منها :
عندما نستعمل نفس قيمة الصفة id أكثر من مرّة في نفس الصفحة ، فالمتصفح سيعتبرها صفحة لا تستجيب للمعايير الأساسية للغة HTML . و هذا ليس بالأمر الهين و سيكون له انعكاسات سلبية على موقعكم .
الصفة class ليس لها أي تأثير على تصرّف المتصفح . عكس الصفة id . تتذكرون الرابط المرساة ، مثلا إذا نقرت رابطا على هذا الشكل http://www.monsite.com#chapitre3 فإن المتصفح لن يكتفي بالذهاب إلى الصفحة المطلوبة فقط ، بل سيبحث داخلها عن الصفة id التي تحمل قيمة chapitre3 و يرسو عندها . و بهذا فإن هذه الصفة استطاعت التحكم في تصرف المتصفح عكس class .
هناك اختلافات أخرى بين الصفتين السابقتين و بعضها يشمل استعمالهما في لغات أخرى ك javascript . لن أدخل في التفاصيل .

فيما يخص إضافة الأنماط ، نستعمل الصفة id بنفس الطريقة التي التي استخدمنا فيها class مع اختلاف بسيط ، بدل أن نبدأ اسم القيمة بالنقطة ، نضع علامة "#"

#mola7ada {
  color: green;
  font-weight: bold;
  font-size : 18px;
 }
<p> هذه الفقرة عادية </p>
<p id="mola7ada"> هذه الفقرة مميزة </p>
<p> هذه الفقرة عادية </p>
مشاهدة النتيجة


ستحصلون على نفس النتيجة كما لو أنكم استعملتم الصفة class ، فالصفتان لا تختلفان في ما يخص CSS فهما تعملان بنفس الطريقة
يمكننا استعمال الصفتين على نفس الوسم في آن واحد :

<p id="myId" class="myClass"> .... </p>



خلاصة
الصفة class
الصفة class جد مستعملة ، و يمكننا تكرار قيمتها في صفحتنا متى نشاء ، كما يمكن لنفس الصفة أن تحمل أكثر من قيمة .

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

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