CSS LINKS الروابط

 

في لغة CSS، تُستخدم خصائص الروابط (Links) لتنسيق وتحديد شكل الروابط التشعبية في صفحات الويب. الروابط هي عناصر أساسية للتنقل بين الصفحات والمحتوى على الإنترنت، وتُمكن CSS من التحكم في مظهرها بشكل كامل.

حالات الروابط (Link States):

توجد أربع حالات رئيسية للروابط في CSS، ويتم تحديدها باستخدام مُحدِّدات pseudo-classes:

• a:link: يحدد شكل الرابط قبل زيارته.
• a:visited: يحدد شكل الرابط بعد زيارته.
• a:hover: يحدد شكل الرابط عند تمرير مؤشر الماوس فوقه.
• a:active: يحدد شكل الرابط أثناء النقر عليه.

مثال:

• جرب الان

CSS

a:link {
  color: blue; /* لون الرابط قبل الزيارة */
  text-decoration: none; /* إزالة الخط التحتي */
}

a:visited {
  color: purple; /* لون الرابط بعد الزيارة */
  text-decoration: none;
}

a:hover {
  color: red; /* لون الرابط عند التمرير */
  text-decoration: underline; /* إضافة خط تحتي */
}

a:active {
  color: green; /* لون الرابط أثناء النقر */
}

في هذا المثال:

• الروابط قبل زيارتها ستكون باللون الأزرق بدون خط تحتي.
• الروابط بعد زيارتها ستكون باللون البنفسجي بدون خط تحتي.
• عند تمرير الماوس فوق الروابط، ستتحول إلى اللون الأحمر مع خط تحتي.
• أثناء النقر على الروابط، ستتحول إلى اللون الأخضر.

خصائص CSS المستخدمة مع الروابط:

يمكن استخدام العديد من خصائص CSS لتنسيق الروابط، من أهمها:

• color: لتحديد لون النص.
• text-decoration: لتحديد الزخرفة النصية (مثل الخط التحتي، الخط العلوي، خط المنتصف، أو إزالة الزخرفة). القيم الشائعة: none (إزالة الزخرفة)، underline (خط تحتي)، overline (خط علوي)، line-through (خط في المنتصف).
• font-family: لتحديد نوع الخط.
• font-size: لتحديد حجم الخط.
• font-weight: لتحديد سُمك الخط (مثل bold، normal).
• background-color: لتحديد لون الخلفية.
• padding: لتحديد المسافة الداخلية حول النص.
• border: لتحديد حدود حول النص.
• cursor: لتحديد شكل مؤشر الماوس عند التمرير فوق الرابط. القيمة الشائعة: pointer (شكل يد).
• transition: لإضافة تأثيرات انتقالية سلسة عند تغيير حالة الرابط.

مثال مُتقدم:

• جرب الان

CSS

a {
  display: inline-block; /* لجعل الروابط كعناصر بلوك */
  padding: 10px 20px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-decoration: none;
  color: #333;
  transition: background-color 0.3s ease; /* إضافة انتقال سلس */
}

a:hover {
  background-color: #ddd;
}

في هذا المثال:

• يتم تنسيق الروابط كأزرار صغيرة مع خلفية رمادية فاتحة وحدود رمادية دقيقة وزوايا دائرية.
• عند تمرير الماوس فوق الروابط، يتغير لون الخلفية بسلاسة بفضل خاصية transition.

ترتيب مُحدِّدات الحالات:

من المهم وضع مُحدِّدات حالات الروابط بالترتيب الصحيح لضمان عملها بشكل صحيح. الترتيب المُوصى به هو:

1. a:link
2. a:visited
3. a:hover
4. a:active

باستخدام هذه الخصائص والمُحدِّدات، يُمكنك التحكم بشكل كامل في مظهر الروابط في صفحات الويب وجعلها مُتناسقة مع تصميم الموقع.