لینک ها در CSS (CSS Links)
«لینک ها در CSS» (CSS Links) با ویژگی های متنوع قابل استایل دهی هستند؛ بنابراین می توانید رنگ، پس زمینه، ضخامت فونت و حتی حالت های مختلف لینک را کنترل کنید.
استایل دهی پایه به لینک ها در CSS
لینک های HTML را می توان با ویژگی هایی مانند color، text-decoration، background-color، font-size و font-weight سفارشی کرد.
a{ color: hotpink; background-color: yellow; font-weight: bold; }نکته: تغییرات بالا را می توانید روی کلاس های خاص اعمال کنید تا فقط برخی لینک ها تحت تأثیر قرار گیرند.
لینک ها در CSS و حالت های (:link, :visited, :hover, :active)
می توانید لینک ها را بر اساس حالت های مختلف استایل دهی کنید. ترتیب نوشتن مهم است؛ ابتدا :link و :visited، سپس :hover و در پایان :active.
/* unvisited */ a:link{ color: red; } /* visited */ a:visited{ color: green; } /* hover */ a:hover{ color: hotpink; } /* active */ a:active{ color: blue; }هشدار: اگر ترتیب را رعایت نکنید، برخی قوانین شما اعمال نمی شوند.
حذف زیرخط و کنترل تزئین متن
اغلب زیرخط لینک ها با text-decoration مدیریت می شود. معمولاً زیرخط را برای حالت های عادی حذف و هنگام :hover فعال می کنند.
a:link{ text-decoration: none; } a:visited{ text-decoration: none; } a:hover{ text-decoration: underline; } a:active{ text-decoration: underline; }رنگ پس زمینه برای لینک ها
می توانید با background-color برای هر حالت لینک پس زمینه متفاوتی تنظیم کنید.
a:link{ background-color: yellow; } a:visited{ background-color: cyan; } a:hover{ background-color: lightgreen; } a:active{ background-color: hotpink; }دکمه سازی لینک ها با CSS
با ترکیب چند ویژگی می توان لینک ها را شبیه دکمه نمایش داد.
a:link, a:visited{ background-color:#f44336; color:#fff; padding:14px 25px; text-align:center; text-decoration:none; display:inline-block; } a:hover, a:active{ background-color:red; }a:link, a:visited{ background-color:#fff; color:#000; border:2px solid green; padding:10px 20px; text-align:center; text-decoration:none; display:inline-block; } a:hover, a:active{ background-color:green; color:#fff; }نمونه های بیشتر لینک ها در CSS
می توانید تغییر اندازه، پس زمینه، خانواده فونت و زیرخط را بسته به حالت کنترل کنید.
a.one:link{ color:red; } a.one:visited{ color:blue; } a.one:hover{ color:orange; } a.two:hover{ font-size:150%; } a.three:hover{ background:lightgreen; } a.four:hover{ font-family:monospace; } a.five:link{ color:red; text-decoration:none; } a.five:visited{ color:blue; text-decoration:none; } a.five:hover{ text-decoration:underline; }برای نمایش نوع مکان نما نیز می توانید از ویژگی cursor بهره ببرید.
مطالعه بیشتر و مسیرهای مرتبط
برای ادامه یادگیری به این بخش ها سر بزنید: آیکن ها در CSS و لیست ها در CSS. همچنین برای دسترسی سریع، از این پیوند استفاده کنید: لینک ها در CSS.