لینک CSS

من خلال CSS، يمكنك تعيين أنماط الروابط بطرق مختلفة.

روابط نصية روابط نصية مفتاح الروابط مفتاح الروابط

تعيين أنماط الروابط

يمكن استخدام أي خاصية CSS (مثل color،font-family،background وغيرها) لتحديد الأنماط.

مثال

a {
  color: hotpink;
}

جرب بنفسك

بالإضافة إلى ذلك، يمكنك تعيين أنماط مختلفة للروابط بناءً على حالة الروابط.

هناك أربعة حالات روابط هي:

  • a:link - الروابط العادية، غير المزورة
  • a:visited - الروابط التي تم زيارتها
  • a:hover - عند وضع الفأرة فوق الروابط
  • a:active - عند ضغط الروابط

مثال

/* الروابط التي لم تتم زيارتها */
a:link {
  color: red;
}
/* الروابط التي تم زيارتها */
a:visited {
  color: green;
}
/* عند وضع الفأرة فوق الروابط */
a:hover {
  color: hotpink;
}
/* الروابط المختارة */
a:active {
  color: blue;
}

جرب بنفسك

إذا تم تعيين أنماط للعديد من حالات الروابط، يرجى اتباع قواعد الترتيب التالية:

  • يجب أن يكون a:hover بعد a:link و a:visited
  • يجب أن يكون a:active بعد a:hover

زخرفة النص

text-decoration تُستخدم الخاصية بشكل رئيسي لازالة الخطوط السفلية من الروابط:

مثال

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}

جرب بنفسك

لون الخلفية

background-color يمكن استخدام الخاصية لتحديد لون الخلفية للروابط:

مثال

a:link {
  background-color: yellow;
}
a:visited {
  background-color: cyan;
}
a:hover {
  background-color: lightgreen;
}
a:active {
  background-color: hotpink;
}

جرب بنفسك

مفتاح الروابط

هذا المثال يظهر مثالاً أكثر تعقيدًا، حيث قمنا بدمج عدة خصائص CSS، لعرض الروابط كنافذة/مفتاح:

مثال

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center; 
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active {
  background-color: red;
}

جرب بنفسك

المزيد من الأمثلة

إضافة أنماط مختلفة إلى الروابط
يوضح هذا المثال كيفية إضافة أنواع أخرى من الأنماط إلى الروابط.
مقدمة - إنشاء زر رابط به حواف
هذا مثال آخر على كيفية إنشاء مربعات الروابط/الأزرار.
تغيير الماوس
يحدد خاصية cursor نوع الماوس الذي سيتم عرضه. هذا المثال يوضح أنواع الماوس المختلفة (مفيد للروابط).