يمكن للروابط التشعبية ان تصمم وتعدّل من خلال طرق عديدة
تعديل الروابط التشعبية
يمكن لروابط CSS التشعبية أن تصمّم من خلال عدة خاصيات (اللون , عائلة الخط , الخلفية , الخ ) بشكل خاص يمكنك تصميم وتعديل على الرابط حسب الحالة التي ينتمي اليها
هناك أربع حالات يندرج بها الرابط التشعبي
- النوع a:link وهو الرابط الطبيعي الذي لم يتم زيارته أو الضغط عليه
- النوع a:visited وهو الرابط الذي تم زيارته من قبل المستخدم
- النوع a:hover عندما يضع المستخدم الماوس على الرابط وبدون الضغط عليه
- النوع a:active لحظة النقر على الرابط
مثال
a:link {color:#FF0000;} /* لم يتم النقر عليه */
a:visited {color:#00FF00;} /* تم النقر عليه */
a:hover {color:#FF00FF;} /* عند تحريك الماوس فوقه */
a:active {color:#0000FF;} /* عند النقر عليه */
عند ضبط التصميم لجميع أنواع الرابط فعندها يجب التركيز على الشروط التالية :
- يجب استخدام a:hover بعد a:link and a:visited
- يجب استخدام a:active بعد a:hover
زخرفة النص Text Decoration
تستخدم خاصية text-decoration بشكل واسع لإزالة الخط الموجود تحت الرابط التشعبي
مثال
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
لون الخلفية Background Color
تستخدم خاصية لون الخلفية background-color لتخصيص لون خلفية الرابط التشعبي
مثال
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
ليست هناك تعليقات:
إرسال تعليق