Like And Win VIP Hack
Click Like To WIN 30 Day VIP Hack

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

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

Share Now And Win Free ViP HackShare on Facebook0Google+0Tweet about this on Twitter0
 
يمكن للروابط التشعبية ان تصمم وتعدّل من خلال طرق عديدة

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

يمكن لروابط 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;}
 
Share Now And Win Free ViP HackShare on Facebook0Google+0Tweet about this on Twitter0

0 Comments ON " [ دورة CSS ] التصميم CSS – الدرس الرابع R... "
leave a response

*




Recent Posts




Copyright © All Rights Reserved 2014→2017 To Add-Fast.CoM