الروابط Links

تنسيق الروابط في لغة CSS

تعد الروابط التشعبية جزءًا أساسيًا من موقع الويب. يسمح للزوار بالتنقل عبر الموقع. لذلك يعد تصميم الروابط بشكل صحيح جانبًا مهمًا لبناء موقع ويب سهل الاستخدام.
ولمعرفة المزيد حول الروابط التشعبية وكيفية إنشائها راجع درس الروابط Links في لغة HTML
يكون الرابط التشعبي بأربع حالات مختلفة : link و visited و active و hover. يمكن تنسيق هذه الحالات الأربع للرابط بشكل مختلف من خلال استخدام المحدد من نوع pseudo-class بالشكل التالي :

  • a:link - يحديد الروابط العادية أو التي لم يسبق للمستخدم زيارتها.
  • a:visited - يحديد الروابط التي زارها المستخدم مسبقا.
  • a:hover - يحديد الرابط عندما يضع المستخدم مؤشر الماوس فوقه.
  • a:active - يحديد الرابط النشط (عند النقر عليه).

يمكنك تحديد أي خاصية CSS تريدها على سبيل المثال اللون والخط والخلفية والحدود وما إلى ذلك لكل من هذه المحددات ، تمامًا كما نفعل مع النص العادي.

مثال
تشغيل
  1. a:link {       /* unvisited link */
  2. color: #ff0000;
  3. text-decoration: none;
  4. border-bottom: 1px solid;
  5. }
  6. a:visited {       /* visited link */
  7. color: #ff00ff;
  8. }
  9. a:hover {       /* mouse over link */
  10. color: #00ff00;
  11. border-bottom: none;
  12. }
  13. a:active {       /* active link */
  14. color: #00ffff;
  15. }

من المهم الترتيب الذي تقوم به بتحديد الانماط للحالات المختلفة للروابط التشعبية ، لأن ما يعرف آخرًا له الاولوية على القواعد المحددة سابقًا.

ملاحظة:

بشكل عام ، يجب أن يكون ترتيب pseudo-classes على النحو التالي حتى تعمل هذه الحالات بالشكل الصحيح:

  • :link
  • :visited
  • :hover
  • :active
  • :focus

يستخدم المحدد :any-link لتطبيق انماط CSS على جميع حالات الرابط التشعبي

تعديل أنماط الروابط التشعبية الافتراضية

في جميع متصفحات الويب الشهيرة مثل Chrome و Firefox و Safari وما إلى ذلك ، تحتوي الروابط الموجودة على صفحات الويب على تسطير بشكل خط افقي أسفل الرابط التشعبي وتستخدم ألوان الرابط التشعبي الافتراضية للمتصفح ، إذا لم نقم بتحديد الوان خاصة لهم.

بشكل افتراضي ، ستظهر الروابط التشعبية على النحو التالي في معظم المتصفحات:

  • الروابط التي لم يسبق لنا زيارتها Unvisited Link تظهربالون الازرق ومن تحتها خط
  • الروابط التي سبق لنا زيارتها Visited Link تظهر باللون الأرجواني ومن تحتها خط
  • الرابط النشط Active Link يظهر باللون الأحمر ومن تحته خط .

ومع ذلك ، لا يوجد تغيير في مظهر الرابط التشعبي في حالة تمرير مؤشر الفأرة عليه. يبقى باللون الأزرق أو البنفسجي أو الأحمر اعتمادًا على حالتها قبل التمرير.

الآن دعونا نتعرف على كيفية تغير الخصائص الافتراضية للروابط التشعبية .

تغير اللون الإفتراضي للرابط التشعبي

ما علينا سوى استخدام الخاصية color من لغة CSS لتحديد اللون الذي نختاره لحالات الروابط التشعبية المختلفة. ولكن عند اختيار الألوان ، تأكد من أنه يمكن للمستخدم التمييز بوضوح بين النص العادي والروابط.

ولفهم كيفة تغير اللون لعنصر الرابط التشعبي دعونا نجرب المثال التالي :

مثال
تشغيل
  1. a:link {
  2. color: #1ebba3;
  3. }
  4. a:visited {
  5. color: #ff00f4;
  6. }
  7. a:hover {
  8. color: #a766ff;
  9. }
  10. a:active {
  11. color: #ff9800;
  12. }

إزالة التسطير الإفتراضي من الرابط التشعبي

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

يوضح المثال التالي كيفة إزالة التسطير الافتراضي لعنصر الرابط التشعبي بحالاته المختلفة :

مثال
تشغيل
  1. a:link, a:visited {
  2. text-decoration: none;
  3. }
  4. a:hover, a:active {
  5. text-decoration: underline;
  6. }

جعل الروابط التشعبية النصية تبدو مثل الأزرار

يمكننا أيضًا جعل الروابط التشعبية النصية العادية تبدو مثل الزر باستخدام لغة CSS. للقيام بذلك ، نحتاج إلى استخدام بعض خصائص CSS الأخرى مثل backgroud-color و border و display و padding وما إلى ذلك. ستتعرف على هذه الخصائص بالتفصيل في الدروس القادمة.
لنجرب المثال التالي لنرى كيفة عمل ذلك :

مثال
تشغيل
  1. a:link, a:visited {
  2. color: white;
  3. background-color: #1ebba3;
  4. display: inline-block;
  5. padding: 10px 20px;
  6. border: 2px solid #099983;
  7. text-decoration: none;
  8. text-align: center;
  9. font: 14px Arial, sans-serif;
  10. }
  11. a:hover, a:active {
  12. background-color: #9c6ae1;
  13. border-color: #7443b6;
  14. }
« التالي السابق »