یکی از اصول کلیدی در CSS، مفهوم Cascade یا آبشاری بودن است. این اصل مشخص میکند وقتی چندین قانون مختلف برای یک عنصر نوشته شده باشد، مرورگر کدام قانون را اجرا کند.
🧠 Cascade یعنی چه؟
واژهی Cascade به معنی آبشار کوچک است؛ مجموعهای از جریانها که از بالا به پایین حرکت میکنند. در CSS هم قوانین بهصورت لایهلایه از منابع مختلف (پیشفرض مرورگر، فایلهای CSS، استایلهای داخلی و…) به سمت مرورگر میآیند و در نهایت تصمیم گرفته میشود کدام استایل روی عنصر اعمال شود.
🧱 مراحل Cascade
1. استایلهای پیشفرض مرورگر
حتی اگر هیچ CSS ننویسیم، مرورگرها یک سری استایل پیشفرض دارند. مثلاً <h1> همیشه بزرگتر از <p> نمایش داده میشود.
2. قوانین CSS ما
وقتی توسعهدهنده قوانین جدیدی مینویسد، این قوانین جایگزین پیشفرضها میشوند:
h1 {
font-size: 20px;
font-weight: normal;
}
🧬 Inheritance (وراثت در CSS)
برخی ویژگیها از والد به فرزند منتقل میشوند.
مثال:
body {
color: green;
}
تمام متنهای داخل صفحه سبز میشوند، مگر اینکه در جایی دیگر بازنویسی شوند.
بازنویسی:
footer {
color: orange;
}
اینجا رنگ متن در <footer> و فرزندانش نارنجی میشود.
🎯 Specificity (اولویت قوانین)
وقتی چند قانون برای یک عنصر نوشته شود، مرورگر باید تصمیم بگیرد کدام اجرا شود. اصل کلی: قانون خاصتر بر قانون عمومیتر ارجحیت دارد.
قوانین سادهی Specificity
- انتخابگر تودرتو خاصتر از انتخابگر ساده است
p { color: green; }
footer p { color: orange; } /* ← این اجرا میشود */
- انتخابگر عمیقتر خاصتر است
body footer p { color: red; }
- کلاس از تگ خاصتر است
.highlight { color: purple; }
- ترکیب کلاس و والد خاصتر از کلاس تنهاست
footer .highlight { color: blue; }
- اگر دو قانون مساوی باشند، آخرین قانون اجرا میشود
.highlight { color: red; }
.highlight { color: blue; } /* ← این اجرا میشود */
📌 جمعبندی
- Cascade: قوانین CSS بهصورت لایهلایه از بالا به پایین اعمال میشوند.
- Inheritance: برخی ویژگیها مثل رنگ متن از والد به فرزند منتقل میشوند.
- Specificity: مرورگر بر اساس میزان خاص بودن انتخابگرها تصمیم میگیرد کدام قانون اجرا شود.