طرق ربط CSS بملف HTML وأولوياتها
| طريقة الربط | مكان الكتابة | مستوى الأولوية |
|---|---|---|
| Inline Style | داخل وسم الـ HTML مباشرة | أعلى أولوية بعد !important |
| Internal Style | داخل وسم style في الـ head | متوسطة تتأثر بالتتالي |
| External Stylesheet | في ملف .css خارجي مستقل | متوسطة (تتأثر بالتتالي) |
CSS هي لغة تتراكم فيها القواعد وتتنافس على نفس العنصر. لفهم أيّ قاعدة تفوز، عليك أن تعرف مفهومَين أساسيَّين:
أولاً: طرق ربط CSS بملف HTML
١. الـ Inline Style — يُكتب داخل الوسم مباشرةً: `<p style="color: red;">` — له أعلى أولوية بعد !important.
٢. الـ Internal (Embedded) Style — يُكتب داخل الوسم `<style>` في قسم `<head>`.
٣. الـ External Stylesheet — ملف .css مستقل يُربط بـ `<link rel="stylesheet" href="style.css">` — وهذا هو الأسلوب الأنسب للمشاريع الكبيرة.
ثانياً: حساب الخصوصية (Specificity)
كلما كان المحدد أكثر تحديداً، كانت أولويته أعلى. يُحسب كرقم من ثلاثة أعمدة (A, B, C):
| النوع | القيمة | |---|---| | style مضمّن | 1-0-0 | | id (#) | 0-1-0 | | class / pseudo-class / attribute | 0-0-1 | | element / pseudo-element | 0-0-1 (يُهمل أمام ما سبق) |
ثالثاً: التتالي (Cascade)
عند تساوي الخصوصية، تفوز القاعدة الأخيرة (الأحدث) في ترتيب الكود.
رابعاً: !important
يتجاوز كل قواعد الخصوصية — استخدمه باعتدال شديد لأنه يُصعّب صيانة الكود.
| 1 | /* طريقة الربط الخارجي */ |
| 2 | <link rel="stylesheet" href="style.css"> |
| 3 | |
| 4 | /* طريقة الربط الداخلي */ |
| 5 | <style> |
| 6 | p { color: blue; } |
| 7 | </style> |
| 8 | |
| 9 | /* Inline */ |
| 10 | <p style="color: red;">نص</p> |
| 11 | |
| 12 | /* !important — الأعلى أولوية */ |
| 13 | p { color: green !important; } |
مثال 1: مثال: تنافس القواعد وتحديد الفائز
| 1 | /* خصوصية: 0-1-0 */ |
| 2 | #title { color: blue; } |
| 3 | |
| 4 | /* خصوصية: 0-0-1 — تخسر أمام #title */ |
| 5 | .heading { color: red; } |
| 6 | |
| 7 | /* خصوصية: 0-0-0 — الأضعف */ |
| 8 | h1 { color: green; } |
| 9 | |
| 10 | /* الفائز: #title → اللون أزرق */ |
مثال 2: مثال: الترتيب يحسم التعادل
| 1 | .box { background: lightblue; } |
| 2 | .box { background: coral; } /* هذه تفوز لأنها تأتي أخيراً */ |