لینک ها نقش بسیار مهمی را در فضای کاربری صفحات وب سایت ایفا می کنند، همانطور که می دانید شما می توانید با استفاده از لینک ها به مطالب مختلف در صفحات دیگر و یا حتی پلتفرم های دیگر رجوع کنید و در واقع لینک ها و پیوند ها باعث پویایی و کارایی بیشتر صفحات وبسایت شما می شوند. اما همانطور که می دانید در CSS ما بیشتر با شکل ظاهری یک وب سایت کار داریم و در این مطلب یعنی آموزش لینک در CSS، می خواهیم به استایل دهی لینک ها در صفحات وب بپردازیم.
لینک ها در CSS می توانند به روش های متفاوتی استایل داده شوند که در عکس زیر انواع استایل دهی لینک ها را مشاهده می کنید:
استایل دهی لینک ها در طراحی سایت
در طراحی سایت و صفحات وب، لینک ها می توانند با تمام مشخصه های CSS استایل دهی شوند (color, font-family, background و...)
در این مثال، لینک ( که در html لینک ها را با استفاده از عنصر a می سازیم ) رنگ hotpink را گرفته است. این بدان معنی است که تمام عناصر a در این سند، از این رنگ پیروی کنند. نتیجه کد بالا را می توانید در قسمت زیر مشاهده کنید:
همچنین لینک ها می توانند براساس اینکه چه وضعیتی دارند استایل داده شوند. چهار وضعیت لینک ها بصورت زیر می باشد:
- a:link - یک لینک که هنوز روی آن کلیک نشده است.
- a:visited - یک لینک که کاربر آن را بازدید کرده و روی آن کلیک کرده است.
- a:hover - یک لینک وقتی که موس روی آن قرار می گیرد.
- a:active - یک لینک زمانی که روی آن کلیک می شود.
در این مثال مشاهده می کنید که چگونه هر 4 وضعیت لینک ها را استایل دهی کرده ایم. با استفاده از : می توانیم وضعیت لینک را مشخص کرده و سپس استایل های CSS مناسب را در آن وضعیت اعمال کنیم. در زیر می توانید نتیجه کد را مشاهده کنید:
وقتی در حال تنظیم استایل برای حالت های مختلف لینک ها هستیم، چند قانون ترتیبی وجود دارد:
- a:hover باید بعد از a:link و a:visited باشد.
- a:active باید بعد a:hover باشد.
مشخصه background-color برای تغییر دادن رنگ پس زمینه لینک مورد نظر، استفاده می شود.
در این مثال، به هر وضعیتی از لینک، رنگ پس زمینه خاصی داده شده است. یعنی به عنوان مثال اگر لینک به وضعیت hover برود، رنگ پس زمینه آن Lightgreen خواهد شد.
دکمه برای لینک
این مثال یک مثال سطح بالاتر می باشد که در آن از ترکیبی از مشخصه های CSS استفاده شده که لینک ها را بعنوان دکمه و یا یک جعبه نشان می دهند که شکل زیباتری دارد. با اینکار می توانید لینک های خود را از حالت ساده در آورده و کاری کنید تا لینک ها توجه بیشتری را از سوی کاربران به خودشان جلب کنند.
همانطور که مشاهده می کنید با استفاده از ترکیبی از استایل های CSS موفق شدیم تا یک لینک دکمه ای بسیار زیباتر خلق کنیم. در زیر نتیجه کد بالا قابل مشاهده است:
