روابط HTML - ألوان مختلفة
يتم عرض ارتباط HTML بلون مختلف اعتمادًا على ما إذا كان قد تمت زيارته أم لم تتم زيارته أم أنه نشط.
ألوان ارتباط HTML
بشكل افتراضي ، سيظهر رابط على هذا النحو (في جميع المتصفحات):
- تم وضع خط أسفل الرابط غير مرغوب فيه باللون الأزرق
- الارتباط الذي تمت زيارته مسطر وأرجواني
- الارتباط النشط مسطر باللون الأحمر
يمكنك تغيير ألوان حالة الارتباط باستخدام CSS:
مثال
هنا ، سيكون الرابط الذي لم تتم زيارته باللون الأخضر بدون تسطير. سيكون الارتباط الذي تمت زيارته باللون الوردي بدون تسطير. سيكون الرابط النشط باللون الأصفر ويتم تحته خط. بالإضافة إلى ذلك ، عند التمرير بالماوس فوق ارتباط (أ: تمرير الماوس) ، ستصبح حمراء وتحت خط:
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
أزرار الارتباط
يمكن أيضًا تصميم ارتباط على هيئة زر باستخدام CSS:
هذا رابطمثال
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
لمعرفة المزيد حول CSS ، انتقل إلى دروس CSS الخاصة بنا .
علامات ارتباط HTML
Tag | Description |
---|---|
<a> | Defines a hyperlink |
للحصول على قائمة كاملة بجميع علامات HTML المتاحة ، تفضل بزيارة مرجع علامات HTML الخاص بنا .