لینک ها در 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.