في هذا الدرس 7تصفّح المواضيع
تحمل الكلمة الأولى في اسم لغة أوراق الأنماط المتتالية (Cascading Style Sheets) سرّ المحرك الذكي الذي يمنع الفوضى داخل المتصفح. ففي أي صفحة حقيقية قد ينطبق على فقرة واحدة مثل <p id="lead" class="intro"> أكثر من قاعدة في الوقت نفسه: قاعدة عامة للفقرات، وقاعدة للصنف، وقاعدة للمعرّف، فضلاً عن تنسيق المتصفح الافتراضي.
وعندما تطلب قاعدتان إعطاء الخاصية نفسها قيمتين مختلفتين — كأن تحدد إحداهما color: crimson; وتحدد الأخرى color: navy; — لا يرتبك المتصفح ولا يختار عشوائياً، بل يمرر القواعد المتنافسة عبر مصفاة دقيقة تُسمى خوارزمية التتالي (The Cascade) تفحص بالترتيب: مصدر النمط، ثم وزن التحديد، وأخيراً ترتيب الورود ليخرج فائز واحد فقط.
قبل الدخول في حساب أوزان المحددات، ينظر المتصفح أولاً إلى مصدر الأنماط (Style Origin). فكل متصفح يمتلك ورقة تنسيق افتراضية مدمجة تُسمى User-Agent Stylesheet تمنح وسوم HTML الخام تمايزاً مبدئياً كتكبير <h1> عن <p>. وبمجرد أن تكتب أنت أي قاعدة في أنماط المطور (Author Styles) — خارجيةً كانت أم داخلية أم سطرية — فإنها تتفوق تلقائياً على افتراضات المتصفح.
أما حين تتنافس قاعدتان من أنماط المطور ولهما القوة نفسها تماماً، فيحتكم المتصفح إلى ترتيب الورود (Source Order)؛ أي تفوز القاعدة المكتوبة أخيراً في التسلسل من الأعلى إلى الأسفل، سواء داخل ملف .css واحد أو بحسب ترتيب ظهور وسوم <link> و <style> داخل <head>.
.status-banner {
color: crimson;
font-size: 22px;
}
/* Same selector weight: later color wins */
.status-banner {
color: darkgreen;
}ماذا يحدث لو كتبت قاعدة للصنف .alert في السطر الأول من الملف، ثم كتبت قاعدة عامة للفقرة p في السطر الأخير؟ سيفوز الصنف .alert رغم وجوده في الأعلى! والسبب هو أولوية التحديد (Specificity) التي تقيس مدى دقة المحدد، فالمحدد الأدق يهزم المحدد الأعم دائماً بغض النظر عن ترتيب الأسطر:
- المحدد الشامل (
*): الدرجة الأدنى بوزن صفري، وينطبق على جميع العناصر بلا تخصيص. - محدد اسم الوسم (
pأوh1): يستهدف نوع العنصر عموماً ويتفوق على المحدد الشامل. - محدد الصنف (
.intro): أكثر تخصيصاً من اسم الوسم فيتغلب علىpوh1حتى لو سَبَقَهما في الملف. - محدد المعرّف الفريد (
#main-banner): يستهدف عنصراً واحداً بعينه فيتفوق على الأصناف والوسوم معاً. - النمط السطري المباشر (
style="..."): يُكتب على الوسم مباشرةً فيتفوق على جميع محددات ملف التنسيق الخارجي والداخلي.
<style>
#hero-note { color: navy; }
.card-note { color: teal; }
p { color: crimson; }
</style>
<p id="hero-note" class="card-note">ID wins!</p>
<p class="card-note">Class beats tag!</p>
<p>Plain tag uses crimson.</p>يحسب المتصفح وزن أي محدد رياضياً عبر ثلاث خانات مستقلة تُكتب بالصورة (ID, Class, Element):
- الخانة الأولى للمعرّفات (ID): يُضاف إليها
1لكل معرّف مثل#hero-note. - الخانة الثانية للأصناف (Class): يُضاف إليها
1لكل صنف مثل.card-note. - الخانة الثالثة للوسوم (Element): يُضاف إليها
1لكل اسم وسم مثلpأوh1، بينما يأخذ*صفراً في الخانات الثلاث.
تُقارن الخانات من اليسار إلى اليمين خانةً بخانة لا كعدد عشري واحد؛ فوجود 1 في خانة المعرّف (1, 0, 0) يحسم الفوز فوراً ولو نافسته عشرون فئة صنفية (0, 20, 0)!
| طريقة الاستهداف | مثال عملي | الوزن (ID, Class, Element) | مرتبة القوة |
|---|---|---|---|
| المحدد الشامل | * | (0, 0, 0) | وزن صفري مبدئي |
| محدد الوسم | p أو h1 | (0, 0, 1) | يتفوق على المحدد الشامل |
| محدد الصنف | .card-note | (0, 1, 0) | يتفوق على أي عدد من الوسوم |
| محدد المعرّف | #hero-note | (1, 0, 0) | يتفوق على أي عدد من الأصناف |
| السمة السطرية | style="color: navy;" | طبقة سطرية تعلو (1, 0, 0) | تتفوق على قواعد ملف التنسيق |
تخيّل كم سيكون مرهقاً لو اضطررت إلى تكرار لون النص وحجمه على كل فقرة وكل كلمة داخل الصفحة! لتوفير هذا الجهد، تقسم لغة CSS الخصائص من حيث انتقالها بين العناصر المتداخلة إلى سلوكين طبيعيين:
- خصائص نصية موروثة تلقائياً: تنتقل خصائص النصوص مثل اللون
colorوحجم الخطfont-sizeتلقائياً من العنصر الأب (مثل<body>أو<div>) إلى جميع الأبناء والأحفاد داخله ما لم يمتلك الابن قاعدة مباشرة تخصه. - خصائص هيكلية غير موروثة: لا تنتقل خصائص صندوق العنصر (مثل الأبعاد والمساحات والخلفيات والإطارات المحيطة) إلى الأبناء تلقائياً؛ لأن وراثتها كانت ستؤدي إلى تكرار إطار الحاوية الأم حول كل فقرة وعبارة بداخلها!
تقبل جميع خصائص CSS أربع كلمات مفتاحية قياسية عالمية تمنحك تحكماً صريحاً في فرض الوراثة أو التراجع عن التنسيق عند الحاجة:
| الكلمة المفتاحية | السلوك الدقيق في المتصفح | متى نستخدمها عملياً؟ |
|---|---|---|
inherit | تجبر العنصر على نسخ القيمة المحسوبة من عنصره الأب المباشر | إلزام عنصر فرعي بمطابقة لون الحاوية الأم بدلاً من لونه الخاص |
initial | تعيد الخاصية إلى القيمة الابتدائية المجردة في مواصفة اللغة | إرجاع خاصية غير موروثة إلى نقطة الصفر المعيارية للمواصفة |
unset | تعمل عمل inherit للخصائص الموروثة وعمل initial لغير الموروثة | مسح تنسيق المطور بذكاء وفق الطبيعة الفطرية للخاصية |
revert | تلغي أنماط المطور وتعود إلى نمط المتصفح الافتراضي للوسم | استعادة الحجم الطبيعي لعنوان <h1> كما يعرضه المتصفح أصلاً |
<style>
.parent-box { color: navy; font-size: 20px; }
p { color: crimson; }
.match-parent { color: inherit; }
.restore-heading { font-size: revert; }
</style>
<div class="parent-box">
<h1 class="restore-heading">Heading Size Reverted</h1>
<p>Paragraph uses crimson.</p>
<p class="match-parent">Forced to inherit navy!</p>
</div>عندما تكتب قاعدة تنسيق ولا ترى أثرها على العنصر، لا تلجأ إلى التجربة العشوائية؛ بل انقر بزر الفأرة الأيمن واختر فحص العنصر (Inspect) لقراءة قرار التتالي مباشرةً عبر لوحتين متكاملتين في DevTools:
- تبويب Styles: يرتب جميع القواعد المطابقة للعنصر من الأقوى في الأعلى (
element.styleثم المعرّف ثم الصنف ثم الوسم) نزولاً إلى أقسام الوراثة Inherited from في الأسفل، ويضع خطاً مشطوباً في منتصف كل خاصية خاسرة لتعرف فوراً أنها طابقت العنصر لكن قاعدة أقوى غلبتها. - تبويب Computed: يعرض القيمة النهائية المحسوبة الفائزة لكل خاصية بعد انتهاء جميع مراحل التتالي والوراثة، مع إمكانية فتح السهم بجوار الخاصية للقفز إلى رقم السطر الفائز مباشرةً.
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعرّفت في هذا الدرس على آلية التتالي وحساب أولوية المحددات بالخانات الثلاث (ID, Class, Element) ودور ترتيب الورود والوراثة وكلمات التحكم القياسية الأربع (inherit و initial و unset و revert) وتشخيصها في DevTools. وفي الخطوة التالية ستدرس قاعدة الأولوية القصوى في لغة CSS لتفهم متى وكيف تُكسر الأولوية المعتادة وكيف تتجنب فوضى الصيانة.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 The Cascade خوارزمية التتالي
- الخوارزمية القياسية التي يطبقها المتصفح لحسم التعارض بين التصريحات المتنافسة عبر فحص مصدر النمط ثم وزن التحديد ثم ترتيب الورود.
- للمراجعة
- 02 Specificity أولوية التحديد
- مقياس رياضي من ثلاث خانات (المعرّف، الصنف، الوسم) يحدد درجة دقة المحدد ويفاضل بين القواعد المتعارضة.
- للمراجعة
- 03 Property Inheritance وراثة الخصائص
- انتقال القيم المحسوبة لبعض الخصائص النصية كاللون وحجم الخط تلقائياً من العنصر الأب إلى العناصر الأبناء بداخله.
- للمراجعة
- 04 User-Agent Stylesheet ورقة أنماط المتصفح الافتراضية
- مجموعة التنسيقات الأساسية المدمجة داخل المتصفح لمنح عناصر الصفحة مظهراً مقروءاً قبل تطبيق أنماط المطور.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 UA UA
- User Agent
- برنامج عميل الويب (المتصفح) الذي يحلل المستندات ويزود العناصر بورقة الأنماط الافتراضية الأساسية.
- للمراجعة
- 02 DOM DOM
- Document Object Model
- شجرة عناصر المستند الهرمية التي تنتقل عبر علاقات الأب والابن فيها خصائص التنسيق الموروثة.
- للمراجعة
- 03 CSSOM CSSOM
- CSS Object Model
- النموذج الهيكلي لقواعد الأنماط في الذاكرة والذي يدمجه المتصفح مع شجرة العناصر لتنفيذ خوارزمية التتالي.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال هرم الأولوية في محرر التجريب وانقل قاعدة الوسم p إلى أعلى الملف، وتحقّق من بقاء فوز المعرّف والصنف كما هو دون تأثر بترتيب الأسطر.
-
افتح مثال كلمات التحكم بالوراثة في محرر التجريب وبدّل القيمة revert في صنف العنوان إلى initial لملاحظة كيف يتقلص حجم العنوان بدلاً من العودة لحجم المتصفح الافتراضي.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.