دروس HTML

صفحة HTML الرئيسية مقدمة HTML محرري HTML أساسيات HTML عناصر HTML سمات HTML عناوين HTML فقرات HTML أنماط HTML تنسيق HTML اقتباسات HTML تعليقات HTML ألوان HTML HTML CSS روابط HTML صور HTML رمز HTML المفضل جداول HTML قوائم HTML كتلة HTML ومضمنة فئات HTML معرف HTML إطارات HTML IFrame HTML جافا سكريبت مسارات ملفات HTML رئيس HTML تنسيق HTML مستجيب لـ HTML HTML Computercode دلالات HTML دليل نمط HTML كيانات HTML رموز HTML HTML Emojis أحرف HTML تشفير عنوان URL لـ HTML HTML مقابل XHTML

نماذج HTML

نماذج HTML سمات نموذج HTML عناصر نموذج HTML أنواع إدخال HTML سمات إدخال HTML سمات نموذج إدخال HTML

رسومات HTML

قماش HTML HTML SVG

وسائط HTML

وسائط HTML فيديو HTML صوت HTML المكونات الإضافية لـ HTML HTML يوتيوب

واجهات برمجة تطبيقات HTML

HTML تحديد الموقع الجغرافي سحب / إسقاط HTML تخزين الويب HTML عمال ويب HTML HTML SSE

أمثلة HTML

أمثلة HTML مسابقة HTML تمارين HTML شهادة HTML ملخص HTML ولوجية HTML

مراجع HTML

قائمة علامات HTML سمات HTML سمات HTML العامة دعم متصفح HTML أحداث HTML ألوان HTML قماش HTML صوت / فيديو HTML أنماط HTML مجموعات أحرف HTML تشفير عنوان URL لـ HTML أكواد HTML لانج رسائل HTTP طرق HTTP PX to EM Converter اختصارات لوحة المفاتيح

روابط 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 الخاص بنا .