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

مثال

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;}
 


You may also like  [ دورة CSS ] الدروس المتقدمة CSS - الدرس الثامن - شريط القوائم navbar
Tags
Show More
" Here you can search for everything you want and you will find it as soon as possible "

Scorpion

Welcome To The Biggest Site For Android Games And Apps You Can Find New Modded Games And Game Cheat & CrossFire Hacks You Can Find Daily Update Only Here Don’t Forget To Like Page in Facebook And Subscribe To Blog

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