الروابط في CSS
الروابط هي طريقة تنقّل الناس بين صفحاتك. في CSS تنسّق عنصر a وحالاته — غير مزار، مزار، تحويم، ونشط — ليبدو الرابط قابلاً للنقر ويتغير مع التفاعل ويبقى مقروءًا.
حالات الرابط بنظرة واحدة
📊 أدوات حالات الرابط
| الحالة | متى تُطبَّق |
|---|---|
a / a:link |
الرابط الافتراضي / غير المزار |
a:visited |
رابط فتحه الزائر من قبل |
a:hover |
المؤشر فوق الرابط |
a:active |
الرابط يُضغط (mousedown) |
text-decoration |
تشغيل أو إيقاف التسطير — تحكم شائع للروابط |
المتصفحات غالبًا تفضّل ترتيبًا يُلقب LVHA: :link ثم :visited ثم :hover ثم :active. كتابة القواعد بهذا الترتيب يقلل تجاوز الحالات اللاحقة بالخطأ.
نسّق الرابط الأساسي
ابدأ باللون وهل تريد تسطيرًا. كثير من التصاميم الحديثة تزيل التسطير الافتراضي ثم تعيده عند التحويم.
أنماط الرابط الأساسية
cssa {
color: #0b5fff;
text-decoration: none;
}الروابط المُزارة
:visited يمكن أن يغيّر اللون قليلاً ليلاحظ الزائر العائد المسارات المألوفة. أبقِ التغيير خفيفًا — الخصوصية تحدّ ما يمكن تنسيقه على visited.
نبرة visited
cssa:visited {
color: #5b4b8a;
}ملاحظات التحويم
:hover أوضح إشارة يومية. تغيير لون أو تسطير أو كلاهما يقول «هذا تفاعلي» دون صراخ.
تسطير عند التحويم
cssa:hover {
color: #0842b8;
text-decoration: underline;
}active — لحظة الضغط
:active يعمل أثناء ضغط الرابط. لون أغمق قليلًا يعطي إحساس «نقرة» صغير.
ضغط active
cssa:active {
color: #062e80;
}عادة هادئة لروابط التنقل
جمّع حالات LVHA، أبقِ التحويم واضحًا، ولا تمسح خطوط التركيز فقط لتبدو مسطّحًا. مستخدمو لوحة المفاتيح يحتاجون إشارة تركيز مرئية.
روابط تنقل هادئة
cssnav a:link,
nav a:visited {
color: #1a1a1a;
text-decoration: none;
}
nav a:hover,
nav a:active {
color: #0b5fff;
text-decoration: underline;
}
nav a:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 2px;
}جرّب بنفسك
- اضبط لون
aالأساسي وtext-decoration: none. - أضف
a:visitedبلون مختلف قليلًا. - في
a:hoverسطّر وغمّق اللون. - غمّق أكثر قليلًا في
a:active. - نسّق
nav aبترتيب LVHA وأبقِ outline لـ:focus-visible.
أخطاء شائعة
- كتابة
:hoverقبل:link/:visitedفتتخطى بعض الحالات - إزالة التسطير و أي إشارة أخرى أن النص رابط
- تحويم قوس قزح على كل كلمة في فقرة
outline: noneعلى الروابط بلا بديل تركيز- خلط هذا الدرس مع text-shadow / الحذف (الجلسة السابقة)
ملخص
- نسّق الروابط بـ
aوالحالات:linkو:visitedو:hoverو:active - ترتيب LVHA يساعد الشلال على التصرف كما تتوقع
- اللون و
text-decorationهما التحكم اليومي - التحويم يجب أن يكون واضحًا؛ تغيير visited يبقى خفيفًا
- أبقِ أسلوب تركيز مرئيًا للتنقل بلوحة المفاتيح
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى