تجميع المحددات

تجميع المختاريات

افترض أنك ترغب في أن يكون عنصر h2 و الفقرة باللون الرمادي. للوصول إلى هذا الهدف، أسهل طريقة هي استخدام الإعلان التالي:

h2, p {color:gray;}

وضع مختاريات h2 و p على يسار القاعدة، ثم تفصلها بالكومي، مما يحدد قاعدة. ستطبق الأنماط على اليمين (color:gray;) على العناصر المشار إليها من قبل هذه المختاريات. تخبر الكومي المتصفح أن القاعدة تحتوي على مختاريتين مختلفتين. إذا لم يكن هناك كومي، فإن معنى القاعدة سيكون مختلفًا تمامًا. راجع مختاريات الذرية.

يمكن تجميع أي عدد من المختارات معًا، وليس هناك أي قيود على ذلك.

على سبيل المثال، إذا كنت ترغب في عرض العديد من العناصر باللون الرمادي، يمكنك استخدام قاعدة مشابهة للنوع التالي:

body, h2, p, table, th, td, pre, strong, em {color:gray;}

نصيحة:من خلال التجميع، يمكن للمبدعين ضم أنواع معينة من النصائح معًا، مما يمكن أن يؤدي إلى جدول نصائح أكثر بساطة.

الآن، يمكن أن يوفر النظامين التاليين نفس النتيجة، ولكن يمكن بوضوح رؤية أيهما أسهل في الكتابة:

/* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}
/* grouping */
h1, h2, h3, h4, h5, h6 {color:blue;}

تجربة شخصية

تقسيمات تقدم بعض الخيارات المثيرة للاهتمام. على سبيل المثال، جميع مجموعات القواعد في المثال التالي متساوية، وكل مجموعة تظهر فقط طريقة مختلفة لتجميع المختارات و الجمل:

/* group 1 */
h1 {color:silver; background:white;}
h2 {color:silver; background:gray;}
h3 {color:white; background:gray;}
h4 {color:silver; background:white;}
b {color:gray; background:white;}
/* group 2 */
h1, h2, h4 {color:silver;}
h2, h3 {background:gray;}
h1, h4, b {background:white;}
h3 {color:white;}
b {color:gray;}
/* group 3 */
h1, h4 {color:silver; background:white;}
h2 {color:silver;}
h3 {color:white;}
h2, h3 {background:gray;}
b {color:gray; background:white;}

تجربة شخصية:

لاحظ أن تم استخدام 'تجميع الإعلانات' في المجموعة 3. سنتحدث عن 'تجميع الإعلانات' لاحقًا.

محدد العلامة العامة

أدخل CSS2 نوعًا جديدًا من المحددات البسيطة - المحدد العام (universal selector)، يتم عرضه كنجم ( * ). يمكن لهذا المحدد أن يتناسب مع أي عنصر، مثل علامة التبويب.

على سبيل المثال، يمكن لهذه القاعدة أن تجعل كل عنصر في الوثيقة يكون باللون الأحمر:

* {color:red;}

تجربة شخصية

هذا الإعلان يساوي قائمة المحددات التي تم إدراجها في جميع العناصر في الوثيقة. باستخدام المحدد العام، يمكنك تحديد قيمة خاصية color لجميع العناصر في الوثيقة بضرب مرة واحدة (باستخدام نجمة واحدة فقط).

تجميع الإعلانات

يمكننا تجميع المحددات أو الإعلانات معًا.

افترض أنك ترغب في أن يكون لديك جميع عناصر h1 بخلفية حمراء واستخدام الخط Verdana بارتفاع 28 بكسل لعرض النص الأزرق، يمكنك كتابة النمط التالي:

h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}

لكن هذه الطريقة ليست فعالة جدًا. خاصةً عندما تحتاج إلى إنشاء قائمة تحتوي على عدة أنماط للاعتماد على عنصر معين سيكون هذا أمرًا معقدًا. بدلاً من ذلك، يمكننا تجميع الإعلانات معًا:

h1 {font: 28px Verdana; color: white; background: black;}

وهذا النمط له نفس تأثير 3 سطرات القائمة الخاصة بالأسلوب السابقة.

لاحظ، عند تجميع الإعلانات، يجب استخدام النقطة السفلية في نهاية كل إعلان، وهو أمر مهم. سيقوم المتصفح بتجاهل الحروف الهروب في القائمة الخاصة بالأسلوب. يمكنك استخدام هذا النمط بلا خوف بعد إضافة النقطة السفلية،

h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
  }

تجربة شخصية

كيف تبدو، هل هذه الطريقة تحسين من قابلة القراءة للنص المكتوب أعلاه؟

لكن، إذا تم تجاهل النقطة السفلية الثانية، فإن المستعرض سيقوم بتفسير هذه القائمة مثلما يلي:

h1 {
  font: 28px Verdana;
  color: blue background: red;
  }

تجربة شخصية

لأن background ليس قيمة صحيحة بالنسبة لcolor، بالإضافة إلى أنك لاتستطيع تحديد أكثر من كلمة واحدة لcolor، فإن المستعرض سيقوم بتجاهل هذا الإعلان للcolor بشكل كامل (بما في ذلك background: black). بهذه الطريقة، سيظهر عنوان h1 فقط بلون أزرق، بدون خلفية حمراء، ولكن من المحتمل أن لا يظهر العنوان h1 باللون الأزرق على الإطلاق. بدلاً من ذلك، ستظهر هذه العناوين فقط بلون افتراضي (عادةً أسود) وليس لديها أي لون خلفي. يمكن أن يعمل إعلان font: 28px Verdana بشكل طبيعي، لأنه ينتهي بحرف النقاط السفلية بشكل صحيح.

مثل مجموعات المحددات، هي أيضًا طريقة مريحة يمكن أن تقلل من طول قائمة النصائح، مما يجعلها أكثر وضوحًا وسهولة الصيانة.

نصيحة:إضافة علامة نقاط السطر في نهاية آخر بيان في القانون هو عادة جيدة. عند إضافة بيان آخر إلى القانون، لا يجب أن تكون قلقًا من نسيان إضافة علامة نقاط السطر.

دمج مجموعات المحددات ومجموعات الافتراضات

يمكننا دمج مجموعات المحددات ومجموعات الافتراضات في نفس القانون، مما يسمح بتعريف أنماط معقدة باستخدام عدد قليل من العبارات.

القانون التالي يحدد نمط جميع العناوين بأنه نمط معقد:

h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

تجربة شخصية

هذا القانون يحدد نمط جميع العناوين بتنظيف النصوص باللون الأبيض واللون الرمادي، ويكون البعد الداخلي 10 بكسل، ويكون الحد الخارجي خطًا صلبًا يبلغ 1 بكسل، ويكون خط النص هو Verdana.