استخدام فئات النمط والمعرفات

تساعد الفئات والمعرفات في توسيع CSS الخاص بك

يتطلب إنشاء مواقع الويب على الويب اليوم فهمًا عميقًا لـ CSS (أوراق الأنماط المتتالية). هذه هي التعليمات التي تعطيها لموقع ويب لتحديد كيفية تخطيطه في نافذة المتصفح. يمكنك تطبيق سلسلة من "الأنماط" على مستند HTML الخاص بك والذي سيؤدي إلى إنشاء مظهر صفحة الويب الخاصة بك.

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

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

محددات الطبقة

يتيح لك محدد الفئة تعيين أنماط متعددة لنفس العنصر أو العلامة في مستند. على سبيل المثال ، قد ترغب في استبعاد أقسام معينة من النص بلون مختلف عن باقي النص في المستند. يمكن أن تكون هذه الأقسام المحددة عبارة عن "تنبيه" تقوم بتعيينه على الصفحة. يمكنك تعيين فقراتك بفصول مثل:


ص {color: # 0000ff؛ }
p.alert {color: # ff0000؛ }

هذه الأنماط ستحدد لون كل الفقرات إلى اللون الأزرق (# 0000ff) ، لكن أي فقرة ذات سمة صنف "تنبيه" ستتم بدلاً من ذلك بنمط باللون الأحمر (# ff0000). ويرجع ذلك إلى أن سمة الصف تحتوي على خصوصية أعلى من قاعدة CSS الأولى ، التي تستخدم محدد العلامات فقط.

عند العمل مع CSS ، ستتجاوز قاعدة أكثر تحديدًا قاعدة أقل تحديدًا. في هذا المثال ، تقوم القاعدة الأكثر عمومية بتعيين لون كل الفقرات ، لكن القاعدة الثانية الأكثر تحديدًا من إلغاء هذا الإعداد في بعض الفقرات فقط.

إليك كيفية استخدام ذلك في بعض ترميز HTML:


سيتم عرض هذه الفقرة باللون الأزرق ، وهو الإعداد الافتراضي للصفحة.


ستكون هذه الفقرة باللون الأزرق.


وسيتم عرض هذه الفقرة باللون الأحمر لأن سمة الفئة ستحل محل اللون الأزرق القياسي من نمط محدد العناصر.

في هذا المثال ، لن يتم تطبيق نمط "p.alert" إلا على عناصر الفقرة التي تستخدم فئة "التنبيه" هذه. إذا كنت تريد استخدام هذه الفئة عبر عناصر HTML متعددة ، يمكنك ببساطة إزالة عنصر HTML من بداية استدعاء الأسلوب (تأكد من ترك النقطة (.) في المكان) ، كما يلي:


.alert {background-color: # ff0000؛}

هذه الفئة متاحة الآن لأي عنصر يحتاج إليها. أي جزء من HTML يحتوي على قيمة سمة class من "alert" سيحصل الآن على هذا النمط. في HTML أدناه ، لدينا فقرة ومستوى عنوان 2 يستخدمان فئة "التنبيه". سيحتوي كلاهما على لون خلفية أحمر على أساس CSS الذي أظهرناه للتو.


ستكتب هذه الفقرة باللون الأحمر.

وسيكون هذا h2 أحمر أيضًا.

على مواقع الويب اليوم ، غالبًا ما يتم استخدام سمات الفئة في معظم العناصر ؛ نظرًا لأنه من الأسهل التعامل معها من منظور خصوصية أن المعرّفات. ستجد معظم صفحات HTML الحالية المراد ملؤها بسمات الصف ، والتي يتكرر بعضها عدة مرات في وثيقة وغيرها من الصفحات التي قد تظهر مرة واحدة فقط.

محددات الهوية

يسمح لك محدد ID بإعطاء اسم لنمط معين دون ربطه بعلامة أو عنصر HTML آخر . لنفترض أن لديك قسمًا في ترميز HTML يحتوي على معلومات حول حدث ما.

يمكنك إعطاء هذا القسم سمة معرّف لـ "الحدث" ، ثم إذا كنت ترغب في تحديد هذا التقسيم باستخدام حدود سوداء بعرض 1 بكسل ، فأنت تكتب رمزًا كهذا مثل:


#event {border: 1px solid # 000؛ }

التحدي مع محددات الهوية هو أنه لا يمكن تكرارها في مستند HTML. يجب أن تكون فريدة (يمكنك استخدام نفس المعرف على صفحات متعددة من موقعك ، ولكن مرة واحدة فقط في كل مستند HTML فردي). لذلك إذا كان لديك 3 أحداث احتاجت جميعها إلى هذه الحدود ، فستحتاج إلى منحهم سمات المعرّف "event1" و "event2" و "event3" ونمط كل منهم. لذلك ، سيكون من الأسهل بكثير استخدام سمة الفئة المذكورة أعلاه من "الحدث" وتمييزها كلها دفعة واحدة.

هناك تحدٍ آخر له سمات الهوية وهو أنه يتمتع بخصوصية أعلى من سمات الصف. هذا يعني أنه إذا كنت تحتاج إلى CSS لتتجاوز نمطًا سابقًا ، فقد يكون من الصعب القيام بذلك إذا كنت تعتمد بشكل كبير على المعرفات. ولهذا السبب ، ابتعد العديد من مطوري الويب عن استخدام المعرفات في ترميزهم ، حتى إذا كانوا ينوون فقط استخدام تلك القيمة مرة واحدة ، وبدلاً من ذلك تحولوا إلى سمات الفئة الأقل تحديدًا لكل الأنماط تقريبًا.

المنطقة الوحيدة التي تظهر فيها سمات المعرفات هي عندما تريد إنشاء صفحة تحتوي على روابط ارتساء في الصفحة. على سبيل المثال ، إذا كان لديك موقع ويب لنمط Parallax يحتوي على كل المحتوى في صفحة واحدة مع روابط "تقفز" إلى أجزاء مختلفة من تلك الصفحة. يتم ذلك باستخدام سمات المعرف والروابط النصية التي تستخدم هذه الروابط الثابتة.

يمكنك ببساطة إضافة قيمة هذه السمة ، مسبوقة بالرمز # ، إلى السمة href للرابط ، كما يلي:

هذا هو الرابط

عند النقر أو اللمس ، سيقفز هذا الرابط إلى جزء الصفحة التي تحتوي على سمة المعرف. إذا لم يستخدم أي عنصر في الصفحة قيمة هذا المعرّف ، فلن يعمل الرابط أي شيء.

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

المقالة الأصلية لجنيفر كرينين. حرره جيريمي جيرارد في 8/9/17