تاریخ انتشار:۱۰:۰ ۱۳۹۹/۴/۲۱

---

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

لینک ها با هر صفتی از زبان 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
 {

 

منبع:learnsource