شرح صفوف ومحتوى الفقرة
بدلاً من تخمين الأكواد اللونية بالتجربة المتكررة داخل ملف التنسيق، توفر لك أدوات المطور DevTools منتقي ألوان تفاعلياً مباشراً داخل لوحة Styles لاختبار درجات الحلقة لحظياً:
- انقر بالزر الأيمن على الزر أو الحقل واختر Inspect لفتح نافذة الفحص.
- ابحث عن تصريح
outline-colorفي لوحة Styles واضغط على المربع اللوني الصغير المجاور لاسم اللون أو كود Hex. - حرّك المؤشر داخل طيف منتقي الألوان Color Picker أو التقط لوناً من الصفحة بالقطّارة لمراقبة وضوح الحلقة مباشرةً، ثم انسخ قيمة
#rrggbbالنهائية إلى ملفك.
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلّمت في هذا الدرس تخصيص لون الحلقة عبر خاصية outline-color، وفهمت استمدادها التلقائي للون النص عند عدم تحديدها، وطبّقت الأسماء اللونية وأكواد #rrggbb المعتمة مع مراعاة التباين العالي على الخلفيات الفاتحة والداكنة. في الخطوة التالية ننتقل إلى درس إزاحة الإطار الخارجي outline-offset في لغة CSS لترك مسافة فصل أنيقة بين حدود العنصر وحلقة الإبراز.