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

استایل Link در CSS

با سلام به شما همراهان عزیز میزفا، در ادامه آموزش CSS به استایل دهی لینک ها در CSS میرسیم . برای یادگیری آنچه از  لینک ها در سی اس اس نمیدانید ، تا انتهای مقاله با ما همراه باشید .

استایل عناصر در CSS

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

می توان لینک ها را به شیوه های مختلف سبک دهی (بندی)کرد .

لینک ها را می توان با هر خاصیت CSS ی سبک دهی کرد از جمله ی آن میتوان رنگ, نوع فونت و پس زمینه را نام برد .

 

a {

color: #FF0000;

}

به علاوه این امکان وجود دارد که لینک ها را بسته به state(حالتی) که در آن قرار دارند, به گونه ای متفاوت سبک دهی کرد .

 

چهار حالت مختلف برای لینک ها

  • ink – لینکی معمولی که هنوز مورد بازدید قرار نگرفته است .
  • avisited – لینکی که کاربر از آن بازدید کرده است .
  •  ahover – حالتی که در آن مکان نمای موس روی لینک قرار گرفته است .
  •  aactive – در این حالت کاربر روی لینک مورد نظر کلیک کرده

`

 

/* unvisited link */

a:link {

color: #FF0000;

}

/* visited link */

a:visited {

color: #00FF00;

}

/* mouse over link */

a:hover {

color: #FF00FF;

}

/* selected link */

a:active {

color: #0000FF;

}

 

سبک های معمول لینک

در این بخش به دیگر شیوه های معمول در سبک دهی به لینک ها خواهیم پرداخت

افزودن جلوه های بصری به لینک ها ( Text decoration )

خاصیت text-decoration غالبا به منظور حذف زیرخط ها ( underline ) از لینک ها مورد استفاده قرارمی گیرد.

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: #B2FF99;

}

a:visited {

background-color: #FFFF85;

}

a:hover {

background-color: #FF704D;

}

a:active {

background-color: #FF704D;

}

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

 

برچسب ها

نوشته های مشابه

‫2 نظرها

  1. سلام کد هاتون تو این آخریه اشتباهه
    اینطوریه
    a: link
    a: visited
    دونقطه رو نذاشتین فقط …
    بازم خوب بود ممنون…….

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

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر