فرمت دهی لینک ها در 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;
}
خودتان امتحان کنید

 

دیدگاه ها

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید

دیدگاه های ارزشمند شما

کاربر مهمان - ۴ سال قبل
با درود ممنون از آموزش های خوبتون

هدف لرن سورس

لرن سورس با هدف ایجاد یک مرجع کامل و جامع در زمینه آموزش دوره محور زبان های برنامه نویسی و وب پا به عرصه وب گذاشته است.

ما در لرن سورس همیشه سعی خواهیم کرد تا نیاز های آموزشی شما کاربران عزیز را در قالب آموزش های مختلف پاسخ دهیم.

بخش های اصلی

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

راه های ارتباطی

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

کلیه حقوق مادی و معنوی وبسایت متعلق به لرن سورس می باشد.