قواعد متقدمة لـ CSS

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

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

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

الوراثة وأسئلتها

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

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

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

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

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

كن لطيفًا مع 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;
     }

المراكز 4.0 لا يمكنها فهم الوراثة، ولكنها يمكنها فهم المحددات الجماعية. قد يؤدي هذا إلى إهدار بعض عرض المستخدمين، ولكن إذا كان من الضروري دعم مستخدمي Netscape 4، فإنه يجب القيام بذلك.

هل الوراثة لعنة؟

إذا لم تكن ترغب في أن يورث "Verdana, sans-serif" الخط لجميع العناصر الفرعية، ماذا يجب أن تفعل؟ على سبيل المثال، إذا كنت ترغب في أن يكون خط الفقرة Times. ليس هناك مشكلة. قم بإنشاء قاعدة خاصة للـ p، حيث سيتمكن من التخلص من قواعد العنصر الأب:

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;
     }