نشانگر ماوس را بر روی این مثال ها قرار داده وامتحان نمایید.
مثال برای لینک ها
همانطور که نمونه های مثال های قید شده در این صفحه را مشاهده می فرمایید با سه نوع لینک نمودن مواجه هستیم.اول با تغییر "رنگها ی متن و اندازه فونت و نوع فونت وضخامت فونت " دوم با تغییر "رنگهای متن ورنگ زمینه" وسوم تغییر "رنگ متن و تغییر تصویر زمینه ".
حال کد این لینکها را برای شما از بالا به پایین می نویسم ، لطفا توجه نمایید .
مثال اول :
در این مثال خصوصیت های زیر به کار رفته است .
fnot-weight
font-size
font-family
color
text-decoration
#examp1 a:visited{font:bold 14pt arial;color:#fff;text-decoration:none}
#examp1 a:hover{font:bold 12pt tahoma;color:#000000;text-decoration:underline}
#examp1 a:active{font:normal 14pt arial;color:#000080;text-decoration:none}
مثال دوم :
در این مثال خصوصیت های زیر به کار رفته است .
fnot-weight
font-size
font-family
color
border-color
border-width
border-style
text-decoration
background-color
#examp2 a:visited{font:bold 14pt arial;color:#fff;text-decoration:none;background-color:#000090}
#examp2 a:hover{font:bold 14pt arial;color:#ffff00;text-decoration:none;background-color:#cccccc;border:#ff0000 2px solid}
#examp2 a:active{font:bold 14pt arial;color:#000080;text-decoration:none;background-color:#f5f5f5}
مثال سوم :
برای ساخت چنین لینکی یک تصویر باید تهیه گردد که تصویر این مثال اینگونه است.
در این مثال خصوصیت های زیر به کار رفته است .
fnot-weight
font-size
font-family
color
text-decoration
background-image
background-repeat
background-attachment
background-position
#examp3 a:visited{font:bold 14pt arial;color:#fff;text-decoration:none;background: url(link.gif) no-repeat top center}
#examp3 a:hover{font:bold 14pt arial;color:#fff;text-decoration:none;background: url(link.gif) no-repeat center center}
#examp3 a:active{font:bold 14pt arial;color:#000080;text-decoration:none;background: url(link.gif) no-repeat bottom center}
