الشلال هو ما يجعل أوراق الأنماط CSS مفيدة للغاية. باختصار ، يحدد الشلال ترتيب الأسبقية لكيفية تطبيق الأنماط المتعارضة. بمعنى آخر ، إذا كان لديك نمطان:
ص {color: red؛ }ص {color: blue؛ }
يحدد التتالي أي لون يجب أن تكون الفقرات ، على الرغم من أن ورقة الأنماط تنص على أنه ينبغي أن يكون أحمر وأزرق. في نهاية المطاف يمكن تطبيق لون واحد فقط على الفقرات ، لذلك يجب أن يكون هناك طلب. ويتم تطبيق هذا الأمر من خلال تحديد المختارين ( ص
في المثال أعلاه) لها الأسبقية الأعلى وترتيب ظهورها في المستند.
القائمة التالية هي تبسيط للطريقة التي يقرر بها المتصفح الأسبقية لنمط:
- ابحث في ورقة الأنماط لأحد المحددات المطابقة للعنصر. إذا لم تكن هناك أنماط محددة ، فاستخدم القواعد الافتراضية في المتصفح
- ابحث في ورقة الأنماط عن المحددات المحددة
!مهم
وتطبيقها على العناصر المناسبة. - ستحل جميع الأنماط في ورقة الأنماط أنماط المستعرض الافتراضية (باستثناء حالة أوراق أنماط المستخدم).
- كلما كان محدد الأسلوب أكثر تحديدًا ، كلما كانت الأسبقية أعلى. فمثلا،
div> p.class
أكثر تحديدًا منp.class
وهو أكثر تحديدا منص
. - وأخيرًا ، إذا تم تطبيق قاعدتين على نفس العنصر ولديك نفس أولوية المحدد ، فإن الأسبقية تم تحميلها الاخير سيتم تطبيقه. بمعنى آخر ، تتم قراءة ورقة الأنماط من أعلى إلى أسفل ، ويتم تطبيق الأنماط فوق بعضها البعض.
وبناءً على هذه القواعد ، في المثال أعلاه ، ستتم كتابة الفقرات باللون الأزرق ، لأن ص {color: blue؛ }
يأتي في ورقة الأنماط.
هذا هو تفسير مبسط جدا للشلال. إذا كنت مهتمًا بمعرفة المزيد حول كيفية عمل التتالي ، فيجب عليك قراءة ماذا يعني "Cascade" في أوراق الأنماط المتتالية ؟.