Advanced Grammar of CSS

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

يمكنك تجميع المحددات، حيث يمكن للمحددات المجمعة مشاركة نفس التصريحات. استخدم الفاصلة العبرية لفصل المحددات التي تريد تجميعها. في هذا المثال، قمنا بتجميع جميع عناصر العناوين. جميع العناصر العنوانية يجب أن تكون زرقاء.

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

الميراث والقضايا

وفقًا لـ CSS، تنقل العناصر الفرعية الخواص من العنصر الأم. ولكن ليس دائمًا يعمل هذا النمط. انظر إلى القاعدة التالية:

body {
     font-family: Verdana, sans-serif;
     }

وفقًا لهذا القانون، سيعتمد عنصر body للموقع على الخط Verdana (إذا كان الخط متاحًا في نظام المستخدم).

من خلال ميراث CSS، ستنقل العناصر الفرعية خواص العنصر الأعلى (في هذا المثال هو body) التي يمتلكها (هذه العناصر الفرعية مثل p, td, ul, ol, ul, li, dl, dt، و dd). لا تحتاج إلى قواعد إضافية، يجب أن تظهر جميع العناصر الفرعية لعنصر body باستخدام الخط Verdana، وكذلك العناصر الفرعية للعناصر الفرعية.

لكن في أوقات الحرب المتشددة في سوق المتصفحات، قد لا يحدث هذا، حيث لم يكن دعم المعايير أولوية للشركات. على سبيل المثال، لا يدعم Netscape 4 الميراث، ويتجاهل الميراث وكذلك القواعد التي تطبق على عنصر body. حتى IE/Windows إلى IE6 كان هناك مشاكل، حيث يتم تجاهل أنماط الخط في الجداول. ماذا يمكننا أن نفعل في هذه الحالة؟

كن لطيفًا مع Netscape 4

لحسن الحظ، يمكنك التعامل مع مشكلة عدم فهم المتصفحات القديمة للميراث باستخدام قانون التكرار الذي نسميه "Be Kind to Netscape 4".

body  {
     font-family: Verdana, sans-serif;
     }
p, td, ul, ol, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

Browser 4.0 cannot understand inheritance, but they can understand group selectors. Although this will waste some bandwidth for users, it must be done if support is needed for Netscape 4 users.

Is Inheritance a Curse?

If you do not want the "Verdana, sans-serif" font to be inherited by all child elements, what should you do? For example, you want the font of the paragraph to be Times. No problem. Create a special rule for p so that it will break away from the rules of the parent element:

body  {
     font-family: Verdana, sans-serif;
     }
td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }
p  {
     font-family: Times, "Times New Roman", serif;
     }