لینک‌ها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< CSS:Tutorial(تغییرمسیر از CSS:لینک‌ها)
پرش به ناوبری پرش به جستجو

با CSS، لینک ها را می‌توان به روش‌های مختلفی استایل دهی کرد.[۱]

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

لینک‌ها را می‌توان به وسیله هر گونه ویژگی CSS (مانند: color ،font-family ،background و…) استایل دهی کرد.

مثال

a {
  color: hotpink;
}


به علاوه، لینک‌ها را می‌توان با توجه به وضعیتی که آنها در آن هستند استایل دهی کرد.

چهار وضعیت لینک‌ها عبارتند از:

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

مثال

/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}


هنگام تنظیم استایل برای وضعیت‌های گوناگون لینک، چند قانون وجود دارد:

  • a:hover می‌بایست بعد از a:link و a:visited بیاید
  • a:active می‌بایست بعد از a:hover بیاید

آراستگی متن

ویژگی text-decoration اغلب برای حذف خط زیرین لینک‌ها استفاده می‌شود:

مثال

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;
}


لینک هایی به شکل کلید (Link Buttons)

این مثال مثال پیشرفته ترِ را نشان می‌دهد که در آن چندین ویژگی گوناگون CSS را ترکیب کرده‌ایم تا لینکها را به صورت جعبه‌ها / کلید‌ها نمایش دهیم:

مثال

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}


مثال های بیشتر

اضافه‌کردن استایل‌های گوناگون به hyperlinkها

این مثال نحوه اضافه‌کردن سایر استایلها را به hyperlinkها نمایش می‌دهد.

پیشرفته - ساخت یک لینک به شکل دکمه با کادر

مثال دیگری از نحوه ایجاد لینک‌ها به شکل جعبه/کلید.

تغییر نشانه‌گر موس

ویژگی cursor مشخص کننده نوع نشانه‌گری را تعیین می‌کند که می‌بایست نمایش داده شود. این مثال انواع مختلفی از نشانه‌گرها (که برای لینک‌ها مفید است) را نمایش می‌دهد.

خود را با تمرین‌ها امتحان کنید!

منابع آموزشی