تعلم ماذا تتالي في أوراق الأنماط المتتالية

دورة CSS قصيرة

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

ص {color: red؛ }
ص {color: blue؛ }

يحدد التتالي أي لون يجب أن تكون الفقرات ، على الرغم من أن ورقة الأنماط تنص على أنه ينبغي أن يكون أحمر وأزرق. في نهاية المطاف يمكن تطبيق لون واحد فقط على الفقرات ، لذلك يجب أن يكون هناك طلب.

ويتم تطبيق هذا الترتيب بواسطة المحددات (p في المثال أعلاه) لها الأسبقية الأعلى وترتيب ظهورها في المستند.

القائمة التالية هي تبسيط للطريقة التي يقرر بها المتصفح الأسبقية لنمط:

1. ابحث في ورقة الأنماط لأحد المحددات المطابقة للعنصر. إذا لم تكن هناك أنماط محددة ، فاستخدم القواعد الافتراضية في المتصفح
2. ابحث في ورقة الأنماط عن المحددات التي تم تعليمها! مهم وقم بتطبيقها على العناصر المناسبة.
3. ستحل جميع الأنماط في ورقة الأنماط أنماط المستعرض الافتراضية (باستثناء حالة أوراق أنماط المستخدم).
4. كلما كان محدد الأسلوب أكثر تحديدًا ، كلما كانت الأسبقية أعلى. على سبيل المثال ، div> p.class أكثر تحديدًا من p.class وهو أكثر تحديدًا من p.
5. وأخيرًا ، إذا تم تطبيق قاعدتين على نفس العنصر ولديك نفس أولوية المحدد ، فسيتم تطبيق آخر تم تحميله آخر . بمعنى آخر ، تتم قراءة ورقة الأنماط من أعلى إلى أسفل ، ويتم تطبيق الأنماط فوق بعضها البعض.

وبناءً على هذه القواعد ، في المثال أعلاه ، سيتم كتابة الفقرات باللون الأزرق ، لأن p {color: blue؛ } يأتي في ورقة الأنماط.

هذا هو تفسير مبسط جدا للشلال. إذا كنت مهتمًا بمعرفة المزيد حول كيفية عمل التتالي ، فيجب عليك قراءة ماذا يعني "Cascade" في أوراق الأنماط المتتالية؟ .