HTML وCSS / الأساسيات / الدرس 5
المحددات والوراثة والتتالي
توقع التصريحات المطبقة بفصل المطابقة والأولوية والخصوصية والوراثة.
في هذه الصفحة
أهداف الدرس
- مطابقة العناصر المقصودة
- مقارنة الخصوصية في سياقها
- التصحيح بالدليل بدلا من القوة
مطابقة العناصر المقصودة
تقرن قاعدة CSS محددا بتصريحات. تطابق محددات النوع أسماء العناصر والأصناف رموزا قابلة لإعادة الاستخدام والمعرفات هوية فريدة. تصف العلاقات: يصل محدد السليل لأي عمق بينما يشترط > ابنا مباشرا. لا يؤثر محدد لا يطابق شيئا مهما ارتفعت خصوصيته. افحص DOM والهجاء قبل زيادة القوة. تمثل الأصناف عقد تنسيق عمليا لا يربط المظهر بتداخل عميق قابل للتغيير.
قراءة التصريحات مستقلة
يقيم كل تصريح وفق قواعد خاصيته وتتاليها. قد يفسد غياب الفاصلة المنقوطة التحليل، وقد تُتجاهل خاصية غير مدعومة. تتيح التصريحات الصحيحة بدائل لكن ترتيبها يجب أن يطابق التعزيز. تبين أدوات التطوير القيم المشطوبة وغير الصالحة والقواعد غير النشطة. تختلف أسبابها؛ فلا تعتبر كل شطب خصوصية، فقد تتقدم جهة أو طبقة أو تصريح مهم أو انتقال نشط.
مقارنة الخصوصية في سياقها
تقارن الخصوصية المحددات بعد قرارات التتالي السابقة. في مثال مؤلف عادي بلا طبقات أو !important يتقدم المعرف على الصنف والصنف على النوع. تتبع التعادل فواصل أخرى، وغالبا ترتيب المصدر عند عدم اختلاف قرب النطاق. يبقى المثال ضمن السياق البسيط فيصبح العنوان أحمر داكنا. لا يثبت أن المعرف يهزم أنماط المستخدم المهمة أو الطبقات أو الانتقالات أو كل تصريح مضمن. ميز المثال المحدود من الخوارزمية العامة.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Specificity experiment</title>
<style>
h1 { color: navy; }
.title { color: green; }
#topic { color: #8b0000; }
</style>
</head>
<body>
<main><h1 id="topic" class="title">Cascade experiment</h1></main>
</body>
</html>
The heading color is #8b0000.تطابق القواعد الثلاث في السياق العادي نفسه ويفوز المعرف للون، وتحتفظ الخصائص الأخرى بنتائجها. النتيجة المتوقعة: لون العنوان #8b0000.
الوراثة آلية أخرى
ترث خصائص كاللون والخط من الأب عادة عندما لا يملك العنصر قيمة خاصة فائزة، ولا ترث الهوامش والحدود افتراضيا. لا تنافس القيمة الموروثة كأن محدد الأب طابق الابن. يلون المثال الحاوية ثم أحد الأبناء مباشرة. استخدم inherit وinitial وunset وrevert بعد فهم اختلافها؛ فليست كلها «تراجع عن آخر قاعدة». وقد تعيد الخصائص المختصرة ضبط تفاصيل مرتبطة دون قصد.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Inheritance experiment</title>
<style>
.notice { color: #174a28; }
.special { color: #7a163a; }
</style>
</head>
<body>
<main class="notice"><h1>Inherited colors</h1><p>Ordinary paragraph.</p><p class="special">Directly colored paragraph.</p></main>
</body>
</html>
Ordinary text inherits #174a28; the special paragraph uses #7a163a.يرث العنوان والفقرة العادية الأخضر، وتملك الخاصة تصريحا يجعلها عنابية. النتيجة المتوقعة: يرث النص العادي #174a28 وتستخدم الفقرة الخاصة #7a163a.
التصحيح بالدليل بدلا من القوة
ابدأ بوصول الملف ثم مطابقة المحدد ونشاط شروطه وصحة القيمة والتصريح الفائز. افحص الخاصية المحسوبة وصندوقها. تزيد !important المبكرة صعوبة الصيانة وقد تخفي استهدافا خاطئا. حافظ على محددات معتدلة وترتيب موثق واعزل الأنماط الخارجية عند الحاجة. ستقدم الدروس الطبقات أداة ترتيب صريحة. يفسر الإصلاح لماذا يفوز تصريح، لا يكتفي بمحدد أكثر تعقيدا.
الأخطاء الشائعة وإصلاحها
لا تؤثر قاعدة في العنصر المقصود
- لماذا يحدث؟
- لا يطابق المحدد DOM الفعلية.
- كيف تصلحه؟
- افحص الصنف والعلاقة وصححهما.
- كيف تتجنب تكراره؟
- تحقق من المطابقة قبل الخصوصية.
يتجاهل ابن لون قاعدة أب معقدة
- لماذا يحدث؟
- له تصريح مباشر فائز.
- كيف تصلحه؟
- افحص المباشر منفصلا عن الموروث.
- كيف تتجنب تكراره؟
- لا تعامل الوراثة منافسة محددات.
تتراكم !important في كل مكان
- لماذا يحدث؟
- لم يصمم ترتيب التتالي.
- كيف تصلحه؟
- أزل القوة الزائدة وحدد الملكية والترتيب.
- كيف تتجنب تكراره؟
- راجع سبب كل تجاوز.
اختبر فهمك
1. يحدد محددا صنف الخاصية نفسها في الطبقة والنطاق نفسيهما. ما الفاصل عند التعادل؟
اعرض الحل المشروح
بعد تأكيد المطابقة والأهمية والجهة والطبقة وتساوي الخصوصية وقرب النطاق، يفوز التصريح اللاحق. إنه فاصل ضمن الشروط لا قاعدة أن كل تصريح متأخر يهزم السابق.
2. لماذا قد لا يغير لون الأب زرّا داخليا؟
اعرض الحل المشروح
قد يملك الزر تصريح لون مباشرا من المتصفح أو المؤلف فلا يرث. افحص المحسوب والفائز ثم استخدم color: inherit عمدا إذا ناسب التباين والحالات.
أهم ما تعلمته
- تسبق المطابقة الخصوصية.
- للتتالي قرارات مرتبة متعددة.
- تختلف القيم الموروثة عن المباشرة.