More

[ دورة CSS ] التصميم CSS – الدرس الرابع – الروابط التشعبية

" Here you can search for everything you want and you will find it as soon as possible "
يمكن للروابط التشعبية ان تصمم وتعدّل من خلال طرق عديدة


تعديل الروابط التشعبية

يمكن لروابط 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 بشكل واسع لإزالة الخط الموجود تحت الرابط التشعبي
مثال

Click Here To See URL To Download
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}


لون الخلفية Background Color

تستخدم خاصية لون الخلفية background-color لتخصيص لون خلفية الرابط التشعبي
مثال

Click Here To See URL To Download
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}


Click Here To See URL To Download
Show More
" Here you can search for everything you want and you will find it as soon as possible "

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Adblock Detected

Please consider supporting us by disabling your ad blocker