شرح صفوف ومحتوى الفقرة
يصعب أحياناً اختبار الحالات اللحظية مثل :active أو :focus بالفأرة وحدها لأن رفع الإصبع يلغي الحالة فوراً. توفر لك أدوات المطور DevTools أداة تثبيت مباشرة وسريعة:
- انقر بزر الفأرة الأيمن على عنصر
<a>واختر Inspect لتحديده في شجرة العناصر. - اضغط على الزر
:hovفي أعلى لوحة الأنماطStylesلفتح قائمة الحالات التفاعلية. - فعّل مربعات الاختيار بجانب
:hoverأو:focusأو:activeأو:visitedلتثبيت مظهرها ومراجعة تباين ألوانها بهدوء.
| الفئة التفاعلية | موقعها في LVHFA | متى تتفعل؟ | إرشاد التنسيق الأساسي |
|---|---|---|---|
:link | الأولى — L | رابط غير مزار يملك href | لون واضح التباين مع خط سفلي مريح للقراءة |
:visited | الثانية — V | عنوان موجود في سجل التصفح | مقيدة بخصائص الألوان فقط لحماية خصوصية الزائر |
:hover | الثالثة — H | وقوف مؤشر الفأرة فوق الرابط | تغيير لوني أو تسطير يؤكد استجابة الرابط |
:focus | الرابعة — F | الوصول عبر مفتاح Tab | إطار خارجي بارز عبر outline و outline-offset |
:active | الخامسة — A | لحظة الضغط الفعلي على الرابط | تُكتب أخيراً لتظهر استجابة الضغط فوق التمرير والتركيز |
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
في ملخص الدرس أتقنت ترتيب الحالات الخمس للروابط وفق قاعدة LVHFA، وفهمت قيود الخصوصية المفروضة على :visited، وتنسيق خطوط التسطير والأزرار الملاحية وفحصها عبر :hov. في الخطوة التالية ستنتقل إلى درس الصور في لغة CSS لضبط الصور المتجاوبة وتوسيطها وتأطيرها باحترافية.