في الجزء السابق من سلسلة Cascading Style Sheets (CSS) 101، ناقشنا كيفية التعامل مع قواعد متعددة لعنصر ما. تتناول هذه المقالة ميزة أخرى مهمة لـ CSS: المحددات، والتي يمكن استخدامها لتحديد عناصر داخل الصفحة لإضفاء طابع نمطي على صفحة الويب.
نوع المحدد
تحتوي أنماط CSS على العديد من الطرق لتنفيذ اختيار العناصر. تتضمن طرق الاختيار المختلفة الاختيار عبر المحدد العالمي، ومحدد النوع، ومحدد الفئة، ومحدد المعرف، ومحدد السلف، ومحدد السليل، ومحدد الأخوة المجاورين، ومحدد السمة.
سننظر هنا في كل من هذه الطرق على حدة (باستثناء الأشقاء والصفات المتجاورة، والتي سنناقشها في الأسبوع المقبل). ملاحظة: دعم المتصفح لمحددات CSS غير متسق، ولكن يمكنك استخدام الإرشادات عبر الإنترنت للتحقق مما إذا كان محدد معين يعمل في متصفحك المستهدف.
عالمي
تتيح لك المحددات العامة استخدام الأنماط في جميع أنحاء الصفحة. في الأساس، لا يحدد النمط عنصرًا أو فئة معينة وما إلى ذلك، لذا فهو ينطبق على جميع العناصر الموجودة في الصفحة. وهذا مفيد لتحديد الألوان والخطوط وما إلى ذلك.
يمكن استخدام المحددات العامة لجميع العناصر الموجودة في الصفحة، ولكن يمكن تجاوزها بواسطة محددات محددة. تنص مواصفات CSS على أنه يمكن استخدام العلامة النجمية (*) لتمثيل محدد عالمي. توضح القائمة أ كيفية استخدام المحددات العامة لتعيين الخلفية والخط الافتراضي للصفحة.
يكتب
إحدى الطرق الأكثر شيوعًا لتصميم عنصر ما هي من خلال نوعه. وهذا يعني أن عنصرًا معينًا له نمط محدد خاص به، ويمكن استخدام هذا النمط لجميع العناصر من هذا النوع بغض النظر عن موضع العنصر في الصفحة. يوضح المثال الموجود في القائمة ب استخدام محدد النوع لتحديد نمط جميع عناصر المقطع في الصفحة.
باستخدام هذا النوع من المحددات، يكون لجميع عناصر الفقرة داخل الصفحة (ما لم يتم تجاوزها بواسطة محددات أكثر تحديدًا) هوامش محددة ونص أحمر. يمكنك الآن أيضًا إنشاء فئات CSS الخاصة بك للتعامل مع عناصر التصميم المحددة على الصفحة.
عطوف
تمنحك محددات الفئة تحكمًا أكبر من محددات الكتابة عندما يتعلق الأمر بتحديد ما يغطيه النمط. يمكن تطبيق الأنماط المحددة بواسطة محدد الفئة على جميع العناصر ذات سمة الفئة، بغض النظر عن موضع العنصر في الصفحة. فهو يوفر تحكمًا كبيرًا في العناصر التي تتلقى الأنماط. يوضح المثال الموجود في القائمة C استخدام فئة لتنسيق الفقرة الأولى فقط في الصفحة. لذا فإن الفقرة الأولى تحتوي على خط متعرج، والفقرات التالية مختلفة.
لا يمكن لمحددات الفئة استخدام عناصر HTML المحجوزة مثل العنوان وp وh1 وما إلى ذلك. يمكنك أيضًا استخدام فئات متعددة لنفس العنصر عن طريق فصلها بمسافات. توضح القائمة د استخدام فئات متعددة لتصميم فقرة معينة.
يمكنك دمج محددات الفئة مع محددات النوع لتصميم عناصر معينة تم تعيين فئات لها. في هذا السيناريو، عند تعريف الأنماط، يكون لاسم العنصر اسم فئة مفصول بمسافات. يوضح المثال الموجود في القائمة E التقنية التي يتم من خلالها تصميم عناصر المقاطع التي يتم منحها اسم فئة محددًا بطريقة واحدة فقط، بينما يتم تصميم الرؤوس التي لها نفس اسم الفئة بطريقة أخرى. سأتناول المزيد من التفاصيل عند استخدام سمة معرف العنصر.