اوراق النمط المتعاقب تحديد مظهر عنصر صفحة الويب عن طريق الربط بالسمات التي تطبقها على هذا العنصر. يمكن أن تكون هذه السمات إما معرفًا أو فئة ، ومثل جميع السمات ، فإنها تضيف معلومات مفيدة إلى العناصر التي يتم إرفاقها بها.
بناءً على السمة التي تضيفها إلى عنصر ما ، يمكنك كتابة محدد CSS لتطبيق ملف الأنماط المرئية الضرورية اللازمة لتحقيق الشكل والمظهر لهذا العنصر والموقع الإلكتروني ككل.
بينما تعمل المعرفات أو الفئات بغرض ربطها بقواعد CSS ، وتصميم الويب الحديث تفضل الأساليب الفئات على المعرفات ، جزئيًا ، لأنها أقل تحديدًا وأسهل في العمل معها بشكل عام.
فئة أو أكثر في CSS؟
في معظم الحالات ، تقوم بتعيين سمة فئة واحدة لعنصر ، لكنك في الواقع لست مقيدًا بفئة واحدة فقط كما هي مع المعرفات. بينما عنصر يمكن أن يكون لديك سمة ID واحدة فقط ، ويمكنك إعطاء عنصر عدة فئات ، وفي بعض الحالات ، يؤدي القيام بذلك إلى تسهيل تصميم صفحتك والمزيد مرن.
إذا كنت بحاجة إلى تعيين عدة فئات لعنصر ما ، فأضف الفئات الإضافية وافصل بينها ببساطة بمسافة في السمة الخاصة بك.
على سبيل المثال ، تحتوي هذه الفقرة على ثلاث فئات:
سيكون هذا نص الفقرة
يقوم هذا بتعيين الفئات الثلاثة التالية في علامة الفقرة:
- سحب الاقتباس
- متميز
- غادر
لاحظ المسافات بين كل من قيم هذه الفئة. هذه المساحات هي ما يجعلها فئات فردية مختلفة. هذا أيضًا هو السبب في عدم احتواء أسماء الفئات على مسافات لأن القيام بذلك سيؤدي إلى تعيينها كفئات منفصلة.
بمجرد أن تحصل على قيم صفك في لغة البرمجة، يمكنك بعد ذلك تعيينها كفئات في CSS الخاص بك وتطبيق الأنماط التي تريد إضافتها. على سبيل المثال.
.سحب الاقتباس {... }
.متميز {... }
ص. اليسار {... }
في هذه الأمثلة ، تظهر أزواج قيم وإعلانات CSS داخل الأقواس المتعرجة ، وهي الطريقة التي سيتم بها تطبيق هذه الأنماط على المحدد المناسب.
اذا أنت تعيين فئة لعنصر معين (على سبيل المثال، ص) ، لا يزال بإمكانك استخدامه كجزء من قائمة الفئات ؛ ومع ذلك ، يجب أن تدرك أنه سيؤثر فقط على تلك العناصر المحددة في CSS. وبعبارة أخرى ، فإن ملف ص لن يتم تطبيق النمط إلا على الفقرات التي تحتوي على هذه الفئة نظرًا لأن المحدِّد الخاص بك يقول في الواقع لتطبيقه على "فقرات ذات قيمة فئة غادر، "على النقيض من ذلك ، لا يحدد المحددان الآخران في المثال عنصرًا معينًا ، لذلك يمكن تطبيقهما على أي عنصر يستخدم قيم الفئة هذه.
فئات متعددة ودلالات وجافا سكريبت
ميزة أخرى لاستخدام عدة فئات هي أنه يزيد من إمكانيات التفاعل.
قم بتطبيق فئات جديدة على العناصر الموجودة باستخدام JavaScript دون إزالة أي من الفئات الأولية. يمكنك أيضًا استخدام الفئات لتعريف دلالات العنصر - إضافة فئات إضافية لتحديد ما يعنيه هذا العنصر دلالة. هذا النهج هو كيف تنسيقات microformat يعمل.
مزايا الطبقات المتعددة
يمكن أن يؤدي وضع عدة طبقات إلى تسهيل إضافة تأثيرات خاصة إلى العناصر دون الحاجة إلى إنشاء نمط جديد تمامًا لهذا العنصر.
على سبيل المثال ، لتحريك العناصر إلى اليسار أو اليمين ، يمكنك كتابة فئتين:
غادر.
و.
حق.
مع فقط.
تعويم: اليسار؛
و.
تعويم: صحيح ؛
فيهم. بعد ذلك ، كلما كان لديك عنصر تحتاج إلى تحريكه إلى اليسار ، يمكنك ببساطة إضافة الفئة "left" إلى قائمة فصولها.
ومع ذلك ، هناك خط رفيع للمشي هنا. تذكر أن معايير الويب تملي الفصل بين الأسلوب والهيكل. يتم التعامل مع البنية باستخدام HTML بينما يكون النمط في CSS. إذا كان مستند HTML الخاص بك ممتلئًا بعناصر تحتوي جميعها على أسماء فئات مثل "أحمر" أو "يسار" ، فهذه الأسماء هي تلك تملي كيف يجب أن تبدو العناصر بدلاً من ما هي عليه ، فأنت تعبر هذا الخط بين الهيكل والأسلوب.
عيوب الطبقات المتعددة
أكبر عيب في استخدام عدة فئات متزامنة على عناصرك هو أنه يمكن أن يجعل النظر إليها وإدارتها أمرًا صعبًا بعض الشيء مع مرور الوقت. قد يكون من الصعب تحديد الأنماط التي تؤثر على العنصر وما إذا كان هناك أي نصوص تؤثر عليه. العديد من الأطر المتاحة اليوم ، مثل Bootstrap ، تستخدم بشكل مكثف العناصر ذات الفئات المتعددة. يمكن أن يخرج هذا الرمز عن السيطرة ويصعب التعامل معه بسرعة كبيرة إذا لم تكن حريصًا.
عند استخدام عدة فئات ، فإنك تخاطر أيضًا بأن يتخطى نمط فئة واحدة نمط فئة أخرى. يمكن أن يجعل هذا التصادم من الصعب معرفة سبب عدم تطبيق الأنماط الخاصة بك حتى عندما يبدو أنه ينبغي ذلك. كن على دراية بالخصوصية ، حتى مع السمات المطبقة على هذا العنصر.
باستخدام أداة مثل أدوات مشرفي المواقع في Google Chrome ، يمكنك أن ترى بسهولة أكبر كيف تؤثر فصولك على أنماطك وتجنب مشكلة الأنماط والسمات المتعارضة.