لینک ها در CSS



لینک ها یکی از مهم ترین بخش های سایت هستند. در دوره آموزشی html با مفهوم لینک و نحوه ایجاد آنها آشنا شدیم. حال می خواهیم بدانیم چگونه ظاهر لینک ها را تغییر داده و جذاب تر کنیم. اولین کاری که می توانیم انجام دهیم این است که خطی را که به طور پیش فرض در زیر لینک ها ایجاد شده است حذف کنیم. برای این کار از دستور زیر استفاده می کنیم: text-decoration: none; حال اگر به جای مقدار none از مقدار underline استفاده کنیم به حالت قبل برمی گردد. یکی دیگر از کارهایی که می‌توانیم برای زیباتر کردن لینک‌ها انجام دهیم، تغییر رنگ متن پیوند با استفاده از دستور color است. به صورت زیر: a{Color: red;} یا می‌توانیم یک رنگ پس‌زمینه زیبا برای پیوند خود ایجاد کنیم: a{color: red;background-color: purple;} حال نکته مهم این است که می‌توانیم برای حالت‌های مختلف ویژگی‌های مختلفی تعریف کنیم. از لینک ها اما منظور از وضعیت های مختلف لینک ها چیست؟ پیوندها معمولاً دارای 4 وضعیت هستند: a: link, a: visited, a: hover, a: active که به ترتیب به معنی: پیوندی که هنوز وارد نکرده ایم، پیوندی که حداقل یک بار وارد شده است، وقتی حرکت می کنیم. ماوس را روی پیوند قرار دهید اما روی آن کلیک نکنید و لحظه ای که روی پیوند کلیک می کنیم. حال فرض کنید می خواهیم رنگ پس زمینه یک لینک را در حالتی تغییر دهیم که حداقل یک بار با کلیک روی آن، آن را آبی کم رنگ کنیم. بنابراین، ما به صورت زیر می نویسیم: a:visited{background-color: lightblue;} یا مثلاً اگر بخواهیم رنگ متن صورتی شود هنگامی که ماوس را روی پیوند می گذاریم، به این صورت عمل می کنیم: a:hover{ color: pink;} به این ترتیب می توانیم به حالت های مختلف ویژگی های مختلفی بدهیم. همچنین می توانیم به لینک های خود حاشیه های مختلفی بدهیم و آنها را به صورت دکمه در بیاوریم.

دیدگاهتان را بنویسید