إذا كنت تتطلع إلى تطبيق قواعد النمط على موقع الويب الخاص بك، ثم المحددات هي المورد المشار إليه. هناك عدة أنواع من المحددات، بعضها أكثر شيوعًا. لهذا اليوم نعرض لك محددات السمات الموجودة في CSS، حتى تتمكن من تحقيق أقصى استفادة من هذه الأدوات.
باستخدام CSS يمكنك استخدام العديد من الخيارات التي ستساعدك بشكل كبير في عرض موقع الويب الخاص بك. محددات السمات وسوف تعمل على تحديد العناصر، وجعل عملية التخصيص أسهل. على الرغم من أن هذا الموضوع يمكن أن يكون معقدًا بالنسبة للأشخاص غير المرتبطين به، إلا أن التعرف عليه يمكن أن يفتح لك العديد من الأبواب.
ماذا يعني CSS؟
إذا كنت مرتبطًا بعالم تصميم الويب، فلا بد أنك سمعت هذا المصطلح كثيرًا. اوراق النمط المتعاقب (CSS) هي لغة برمجة تسمح لك بإنشاء وتعديل مستند HTML بسرعة وسهولة. وهذا يعني أنها لغة يمكنك من خلالها إدارة التصميم وإجراء التغييرات والعرض التقديمي والتحسينات وكذلك تخصيص صفحات الويب. يأتي اسمها من حقيقة أنها تسمح لك بحساب الخصائص الموروثة من شخص آخر على عدة أوراق. في تصميم الويب يسمى هذا بالشلال.
ما هي محددات السمات في CSS؟
محددات CSS إنها الأدوات التي تستخدمها لتحديد النمط الذي تريد منحه لعناصر CSS الخاصة بك. هناك أنواع عديدة من المحددات في هذه اللغة، ولكل منها تركيبها الخاص وفائدتها. يساعد استخدام قواعد البرمجة الصحيحة المتصفح على تطبيق خصائص معينة على عناصر محددة.
من جانبها، محددات السمات هي أحد أنواع المحددات الموجودة في CSS. إنها مفيدة جدًا، على الرغم من أنها في بعض الأحيان لا تكون معروفة جيدًا مثل المحددات الأخرى الأكثر شيوعًا مثل محددات الفئة أو العلامات. يتم استخدام محددات CSS لـ حدد الحقول التي نريد تطبيق الأنماط عليها.
في CSS، تعمل المحددات على تحديد عناصر HTML لصفحة الويب الخاصة بنا والتي نريد تطبيق النمط عليها. يحتوي CSS على العديد من المحددات التي تسمح لك بتحديد العناصر بدقة كبيرة عند تطبيق الأنماط. تضمن محددات السمات المزعومة تحديد عناصر HTML بناءً على سماتها و/أو قيمها.
ما هي أنواع محددات السمات؟
[اسم السمة] يحدد العناصر التي تم تعيين السمة المسماة attribute_name بغض النظر عن قيمتها.
[اسم_السمة=القيمة] يحدد العناصر التي تم تعيين سمتها المسماة attribute_name على قيمة مساوية للقيمة.
[اسم_السمة~=القيمة] يحدد العناصر التي تحتوي على سمة تسمى attribute_name set وواحدة على الأقل من قيم السمة هي القيمة.
[اسم_السمة|=القيمة]، يحدد العناصر التي لها سمة تسمى attribute_name set.
[اسم_السمة$=القيمة] حدد العلامات التي تنتهي سماتها بهذه القيمة.
[اسم_السمة^=القيمة] يختار العلامات التي تبدأ سماتها بهذه القيمة.
كيفية الربط بين الحروف الكبيرة والصغيرة؟
إذا كنت تريد ربط قيم السمات غير حساس لحالة الأحرف، يمكنك استخدام القيمة "i" قبل قوس الإغلاق. تخبر هذه العلامة المتصفح بمطابقة جميع أحرف ASCII، بغض النظر عما إذا كانت أحرفًا كبيرة أو صغيرة. بدون هذه العلامة، يتم ربط القيم وفقًا لإرشادات اللغة الحساسة لحالة الأحرف الخاصة بالمستند. HTML حساس لحالة الأحرف.
ما هي عوامل تحديد السمات؟
يمكننا ان نستخدم بعض العوامل لمحددات السمات غير معروفة جيدًا، والتي تسمح لنا بتحسين مظهر قيم معينة بشكل ملحوظ في السمات التي تم الرجوع إليها.
هذه هي العوامل المتاحة في محددات السمات
*= (يحتوي على): يتيح لك عامل التشغيل * تحديد العناصر التي تحتوي على سلسلة محددة كقيمة للسمة مرة واحدة على الأقل.
^= (يحدث في بداية قيمة السمة): اختر العناصر التي لها سمة تبدأ قيمتها بسلسلة محددة.
$= (يحدث في نهاية قيمة السمة): يحدد العناصر التي لها سمة تنتهي قيمتها بسلسلة محددة.
~= (يحتوي على كلمة محددة أو مفصولة بمسافات): يختار العناصر التي تحتوي قيمة سماتها على محتوى يتطابق تمامًا مع سلسلة محددة، أو يحتوي على كلمة مفصولة بمسافات مع سلسلة محددة.
|= (يحتوي على الكلمة المحددة أو مفصولة بواصلات): مشابه لما سبق، ولكن يمكن فصل الكلمة بالواصلات بدلاً من المسافات.
كيفية استخدام المحددات في CSS؟
هناك طريقتان محتملتان لاستخدام المحددات في CSS. إذا كان لديك كود HTML ورمز CSS في نفس المستند، كل ما عليك فعله هو إضافة محدد CSS في رأس موقعك.
من ناحية أخرى، إذا كان HTML وCSS الخاصان بك موجودين في مستندات منفصلة، قد يكون لديك مستند يسمى Index.html ومستند آخر يسمى style.css. يجب أن يتضمن ملف Index.html سطرًا من التعليمات البرمجية الذي يستدعي ملف CSS، حتى يتم عرض الأنماط بشكل صحيح على موقع الويب الخاص بك.
ما هي أنواع المحددات الأخرى التي نجدها في CSS؟
هناك مجموعات مختلفة من المحددات. كن على دراية بنوع المحدد الذي تحتاجه سوف تساعدك على استخدام الأداة المثالية لمشروعك. ولهذا السبب نعرض لك بعضًا منها أدناه:
محددات النوع والفئة والمعرف
تشمل هذه المجموعة المحددات التي تقيد عنصر HTML، مثل الملف. ويحتوي أيضًا على محددات تقيد فئة أو معرفًا.
الفئات الزائفة والعناصر الزائفة
تتضمن هذه المجموعة من المحددات فئات زائفة، والتي يقومون بتنسيق حالات محددة لعنصر ما. على سبيل المثال، تحدد الفئة الزائفة hover عنصرًا فقط عند تمرير الماوس فوقه. يتضمن أيضًا العناصر الزائفة التي تحدد جزءًا معينًا من العنصر بدلاً من العنصر نفسه
المجمعات
من خلال هذه السلسلة من المحددات يتم دمج المحددات الأخرى، بهدف فصل العناصر المختلفة لوثائقنا.
محدد عالمي
العلامة النجمية (*) هي رمز المحدد العام تلقائيًا، يختار كافة عناصر وثيقة معينة.
محدد الهوية
تم تحقيق هذا النوع بهدف اختيار العناصر التي تعتمد على سمة المعرف.
إذا كنت تتطلع إلى التحكم في كل ما يحدث على موقع الويب، بالتأكيد أفضل طريقة للحصول عليه هي من خلال التصميم الخاص بك. بالنسبة لهم، يمكنك استخدام أدوات مثل محددات السمات. لذا إذا كنت تتساءل عن محددات السمات الموجودة في CSS، في هذه المقالة نأمل أن نكون قد قدمنا لك الإجابات. إذا كنت تعتقد أننا أهملنا شيئًا مهمًا، فأخبرنا بذلك في التعليقات.
