CSS - Links الروابط
CSS - تنسيق الروابط (Links)
🔸 تُستخدم CSS لتنسيق الروابط <a>، مثل تغيير اللون، إزالة التسطير، أو إضافة تأثيرات عند المرور بالماوس.
✅ حالات الروابط (Link States)
يمكن تنسيق الروابط حسب حالتها باستخدام المحددات التالية:
a:link➜ للرابط غير المُزار.a:visited➜ للرابط الذي تم زيارته.a:hover➜ عند مرور الماوس فوق الرابط.a:active➜ عند الضغط على الرابط (لحظة النقر).
🧪 مثال على تنسيق الروابط
a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: purple;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: green;
}
📌 ملاحظات مهمة
- يجب دائمًا كتابة الحالات بترتيب معين لتعمل بشكل صحيح: :link → :visited → :hover → :active.
- خاصية
text-decoration: none;تُستخدم لإزالة التسطير التلقائي. - يمكن استخدام تأثيرات CSS إضافية مثل
transitionلتنعيم الحركة عند تمرير الماوس.
🔗 مثال HTML عملي
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: purple;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: green;
}
</style>
</head>
<body>
<h2>مثال على تنسيق الروابط</h2>
<p>اضغط على الرابط التالي:</p>
<a href="https://www.example.com" target="_blank">زيارة موقع</a>
</body>
</html>
تعليقات
إرسال تعليق