37. الـ Cascade: فهم الترتيب والمصدر

CSS تعني Cascading Style Sheets. الـ 'Cascade' (الشلال) هو مجموعة القواعد التي تحدد أي إعلان نمط يفوز عندما تستهدف قواعد متعددة نفس العنصر.

ثلاثة عوامل رئيسية للـ Cascade

إذا تضارب إعلانان، يتحقق المتصفح من هذه العوامل بالترتيب:

1. المصدر (Origin)

تأتي الأنماط من مصادر مختلفة، وبعض المصادر لها أولوية أعلى:

1. أنماط وكيل المستخدم (المتصفح): الافتراضيات (مثل الروابط الزرقاء، و h1 الكبير).
2. أنماط المستخدم: الأنماط التي يضبطها المستخدم في تفضيلات المتصفح (من أجل الوصول).
3. أنماط الكاتب (CSS الخاص بك): الأنماط التي يحددها مطور الويب.
4. !important (الكاتب): أنماطك المميزة بـ !important (يجب تجنبها).
5. !important (المستخدم): أنماط المستخدم المميزة بـ !important (أعلى أولوية ممكنة).

إذا كان المصدر هو نفسه (على سبيل المثال، كلاهما أنماط الكاتب)، ينتقل المتصفح إلى التخصيص (Specificity).

2. التخصيص (Specificity)

هذا هو 'الوزن' المحسوب للمحدد (الدرس 38).

3. الترتيب (Order)

إذا كان المصدر والتخصيص متماثلين تماماً، فإن القاعدة الأخيرة المعلنة في ملف التنسيق تفوز. القواعد المعلنة لاحقاً تلغي القواعد المعلنة سابقاً.

css p { color: red; /* أعلن أولاً */ }

p { color: blue; /* أعلن آخراً، لذا سيكون النص أزرق (BLUE) */ }