محدد CSS هو الأساس لتخطيط صفحة ويب CSS الخاصة بنا. ما هي محددات CSS بالضبط وكيفية استخدامها بشكل معقول؟ يمكن تقسيم المحددات إلى ثلاث فئات. باستثناء الفئة الأولى من محدد HTML، يمكننا تسمية الفئتين الأخريين بأنفسنا. عند التسمية، انتبه إلى تضمين الدلالات أو إضافة التعليقات الضرورية لجعل الكود الخاص بنا أكثر وضوحًا وأسهل في القراءة .
محدد علامة محدد HTML
محدد HTML عبارة عن علامة HTML، مثل: DIV، وTD، وP، وH1، وما إلى ذلك. إذا قمت بتعريفها باستخدام CSS، فسيتم عرض خصائص هذه العلامة في الصفحة التي تتحكم فيها مقالة CSS وفقًا لتعريفك.
على سبيل المثال، إذا أردنا أن يكون لون H1 أحمر، إذن: H1 {اللون: أحمر}. نتعرف هنا على إحدى ميزات CSS، والتي يمكنها تحديد عدة محددات في القاعدة. مثل: H1، H2، TD {اللون: أحمر}. يسمح هذا التعريف بأن تكون جميع H1 وH2 وTD باللون الأحمر. في استخدام محدد، يمكن دمج العديد من السمات بنفس الإعدادات وكتابتها لتقليل التعليمات البرمجية الخاصة بنا.
محدد الفئة محدد الفئة
هناك نوعان من محدد الفئة، أحدهما يسمى محدد الفئة ذات الصلة، والذي يرتبط بعلامة HTML، وصياغته هي tag.Classname {property:value}. على سبيل المثال: نريد تعيين لون بعض وليس كل H1 إلى اللون الأحمر H1.redone {color: red}: أول H1 أحمر، ولكن الثاني ليس كذلك.
النوع الثاني هو محدد فئة مستقلة. يمكن استخدامه بواسطة أي علامة HTML. بناء الجملة الخاص به هو كما يلي. Classname {property: value} إذا كان لدينا التعريف التالي blueone {color: blue} فيمكننا تطبيقه على علامات مختلفة. من الواضح جدًا أن محدد الفئة يمنحنا المزيد من الحرية ومساحة للعب.
محدد الهوية محدد الهوية
في الواقع، وظيفة محدد المعرف تشبه إلى حد كبير وظيفة محدد الفئة المستقلة. الفرق هو أن بناء الجملة والاستخدام مختلفان، كما أنهما مفيدان لجافا سكريبت في التعامل مع عناصر HTML. في مخططنا، غالبًا ما نستخدم محددات الهوية لتحديد المناطق الهيكلية المختلفة.
بناء الجملة الخاص به كما يلي #IDname {property:value}. لنفترض أن لدينا التعريف التالي #yelowone {color: Yellow}. يمكننا تطبيق هذا التعريف على أي علامة تحمل نفس اسم المعرف، مثل: النص هنا. قد تعتقد أنه بما أن محدد المعرف له نفس وظيفة محدد الفئة المستقل، فلماذا يوجد كلاهما؟ يمكن معالجة عناصر HTML ذات المعرفات بواسطة JavaScript.