آموزش 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 میپردازیم . پس با ما همراه باشید .

 

برچسب ها

نوید معدن نژاد

یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!

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

‫4 نظر داریم، تو هم نظر بذار، پاسخ کامل میدیم :)

    1. سلام. سوال خیلی گنگ هست. بیشتر توضیح بدید. لینک مربوط به سایت شما؟ اگر سایت خودتون میگید بهترین ابزار گوگل انالیتیکس هست.

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

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

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

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


حداکثر حجم فایل برای آپلود: 1 MB.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

همچنین ببینید

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

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

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