More

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

What do you think of this post?
  • Bad ()
  • Boring ()
  • Useful ()
  • Interesting ()
  • Awesome ()
يمكن للروابط التشعبية ان تصمم وتعدّل من خلال طرق عديدة


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

يمكن لروابط 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;}


What do you think of this post?
  • Bad ()
  • Boring ()
  • Useful ()
  • Interesting ()
  • Awesome ()


You can also use Facebook to comment

You may also like  Adam Sandler's Next Netflix Movie Is Bringing Back His Old Gang
Show More

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