ألوان الروابط html Link Colors

روابط HTML - بألوان مختلفة
يتم عرض ارتباط HTML بلون مختلف اعتمادًا على ما إذا كان قد تمت زيارته أم لم تتم زيارته أم أنه نشط.
ألوان ارتباط HTML
بشكل افتراضي ، سيظهر رابط على هذا النحو (في جميع المتصفحات):

تم وضع خط أسفل الرابط غير مرغوب فيه باللون الأزرق
الارتباط الذي تمت زيارته مسطر وأرجواني
الارتباط النشط مسطر باللون الأحمر

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

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<h2>الوان الروابط </h2>
<p> يمكنك تغيير الألوان الافتراضية للروابط </p>
<a href="https://itqan7.blogspot.com/search/label/html" target="_blank">HTML دروس</a> 
</body>
</html>

أزرار الارتباط (Link Buttons)

يمكن أيضًا تصميم ارتباط على هيئة زر باستخدام CSS:

هذا رابط

مثال

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>

<h2>رابط زر</h2>
<p>رابط على شكل زر:</p>
<a href="https://itqan7.blogspot.com/search/label/html" target="_blank">هذا رابط</a>

</body>
</html>

الدرس السابق الدرس التالي