آموزش طراحی سایت - لینک در CSS

در این بخش از آموزش طراحی سایت به آموزش لینک در CSS می پردازیم.

آموزش طراحی سایت - لینک در CSS

لینک ها نقش بسیار مهمی را در فضای کاربری صفحات وب سایت ایفا می کنند، همانطور که می دانید شما می توانید با استفاده از لینک ها به مطالب مختلف در صفحات دیگر و یا حتی پلتفرم های دیگر رجوع کنید و در واقع لینک ها و پیوند ها باعث پویایی و کارایی بیشتر صفحات وبسایت شما می شوند. اما همانطور که می دانید در CSS ما بیشتر با شکل ظاهری یک وب سایت کار داریم و در این مطلب یعنی آموزش لینک در CSS، می خواهیم به استایل دهی لینک ها در صفحات وب بپردازیم. 

لینک ها در CSS می توانند به روش های متفاوتی استایل داده شوند که در عکس زیر انواع استایل دهی لینک ها را مشاهده می کنید:

آموزش طراحی سایت

استایل دهی لینک ها در طراحی سایت

در طراحی سایت و صفحات وب، لینک ها می توانند با تمام مشخصه های CSS استایل دهی شوند (color, font-family, background و...)

استایل دهی لینک در CSS

در این مثال، لینک ( که در html لینک ها را با استفاده از عنصر a می سازیم ) رنگ hotpink را گرفته است. این بدان معنی است که تمام عناصر a در این سند، از این رنگ پیروی کنند. نتیجه کد بالا را می توانید در قسمت زیر مشاهده کنید:

آموزش لینک در CSS

همچنین لینک ها می توانند براساس اینکه چه وضعیتی دارند استایل داده شوند. چهار وضعیت لینک ها بصورت زیر می باشد:

  • a:link  - یک لینک که هنوز روی آن کلیک نشده است.
  • a:visited  - یک لینک که کاربر آن را بازدید کرده و روی آن کلیک کرده است.
  • a:hover  - یک لینک وقتی که موس روی آن قرار می گیرد.
  • a:active  - یک لینک زمانی که روی آن کلیک می شود.
  • آموزش طراحی سایت

در این مثال مشاهده می کنید که چگونه هر 4 وضعیت لینک ها را استایل دهی کرده ایم. با استفاده از : می توانیم وضعیت لینک را مشخص کرده و سپس استایل های CSS مناسب را در آن وضعیت اعمال کنیم. در زیر می توانید نتیجه کد را مشاهده کنید:

آموزش CSS

وقتی در حال تنظیم استایل برای حالت های مختلف لینک ها هستیم، چند قانون ترتیبی وجود دارد:

  • a:hover باید بعد از a:link و a:visited باشد.
  • a:active باید بعد a:hover باشد.

مشخصه background-color برای تغییر دادن رنگ پس زمینه لینک مورد نظر، استفاده می شود.

آموزش طراحی سایت

در این مثال، به هر وضعیتی از لینک، رنگ پس زمینه خاصی داده شده است. یعنی به عنوان مثال اگر لینک به وضعیت hover برود، رنگ پس زمینه آن Lightgreen خواهد شد.

آموزش لینک در CSS

دکمه برای لینک

این مثال یک مثال سطح بالاتر می باشد که در آن از ترکیبی از مشخصه های CSS استفاده شده که لینک ها را بعنوان دکمه و یا یک جعبه نشان می دهند که شکل زیباتری دارد. با اینکار می توانید لینک های خود را از حالت ساده در آورده و کاری کنید تا لینک ها توجه بیشتری را از سوی کاربران به خودشان جلب کنند.

آموزش CSS

همانطور که مشاهده می کنید با استفاده از ترکیبی از استایل های CSS موفق شدیم تا یک لینک دکمه ای بسیار زیباتر خلق کنیم. در زیر نتیجه کد بالا قابل مشاهده است:

آموزش طراحی سایت
آموزش طراحی سایت آموزش CSS آموزش HTML آموزش لینک در CSS آموزش استایل دهی لینک در CSS آموزش کار با لینک در CSS

مقالات این دسته بندی