جلسه ۳۰.۵ – استایل Link در CSS

استایل css
استایل css

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

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

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

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

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

a {

color: #FF0000;

}

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

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

  • link – لینکی معمولی که هنوز مورد بازدید قرار نگرفته است .
  • 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 میپردازیم . پس با ما همراه باشید .

فیلم آموزشی asp.net core 2

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

فیلم آموزشی asp.net core 2

8 نظر

8 پاسخ

  1. سلام
    توی سرفصل چهار حالت مختلف برای لینک ها نوشتید ink (یدونه L از اولش جا افتاده )
    خواستم یه کمکی توی سئو سایت داشته باشم ^__^

    1. سلام حسین. خیلی ممنون که به مطالب دقت کامل داری و اطلاع دادی?
      اصلاحش میکنیم همین الان?

  2. با سلام و احترام
    ممنون از توضيحات مفيدتون
    من از وردپرس استفاده ميكنم و ميخواهم تمام لينك های‌سايت مورد نظرم(به فرض مثال) زيرخط دار بشوند(داراي خصوصياتي بشوند) ولی وقتی اين كدها را در صفحه مورد نظرم قرار ميدهم ، كدها برای منو هم اعمال ميشود كه من نميخوام برای منو اعمال بشه فقط لينك های كه در متن هست ميخوام زيرخط دار بشوند لطفا راهنمايي كنيد

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

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

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

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

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=