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

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

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}
خودتان امتحان کنید

صفت background-color

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

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
} 
خودتان امتحان کنید

استفاده از CSS برای ساخت یک دکمه ی لینک

با ترکیب چندین صفت از زبان 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;
}
خودتان امتحان کنید

 

منتشر شده در ۷ شهریور ۱۳۹۶ حمید رضا ملکی ۸۵۶ بازدید
دیدگاه ها
احمد ایرانپور یکشنبه ۲۸ مرداد ۱۳۹۷

با درود ممنون از آموزش های خوبتون