آموزش طراحی وب

لینک ها در CSS

در این جلسه در رابطه با لینک ها و حالت های مختلف یک لینک همراه با مثال صحبت می کنیم . همچنین اشاره ای به مبحث لینک ها در رسپانسیو هم شده است .

Link-icon

فصل چهارم : Properties در CSS

جلسه بیست و دوم  : لینک ها در CSS

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

فکر می کنم این مبحث رو خیلی دیر آموزش دادم ، اما باز هم مشکلی نداره ماهی رو هروقت از آب بگیری تازست 🙂 مهم اینه که تا قبل از شروع پروژه ی عملی تمامی مباحث رو یاد گرفته باشید .

خوب دوستان تو این جلسه در رابطه با لینک ها و حالت های مختلف یک لینک صحبت می کنیم .

مسلما میدونید که لینک ها چه عناصری هستند چون تو فصل html در جلسه ی “ لینک ها در HTML ” بطور کامل توضیح دادم که لینک ها چه عناصری هستند و چه کاربردی دارن . در این مبحث آموزشی میخوایم حالت های مختلف یک لینک رو خدمتتون آموزش بدیم .

 

زمانی که شما یک لینک در صفحه تعریف می کنید ، شامل ۴ حالت میشه .

 

۱-      حالت عادی یا همون حالت link که لینک در حال نمایش هست که به دو صورت میتونید در css این حالت رو تعریف کنید:

یا

 

۲-      حالت hover زمانیه که موس روی لینک قرار میگیره . مثلا در مثال زیر گفتیم زمانی که موس روی لینک قرار گرفت رنگ عبارت به طوسی تغییر پیدا کنه.

 

۳-      حالت active که با کلیک روی لینک این حالت اتفاق میوفته . یعنی زمانی که شما دکمه موس رو فشار میدید تا کلیک انجام بشه حالت active به حساب میاد ، زمانی که دکمه رو رها کنید، حالت active هم از بین میره.

این حالت زمانی بیشترین کاربرد رو داره که شما قصد رسپانسیو کردن قالب رو دارید. در دستگاه هایی مثل موبایل و تبلت، حالت hover رو نمیتونید پیاده کنید مگر اینکه انگشت رو از یه نقطه تا یه نقطه ی دیگه بکشید و از روی لینک رد کنید که گاهی اوقات حالت hover روی لینک اتفاق میوفته اما این کار اصلا اصولی نیست ، ولی active رو میتونید به راحتی اعمال کنید. چون در این دستگاه ها کاربر با قرار دادن انگشت روی لینک اون رو انتخاب میکنه و در اون حالت active اتفاق میوفته. زمانی که شما یک استایل به hover لینکتون میدید به active هم میدید که در مانیتور hover اجرا بشه و در موبایل و تبلت active اجرا بشه .

active

 

۴-      حالت visited زمانیه که شما روی لینک کلیک کردید و لینک رو باز کردید .

حالتی که مدنظرتون هست رو کافیه با دو نقطه : بعد از عنصر a قرار بدید و بعد استایل دلخواهتون رو تعریف کنید .

 

خط زیر لینک ها

در حالت پیش فرض لینک ها زیرخط دار هستند و شما میتونید با خاصیت text-decoration این خط رو حذف کنید . این خاصیت شامل مقادیر زیر میشه :

none : با این مقدار خط زیر لینک حذف میشه .

underline : با این مقدار زیر لینک خط نمایان میشه .

overline : با این مقدار یک خط بالای لینک نمایان میشه .

line-through : یک خط رو لینک دقیقا روی عبارت نمایان میشه .

مثال :

البته خاصیت text-decoration برای عناصر دیگه هم استفاده میشه ، مثلا عناصر h1 , h2 و … .

 

در اینجا این جلسه ی آموزشی هم به اتمام میرسه ، امیدوارم مفید بوده باشه .

موفق و پاینده باشید 🙂

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۲

  • آقای همت یار ممنون از این آموزشتون نمیدونید من چقدر دنبال این آموزش بودم مخصوص قسمت کلیک بر روی لینک واقعا ازتون ممنونم
    خیلی خیلی ممنونم

  • ممنون از آموزشتون بخصوص اون قسمت a:active و کاربردش در حالت ریسپانسیو و نمایش در موبایل.

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

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

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

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین