شرح صفوف ومحتوى الفقرة
تتكامل خصائص واجهة المستخدم في CSS لتوجيه نظر المستخدم ويده بوضوح، ومنع حجب النقرات خلف الطبقات الزخرفية، وتسهيل نسخ المعرفات بنقرة واحدة، وحماية ثبات الأعمدة عند تحجيم حقول النص. يجمع الجدول التالي خلاصة هذه الخصائص وقيمها العملية:
| الخاصية | أبرز القيم المعتمدة | الدور العملي في الواجهة |
|---|---|---|
cursor | pointer, not-allowed, grab, grabbing, text, zoom-in, wait, help | مطابقة شكل المؤشر لوظيفة العنصر التفاعلي |
cursor المخصص | url("icon.svg") 16 16, pointer | تعيين أيقونة مخصصة مع قيمة قياسية احتياطية إلزامية |
pointer-events | auto, none | تمرير نقرات الفأرة عبر الأيقونات الزخرفية العلوية |
user-select | none, all, text, auto | منع تظليل الأزرار بالخطأ أو تحديد الرموز بنقرة واحدة |
resize | none, vertical, horizontal, both | تقييد تحجيم الحقول رأسياً أو تفعيله مع overflow: auto |
scroll-behavior | smooth, auto | تمرير انسيابي ناعم عند الانتقال للروابط المرجعية |
scroll-margin-top | 72px | حجز هامش تمرير علوي لمنع اختفاء العنوان خلف الشريط الثابت |
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
في ملخص الدرس أتقنت توظيف دلالات cursor والقيم الاحتياطية الإلزامية، وتمرير النقرات عبر pointer-events: none، وتنظيم التحديد عبر user-select، وتقييد التحجيم عبر resize: vertical مع إدراك حدود الحماية المظهرية. وننتقل في الخطوة التالية إلى درس المتغيرات في لغة CSS لتوحيد ألوان ومقاسات التصميم بمرونة عالية.