شرح الروابط في CSS — كيف تنسق a:link و a:hover و a:active باحتراف؟

الروابط هي عناصر التنقل الأساسية في أي موقع. تنسيقها الصحيح في CSS يحسن تجربة المستخدم ويجعل التنقل أوضح وأكثر احترافية.

إذا كنت تبحث عن شرح تنسيق الروابط في CSS أو كيفية إزالة الخط السفلي من الرابط أو الفرق بين a:hover و a:active، فهذا الدرس يغطيها عملياً.

ما هي حالات الرابط في CSS؟

عنصر a يمر بأربع حالات رئيسية:

• a:link: رابط غير مزور.
• a:visited: رابط تمت زيارته.
• a:hover: عند مرور الماوس.
• a:active: أثناء الضغط على الرابط.

التعريف البسيط: Link states in CSS هي حالات تفاعلية مختلفة للرابط حسب سلوك المستخدم.

مثال أساسي لتنسيق الروابط في CSS

a:link {
    color: #2563eb;
    text-decoration: none;
}

a:visited {
    color: #7c3aed;
}

a:hover {
    color: #dc2626;
    text-decoration: underline;
}

a:active {
    color: #16a34a;
}

ماذا يفعل هذا الكود؟ يعطي لكل حالة لوناً مختلفاً مع إظهار underline عند hover.

سطر بسطر:

• a:link: شكل الرابط الأساسي.
• a:visited: تمييز الروابط التي تمت زيارتها.
• a:hover: تفاعل بصري عند المرور.
• a:active: لون لحظة النقر.

النتيجة المتوقعة: رابط واضح يتفاعل مع المستخدم في كل مرحلة.

خطأ شائع: تعريف حالة واحدة فقط ونسيان باقي الحالات.

قاعدة LVHA في CSS (ترتيب مهم جداً)

حتى تعمل حالات الرابط بشكل صحيح، يُفضّل كتابة الترتيب التالي:

:link → :visited → :hover → :active

لماذا؟ لتجنب تضارب الأولوية بين الحالات.

إزالة الخط السفلي من الروابط في CSS

من أكثر الأسئلة الشائعة: "كيف أحذف underline من الرابط؟"

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

ماذا يفعل هذا الكود؟ يخفي الخط في الوضع العادي ويظهره عند hover.

النتيجة المتوقعة: مظهر حديث مع الحفاظ على وضوح التفاعل.

خطأ شائع: إزالة underline بدون أي hover effect أو لون مميز.

تحويل الرابط إلى زر بسيط في CSS

يمكن جعل الروابط تبدو كأزرار للتنقل أو الدعوة للإجراء.

a.btn-link {
    display: inline-block;
    background: #2563eb;
    color: white;
    padding: 8px 14px;
    border-radius: 8px;
    text-decoration: none;
}

a.btn-link:hover {
    background: #1d4ed8;
}

ماذا يفعل هذا الكود؟ يحول الرابط إلى زر تفاعلي بسيط.

النتيجة المتوقعة: رابط واضح وجذاب للنقر.

أخطاء شائعة في Link Styling in CSS

١) عدم وجود فرق بصري بين الرابط والنص العادي: يقلل قابلية الاكتشاف.

٢) تجاهل حالة visited: يضعف تجربة التنقل.

٣) ألوان غير متباينة: تجعل الرابط غير واضح.

الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)

كيف أزيل الخط السفلي من الرابط في CSS؟

استخدم text-decoration: none; على a.

ما الفرق بين a:hover و a:active في CSS؟

:hover عند المرور بالمؤشر، و:active لحظة الضغط الفعلي.

لماذا visited لا تعمل أحياناً في CSS؟

المتصفحات تفرض قيوداً أمنية على بعض الخصائص في visited. عادة لون النص يعمل بشكل طبيعي.

ما هو ترتيب حالات الروابط الصحيح في CSS؟

LVHA: link ثم visited ثم hover ثم active.

كيف أحول الرابط إلى زر في CSS؟

أعطه display:inline-block + padding + background + border-radius.