الدرس 7 من 8

روابط تُقرأ

هدف الدرس

خطّ تحت الرابط لا يزاحم الحروف

01

الشرح

القارئ يحتاج أن يعرف الرابط قبل أن يقرأه، واللون وحده لا يكفي: من لا يميّز الألوان لا يرى فرقًا بين الأزرق والأسود. لذلك يبقى الخطّ تحت الرابط، وحذفه بـ text-decoration: none من أشيع أخطاء التصميم.

لكن الخطّ الافتراضي يلتصق بالحروف، ويصطدم في العربية بذيولها النازلة كالراء والواو والياء. text-underline-offset يبعده عنها، وtext-decoration-thickness يضبط سُمكه فلا يطغى على النصّ.

ثم الحالات: :hover يؤكّد أن النصّ يُضغط، و:visited يذكّر القارئ بما زاره. وفي :visited لا يقبل المتصفح إلا خصائص اللون، كي لا تكشف الصفحة سجلّ تصفّحك.

02

المطلوب

أعد الخطّ تحت روابط .prose بسُمك محدّد وإزاحة عن الحروف، وأعطِ :visited لونًا خاصًّا، واجعل :hover يُبرز الرابط.

معايير التصحيح

5 معايير
  1. الروابط مسطّرة
  2. سُمك الخطّ محدّد لا تلقائي
  3. الخطّ مُزاح عن الحروف
  4. :visited يلوّن ما زاره القارئ
  5. :hover يُبرز الرابط
index.html
المعاينة
index.html100%
–/5

اضغط «تشغيل» ليبدأ الفحص.

5 معايير في بطاقة «المطلوب».