نستعرض في هذا المقال بعضًا من أبسط محددات CSS التي تطبق التنسيقات على ملفات HTML، والتي ستستخدمها مرارًا وتكرارًا في عملك.
ننصحك قبل متابعة القراءة أن تكون على دراية بالمواضيع التالية:
- أساسيات عمل الحاسوب
- تثبيت البرمجيات الأساسية للانطلاق في تطوير الويب
- أساسيات التعامل مع الملفات
- فكرة عن أساسيات HTML
محددات النوع
تُعرف محددات النوع Type selector أحيانًا باسم محددات الوسم tag name selector أو محددات العناصر element selector، فهي محددات تختار وسم أو عنصر HTML من الملف. لاحظ كيف استخدمنا محددات النوع span وem و strong في المثال التالي:
تطبيق: حاول أن تضيف قواعد CSS لاختيار العنصر <h1> وتغيير لونه إلى الأزرق.
المحددات العامة
يُستخدم رمز النجمة (*) للإشارة إلى المحدد العام universal selector الذي يختار كل شيء في الملف (أو داخل العنصر الأب إن ارتبط مع عناصر أخرى ومحدد عناصر سليلة descendant combinator). نستخدم في المثال التالي محددًا عامًا لإزالة الهوامش margin من جميع العناصر، وذلك لإلغاء التنسيق الافتراضي للمتصفح الذي يمنح العناوين والفقرات النصية هامشًا.
قد تشاهد أسلوبًا كهذا في التنسيق في حالات إعادة الضبط، إذ تُجرَّد الصفحة من كل التنسيقات الافتراضية للمتصفح. وطالما أن المحدد العام يطبق تغييرات كلية، فسيستخدم إذًا في حالات محددة سنشرحها تاليًا.
تسهيل قراءة بقية المحددات
تُستخدم المحددات العامة في تسهيل قراءة المحددات الأخرى وتوضيح طبيعة عملها. فلو أردنا مثلًا اختيار أي عنصر من سلالة العنصر <article> يكون الابن الأول لأبيه، بما في ذلك الأبناء المباشرين، ومن ثم إظهارهم بخط سميك، نستخدم الصنف المجرد first-child: بالإضافة إلى محدد النوع <article>:
article :first-child { font-weight: bold; }
لكن من الممكن جدًا الخلط بين هذا المحدد والمحدد article:first-child الذي يختار أي عنصر <article> يكون ابنًا لعنصر آخر. لتفادي هذا الخلط، يُضاف محدد عام إلى محدد الصنف المجرد first-child: فيصبح الأمر أكثر وضوحًا من مبدأ اختيار أي عنصر يكون الابن الأول للعنصر <article> أو الابن الأول لأي عناصر من سلالته:
article *:first-child { font-weight: bold; }
وعلى الرغم من أنّ القاعدتين تحققان النتيجة نفسها، إلا أنّ الثانية أسهل قراءةً.
محددات الصنف
تبدأ محددات الصنف class selectors بالنقطة (.)، وتختار كل ما في الملف من عناصر تمتلك هذا الصنف. لقد أنشأنا في المثال التالي الذي يعرضه محرر الشيفرة التفاعلي صنفًا يُدعى highlight وطبّقناه في أماكن عدة من ملف HTML. أما النتيجة فكانت تظليل كل العناصر التي تمتلك هذا الصنف باللون الأصفر.
استهداف الأصناف في عناصر محددة
يمكنك إنشاء محدد يستهدف عناصر محددة فقط تمتلك الصنف ذاته. نعرض في المثال التالي كيف سنظلل العنصر <span> الذي يمتلك الصنف highlight بلون مختلف عن العنصر <h1> الذي يمتلك نفس الصنف. تُنجز العملية باستخدام محدد نوع للعنصر الذي نريد استهدافه مع اسم الصنف الذي نريد تطبيقه باستخدام نقطة ودون وجود فراغات بين محدد النوع ومحدد الصنف:
يحصر هذا الأسلوب مجال الرؤية لتطبيق القاعدة، فلن تُطبق إلا على عناصر محددة مرتبطة بصنف معين. وبالطبع عليك إضافة قواعد أخرى إن أردت استهداف عناصر أخرى.
استهداف عنصر يمتلك أكثر من صنف
بإمكان أي عنصر امتلاك عدة أصناف ويمكنك استهداف هذه العناصر وفقًا لأحد هذه الأصناف أو لمجموعة معينة منها. للأمر أهميته الواضحة عند بناء المكوّنات التي يمكن ضمها معًا بطرق مختلفة في صفحة الويب.
لدينا في المثال التالي عنصر <div> يضم ملاحظة. نُطبِّق الإطار الرمادي عندما يمتلك العنصر الصنف notebox، وإن امتلك أيضًا أحد الصنفين warning وdanger نُغيّر لون الإطار border-color.
يمكننا أن نخبر المتصفح بأننا نريد أن نختار فقط العناصر التي تمتلك صنفين وذلك بربط محدديهما معًا دون فراغ. لاحظ عدم تطبيق أي تنسيق على العنصر <div> الأخير لأنه يمتلك فقط الصنف danger إذ سيحتاج (وفقًا لقواعد التنسيق التي وضعناها) الصنف notebox أيضًا:
محددات المعرّف
يبدأ محدد المعرّف بالمحرف (#) ويستخدم بالطريقة ذاتها التي يُستخدم بها محدد الصنف إلا أنه يستهدف العناصر التي تمتلك معرِّفًا ID محددًا. وبالطبع، لن يمتلك سوى عنصر واحد في الصفحة المعرِّف ذاته ولا يمكن أن يمتلك أكثر من معرّف. بإمكانك أن تبدأ القاعدة بمحدد المعرّف يليه محدد نوع لاختيار عنصر من نوع محدد إذا امتلك المعرّف المطلوب. يعرض المثال التالي حالتين شائعتين لاستخدام محدد المعرّفات:
تنبيه: قد يبدو لك أن استخدام المعرّف ذاته أكثر من مرة في الملف سينفع في تطبيق التنسيقات، لكن لا تفعل ذلك. إذ ستكون النتيجة شيفرة خاطئة وسلوكًا غريبًا لها في أماكن عدة.
ملاحظة: رأينا في مقال سابق أن تخصيص محددات المعرّف عالٍ، وسيلغي تأثير بقية المحددات. لهذا من الأفضل في الكثير من الحالات أن تُضيف صنفًا إلى العنصر بدلًا من المعرّف. لا يمنع هذا بالطبع استخدام محدد المعرّفات إن اضطررت إلى ذلك لأسباب قد تتعلق بأذونات الوصول إلى ملفات CSS أو غيرها.
ترجمة -وبتصرف- للمقال Type, class, and ID selectors
أفضل التعليقات
لا توجد أية تعليقات بعد
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.